[SOLUCIONADO] div cargado con js no carga imagenes

Ocharlo14 · #1 (**permalink**) 30/05/2013, 09:07

hola soy nuevo en esto de programacion y no se nada de js ni ajax.
yo tengo un meno que al ahcer click en alguna de sus opciones se abre en un div determinado la informacion solicitada, pero al cargar solo me trae el texto de la pagina y no las imagenes que estan en ese .html les dejo la funcion que estoy usando

Código:

<script type="text/javascript">
$(document).ready(function(){
$("#menu a").click(function(){
var href = $(this).attr("href");
$(this).attr({ href: "#"});
$("#show").load(href);
});
});
</script>

desde ya gracias

alberto510a · #2 (**permalink**) 30/05/2013, 09:14

Eso es muy raro comprueba que no hay no hay ningún conflicto con la ruta de las imágenes

Ocharlo14 · #3 (**permalink**) 30/05/2013, 09:19

las rutas estan bien porque si abro el archivo separado Hunter.html me abre la imagenes u.u

alberto510a · #4 (**permalink**) 30/05/2013, 09:28

¿Podrías ponerme el resto del código? Porque aquí a simple vista todo parece correcto.

Ocharlo14 · #5 (**permalink**) 30/05/2013, 09:29

Código:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu a").click(function(){
var href = $(this).attr("href");
$(this).attr({ href: "#"});
$("#show").load(href);
});
});
</script>
</head>
<body>
<div class="pagina_entera"><!--  EMPIEZA DIV PAGINA ENTERA  -->
  <div class="portada"> <!--  EMPIEZA DIV PORTADA  -->
    <div class="portada_foto"></div>
    <div class="portada_flash"></div>
  </div>
  <!--  TERMINA DIV PORTADA  -->
  <div class="botonera"> <!--  EMPIEZA DIV BOTONERA CONTIENE @MENU  -->
    <ul id="menu">
      <li><a href="Principal.html">Inicio</a></li>
      <li> <a href="#">Personajes</a>
        <ul>
          <li><a href="anexos/Hunter.html">Hunter</a></li>
          <li><a href="anexos/WitchBlades.html">WitchBlade</a></li>
          <li><a href="#">Chaman</a></li>
          <li><a href="#">Guarrior</a></li>
        </ul>
      </li>
      <li> <a href="#">Armas y Armaduras</a>
        <ul>
          <li><a href="#">Mejorar</a></li>
          <li><a href="#">Nitro Cubo</a></li>
          <li><a href="#">Desencantar</a></li>
          <li><a href="#">Desvincular</a></li>
        </ul>
      </li>
      <li> <a href="#">Gremios</a>
        <ul>
          <li><a href="#">Crear Gremio</a></li>
          <li><a href="#">Habilidades</a></li>
          <li><a href="#">Buffs</a></li>
          <li><a href="#">Casa Del Gremio</a></li>
        </ul
        >
      </li>
      <li> <a href="#">Oficios</a>
        <ul>
          <li><a href="#">Sastrería</a></li>
          <li><a href="#">Metalúrgica</a></li>
          <li><a href="#">Carpintería</a></li>
          <li><a href="#">Alquimia</a></li>
          <li><a href="#">Cocina</a></li>
        </ul
        >
      </li>
      <li> <a href="#">Survivals</a>
        <ul>
          <li><a href="#">Mejorar</a></li>
          <li><a href="#">Nitro Cubo</a></li>
          <li><a href="#">Desencantar</a></li>
          <li><a href="#">Desvincular</a></li>
        </ul
        >
      </li>
      <li> <a href="#">Varios</a>
        <ul>
          <li><a href="#">Survivals</a></li>
          <li><a href="#">Sets Hells</a></li>
          <li><a href="#">Tienda Dinero Real</a></li>
        </ul
        >
      </li>
      <li> <a href="#">BountyHunters</a>
        <ul>
          <li><a href="#">Integrantes</a></li>
          <li><a href="#">Fotos</a></li>
          <li><a href="#">Desencantar</a></li>
          <li><a href="#">Desvincular</a></li>
        </ul
        >
      </li>
      <li> <a href="#">Videos e Imágenes</a>
        <ul>
          <li><a href="#">PvP</a></li>
          <li><a href="#">Jefes Dimensionales</a></li>
          <li><a href="#">Dungeons</a></li>
          <li><a href="#">Otros</a></li>
        </ul>
      </li>
      <li> <a href="#">PvP</a>
        <ul>
          <li><a href="#">Mejorar</a></li>
          <li><a href="#">Nitro Cubo</a></li>
          <li><a href="#">Desencantar</a></li>
          <li><a href="#">Desvincular</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!--  TERMINA DIV BOTONERA CONTIENE @MENU  -->
  <div class="pagina_central"> <!--  EMPIEZA DIV PAGINA CENTRAL  -->
    <div id="show" class="contenido_central" style="overflow: auto; width: 700px; height: 800px; background-color:rgba(255, 255, 255, 0.6); border: 0px solid #990000;"> <!--  EMPIEZA DIV CONTENIDO CENTRAL  --> 
    </div>
    <!--  TERMINA DIV CONTENIDO CENTRAL  -->
    <div class="botonera_vertical_der"></div>
    <div class="menu_inferior"> <!-- EMPIEZA MENU INFERIOR-->
      <ul>
        <li><a href="#">CONTACTO</a></li>
        <li><a href="#">lINKS</a></li>
        <li><a href="#">INFROMACION</a></li>
      </ul>
    </div>
    <!-- TERMINA MENU INFERIOR --> 
  </div>
  <!-- TERMINA PAGINA CENTRAL--> 
