Carga de imágenes externas en un controlador de eventos onMouseOver de información sobre herramientas
Frecuentes
Visto 2,065 veces
2
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:
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;
}
1 Respuestas
2
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
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas javascript jquery event-handling jquery-tools onmouseover or haz tu propia pregunta.
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 mickeyMuchas 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