Tema: Tooltip
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 07/10/2011, 12:37
marx-pola
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años, 6 meses
Puntos: 1
Respuesta: Tooltip

Panino5001: gracias por responder.

El problema de esto no está en el código PHP, sino en el Javascript. Voy a hacerlo más facil ya que esto me está causando un dolor de cabeza terrible...

Tengo este código javascript:
funciones.js
Código:
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 quiero que me muestra una TOOLTIP con foto y texto al poner el cursor sobre <div id="cont-foto">. La TOOLTIP ya está creada, ya está todo creado pero quiero 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 nuevamente.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.