</div>
<!--  TERMINA DIV PAGINA ENTERA  -->
</body>
</html>

alberto510a · #6 (**permalink**) 30/05/2013, 09:36

En primer lugar te quiero comentar que si haces esto

Código Javascript:

Ver originalvar href = $(this).attr("href");
$(this).attr({ href: "#"});

Estás accediendo al atributo href de TODOS los links que derivan del id menu (6).

Y después te recomiendo que con el método .load() de jQuery coloques la url del archivo entera es decir:

No -> archivo.html
No -> www.archivo.html
Correcto -> http://www.archivo.html

Saludos

PD: En caso de haber hecho esto y seguir con el problema, necesito el html de esa que quieres cargar mediante load()

Ocharlo14 · #7 (**permalink**) 30/05/2013, 09:51

esto? me carga cualquier cosa xD si lo dejo comun me carga hunter pero sin las imagenes
tambien aclaro que las imagenes estan dentro de la carpeta images dentro de Hunter al lado de Hunter.html

Código:

<li><a href="C:/Users/OYM/Desktop/Bios/PruebasBountyHunters/BountyHunter/anexos/hunter/Hunter.html">Hunter</a></li>

u.u

Código:

<font size="24px"><center>
  <p>HUNTER</p>
</center>
</font>

<center>
  <p><img src="images/img_hunter1.gif" width="360" height="370">
</p></center>
  <p>Los cazadores acechan a sus presas desde lejos antes de atacarlas. Sus armas incluyen dagas para  eliminar los enemigos que se acercan demasiado, y arcos para llevar a cabo ataques devastadores desde muy lejos. Eventualmente, los cazadores deben elegir entre las clases especializadas disponibles, y así pueden elegir convertirse en Assassin, Ranger o Scout.</p>
  <p> C9_Class_Advancement_Hunter (Clase_Promocion_Cazador)</p>
  <img src="images/img_hunter2.gif" width="599" height="225" />
<p> Promociones.</p>
  <p> Una vez alcanzado el nivel 10, puedes tomar pruebas especiales y completar el pedido del Maestro Alex para ganarte una promoción.</p>
