Tengo una duda con este código javascript y una tooltip que quiero mostrar. Les paso los códigos:
funciones.js
Código Javascript :
addEvent(window,'load',inicializarEventos,false);
function inicializarEventos()
{
var vec=document.getElementsByTagName('div');
for(f=0;f<vec.length;f++)
{
addEvent(vec[f],'mouseover',mostrarToolTip,false);
addEvent(vec[f],'mouseout',ocultarToolTip,false);
addEvent(vec[f],'mousemove',actualizarToolTip,false);
}
var ele=document.createElement('div');
ele.setAttribute('id','divmensaje');
vec=document.getElementsByTagName('body');
vec[0].appendChild(ele);
}
function mostrarToolTip(e)
{
var d = document.getElementById("divmensaje");
d.style.visibility = "visible";
if (window.event)
e=window.event;
d.style.left = e.clientX + document.body.scrollLeft - 45;
d.style.top = e.clientY + document.body.scrollTop + 15;
var ref;
if (window.event)
ref=window.event.srcElement;
else
if (e)
ref=e.target;
recuperarServidorTooltip(ref.getAttribute('id'));
}
function actualizarToolTip(e)
{
if (window.event)
e=window.event;
var d = document.getElementById("divmensaje");
d.style.left = e.clientX + document.body.scrollLeft - 45;
d.style.top = e.clientY + document.body.scrollTop + 15;
}
function ocultarToolTip(e)
{
var d = document.getElementById("divmensaje");
d.style.visibility = "hidden";
}
var conexion1;
function recuperarServidorTooltip(codigo)
{
conexion1=crearXMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open('GET','tooltip.php?id_producto='+codigo, true);
conexion1.send(null);
}
function procesarEventos()
{
var d = document.getElementById("divmensaje");
d.style.visibility = "visible";
if(conexion1.readyState == 4)
{
d.innerHTML=conexion1.responseText;
}
else
{
d.innerHTML = '<img src="cargando.gif">';
}
}Y tengo una página maquetada con varios divs, PERO el problema es que quiero que me muestre la TOOLTIP con foto y texto al poner el cursor sobre <div id="cont-foto">. Con el código de arriba me aparece la TOOLTIP al posicionarme sobre CUALQUIER DIV de mi pagina y lo que yo quiero es que el JS haga solo referencia sobre el div cont-foto:
Código HTML :
<div id="contenedor"> <div id="menuprincipal"> <div id="listadodeproductos"> <div id="cont-foto"><img src="UNAFOTODEALGO.jpg" border="0" /></div> </div> </div> </div>
¿Qué tengo que modificar en el código JS para que solo tome el div cont-foto y no a todos como actualmente lo está haciendo?
No se pueden imaginar hace cuianto tiempo que estoy dando vueltas con esto.
Gracias a todos y saludos.
Picasso
