Carga de imágenes externas en un controlador de eventos onMouseOver de información sobre herramientas

Estoy creando una información sobre herramientas dinámica para un sitio web de compras de automóviles para una página que carga toneladas de fotos según los parámetros de búsqueda. Las imágenes cargadas son miniaturas que alojamos localmente.

Donde tengo problemas es agregar funcionalidad, de modo que cuando alguien pasa el mouse sobre la miniatura, la información sobre herramientas muestra una imagen más grande del automóvil, así como el año, la marca, el modelo y el precio. Estas imágenes están alojadas en un dominio externo.

Estoy usando el complemento jQuery Tools Tooltip para la funcionalidad principal. Soy un poco novato en lo que respecta a estos conceptos de JavaScript más intermedios, y parece que no puedo encontrar ningún tutorial en Google que me ayude con mi caso de uso.

Mi HTML

<div id="tooltip" class="tooltip">
    <img  src="http://placehold.it/320x240" />
    <p>2012 Infiniti GSX $29,800</p>
</div><!-- #tooltip -->
<ul id="thumbs">        
    <li>
        <a href="#">
        <img src="http://www.web2carz.com/images/thumbs/22/80/thumb_large_70364184.jpg" />
        </a>
    </li>               
</ul>​

Mi JavaScript:

// Image Tooltips
jQuery("#thumbs li a").tooltip({
    tip: '#tooltip',
    effect: 'fade',
    relative: true,
    position: 'bottom center',
    delay: 0,
    offset: [5, 150]
}).dynamic({ top: { direction: 'down', bounce: true } });​

Mi suposición inicial es agregar una función como esta (encontrar aquí):

function loadImg() {
    var img = new Image();
    img.src='http://placehold.it/320x240';
    img.id = 'toolImg';
    return img;
    document.getElementById('tooltip').innerHTML += img;
  }

Agregue el controlador de eventos a mi ancla como: <a href="#" onMouseOver="loadImg()"> y luego agregue la imagen cargada a la información sobre herramientas:

document.getElementById('tooltip').innerHTML += 'img';

Parece que no puedo encontrar los próximos pasos adecuados para lograr la funcionalidad que quiero.

También tengo un jsfiddle con mi código actual configurado:

http://jsfiddle.net/aRJ84/10/

RESPONDER

Así que lo hice funcionar, aquí está mi código de funcionamiento:

HTML:

<ul id="thumbs">
 <li>
  <a href="#" onMouseOver="loadImg('http://placehold.it/720x480', 'Honda')">
   <img src="http://www.web2carz.com/images/thumbs/22/80/thumb_large_70364184.jpg" />          
  </a>
 </li>
</ul>

JavaScript:

function loadImg(img, makeName) {
  var bla = "<img src=\"" + img + "\"/>";

  bla += "<br><p>This is  great car</p>" + makeName;

  document.getElementById('tooltip').innerHTML = bla;
}

preguntado el 03 de mayo de 12 a las 17:05

1 Respuestas

Intente cambiar la definición de su controlador de eventos a esto:

<a href="#" onMouseOver="loadImg()">

Parece que lo que en realidad estás haciendo es simplemente dar la onMouseOver evento a referencia a su función, que no es lo mismo que decirle a llamar al la función. Agregar los padres debería ayudar.

Fui a su jsFiddle para probar algunas ediciones, pero no veo el loadImg función en su JavaScript. No quiero hacer ningún daño, así que no hice ningún cambio. Espero que esto ayude -

contestado el 03 de mayo de 12 a las 18:05

Gracias por la respuesta. Actualicé mi jsfiddle, y siéntete libre de editarlo (si te apetece), estoy trabajando localmente. Agregué los paréntesis, pero aún nada... - robaby

Porque no hay loadImg función. Las cosas en su jsFiddle no parecen coincidir con la descripción de su pregunta. La mejor de las suertes - - sean mickey

Muchas gracias, su respuesta me ayudó a encaminarme en la dirección correcta, así que seguiré adelante y aceptaré como solución :) - robaby

Me alegro de haber ayudado. Yo mismo hice lo mismo: acepté la respuesta solo por indicarme la dirección correcta. Muy contento de que todo haya salido bien - - sean mickey

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.