<p> Recompensas de la Promoción. </p>
  <p>Luego de tu promoción, puedes acceder a nuevas habilidades de elite (Elite Skills) y a la Formación de furia (Fury formation). Además, puedes ganar  1 habilidad de gremio adicional (Guild Skill/Buff). Si no perteneces a ningún gremio en el momento de tu promoción, obtendrás este bono cuando te unas a uno.</p>
  <p> Cambio de Clase.</p>
  <p> Para ganarte tu promoción luego de alcanzado el nivel 20, debes superar los distintos desafíos a los que te enfrente tu Entrenador de Clase (Class Trainer). Habla con tu entrenador en Waterford luego de haber completado los desafíos propuestos para cambio de clase, y así recibirás  tu promoción. El servidor en el que tu juegas puede limitar la lista de clases disponibles.    </p>
  <p>Recompensas por Cambio de Clase (Class Change Rewards)    </p>
  <p>Cambiar tu clase te permite tener nuevas y más especializadas habilidades. Además ganas 1 habilidad de gremio adicional (Guild Skill/Buff). Si no perteneces a ningún gremio en el momento de tu promoción, obtendrás este bono cuando te unas a uno.</p>
  <p> Tu SP (Skill Points – Puntos de Habilidad) se resetea  automáticamente luego de que cambias de clase.</p>
  <p> Clases Disponibles (Cazador)    </p>
  <p>Ranger: Los Rangers  tienen habilidad para realizar ataques silenciosos de gran alcance. No son extraños a la adversidad, los Rangers pueden llevar a cabo ataques a distancia en prácticamente todas las situaciones.</p>
  <p> Assassin: Una clase ostentosa que se especializa en habilidades de combate cuerpo a cuerpo de gran alcance. Los Assassin son los más rápidos y técnicos de todas las clases.</p>
  <p> Scout: Los Scouts utilizan trampas y una amplia variedad de habilidades de otras clases de cazadores para causar daño a sus enemigos.    </p>
  <p>Shadow: Los Shadows utilizan dagas de doble empuñadura para matar rápidamente a sus enemigos con sus combos mortales. </p>

este html no tiene body ni nada es asi simple nomas

alberto510a · #8 (**permalink**) 30/05/2013, 09:56

La ruta a los archivos e imágenes las debes aplicar así en caso de que estén en el pc:

Código HTML:

Ver original<a href="file:///C|/Users/OYM/Desktop/Bios/PruebasBountyHunters/BountyHunter/anexos/hunter/Hunter.html">

Y me refiero a que si tienes un link así:

Código HTML:

Ver original<a href="#">Link</a>

Y quieres cambiarle su link solo a él tienes que aplicarle una id y cambiarlo en el script:

Código HTML:

Ver original<a href="#" id="link">Link</a>

Código Javascript:

Ver original$("#link").click(function(){

Ocharlo14 · #9 (**permalink**) 30/05/2013, 10:10

me sigue sin cargar las fotos u.u te mando como quedo el codigo ahora con tus correcciones haber si lo hise bien
Perdon las molestias de verdad agradesco tu ayuda

HTML

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BountyHunter</title>
<link href="css_bountyhunter.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#link").click(function(){
var href = $(this).attr("href");
$(this).attr({ href: "#"});
$("#show").load(href);
});
});
</script>
</head>
<body>
<div class="pagina_entera"><!--  EMPIEZA DIV PAGINA ENTERA  -->
  <div class="portada"> <!--  EMPIEZA DIV PORTADA  -->
    <div class="portada_foto"></div>
    <div class="portada_flash"></div>
  </div>
  <!--  TERMINA DIV PORTADA  -->
  <div class="botonera"> <!--  EMPIEZA DIV BOTONERA CONTIENE @MENU  -->
    <ul id="menu">
      <li><a href="Principal.html">Inicio</a></li>
      <li> <a href="#">Personajes</a>
        <ul>
          <li><a href="file:///C|/Users/OYM/Desktop/Bios/PruebasBountyHunters/BountyHunter/anexos/hunter/Hunter.html" id="link">Hunter</a></li>
          <li><a href="anexos/WitchBlades.html">WitchBlade</a></li>
          <li><a href="#">Chaman</a></li>
          <li><a href="#">Guarrior</a></li>
        </ul>
      </li>
      <li> <a href="#">Armas y Armaduras</a>
        <ul>
          <li><a href="#">Mejorar</a></li>
          <li><a href="#">Nitro Cubo</a></li>
          <li><a href="#">Desencantar</a></li>
          <li><a href="#">Desvincular</a></li>
        </ul>
      </li>
      <li> <a href="#">Gremios</a>
        <ul>
          <li><a href="#">Crear Gremio</a></li>
          <li><a href="#">Habilidades</a></li>
          <li><a href="#">Buffs</a></li>
          <li><a href="#">Casa Del Gremio</a></li>
        </ul
        >
      </li>
      <li> <a href="#">Oficios</a>
        <ul>
          <li><a href="#">Sastrería</a></li>
          <li><a href="#">Metalúrgica</a></li>
          <li><a href="#">Carpintería</a></li>
          <li><a href="#">Alquimia</a></li>
          <li><a href="#">Cocina</a></li>
        </ul
        >
      </li>
      <li> <a href="#">Survivals</a>
        <ul>
          <li><a href="#">Mejorar</a></li>
          <li><a href="#">Nitro Cubo</a></li>
          <li><a href="#">Desencantar</a></li>
          <li><a href="#">Desvincular</a></li>
        </ul
        >
      </li>
      <li> <a href="#">Varios</a>
        <ul>
          <li><a href="#">Survivals</a></li>
          <li><a href="#">Sets Hells</a></li>
          <li><a href="#">Tienda Dinero Real</a></li>
        </ul
        >
      </li>
      <li> <a href="#">BountyHunters</a>
        <ul>
          <li><a href="#">Integrantes</a></li>
          <li><a href="#">Fotos</a></li>
          <li><a href="#">Desencantar</a></li>
          <li><a href="#">Desvincular</a></li>
        </ul
        >
      </li>
      <li> <a href="#">Videos e Imágenes</a>
        <ul>
          <li><a href="#">PvP</a></li>
          <li><a href="#">Jefes Dimensionales</a></li>
          <li><a href="#">Dungeons</a></li>
          <li><a href="#">Otros</a></li>
        </ul>
      </li>
      <li> <a href="#">PvP</a>
        <ul>
          <li><a href="#">Mejorar</a></li>
          <li><a href="#">Nitro Cubo</a></li>
          <li><a href="#">Desencantar</a></li>
          <li><a href="#">Desvincular</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!--  TERMINA DIV BOTONERA CONTIENE @MENU  -->
  <div class="pagina_central"> <!--  EMPIEZA DIV PAGINA CENTRAL  -->
    <div id="show" class="contenido_central" style="overflow: auto; width: 700px; height: 800px; background-color:rgba(255, 255, 255, 0.6); border: 0px solid #990000;"> <!--  EMPIEZA DIV CONTENIDO CENTRAL  --> 
    </div>
    <!--  TERMINA DIV CONTENIDO CENTRAL  -->
    <div class="botonera_vertical_der"></div>
    <div class="menu_inferior"> <!-- EMPIEZA MENU INFERIOR-->
      <ul>
        <li><a href="#">CONTACTO</a></li>
        <li><a href="#">lINKS</a></li>
        <li><a href="#">INFROMACION</a></li>
      </ul>
    </div>
    <!-- TERMINA MENU INFERIOR --> 
  </div>
  <!-- TERMINA PAGINA CENTRAL--> 
</div>
<!--  TERMINA DIV PAGINA ENTERA  -->
</body>
</html>

si queres te paso el css tambien si te sirve de ayuda u.u

Ocharlo14 · #10 (**permalink**) 30/05/2013, 10:18

al final lo solucione deje el html hunter al lado de la pagina principal y las imagenes las puse en la msima carpeta que las imagenes que uso en la pagina principal yo queria tener una carpeta especial para las paginas pero no voy a poder xD

alberto510a · #11 (**permalink**) 30/05/2013, 10:39

Código Javascript:

Ver original$(document).ready(function(){
$("#link").click(function(e){
e.preventDefault();
var href = $(this).attr("href");
$(this).attr({ 'href': "#"});
$("#show").load(href);
});
});

En el script pon esto, y pensando me dí cuenta de que navegadores como chrome y opera tienen el acceso a archivos locales restringidos si pruebas con firefox esto funciona perfectamente. Lo que debes hacer es subirlo a un servidor web y usar la url como te puse antes o si lo quieres de forma local en el ordenador usar localhost.

Saludos!