16 - Mostrar un tooltip con datos recuperados del servidor en forma asincrónica


Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

<html>
<head>
<title>Problema</title>
<script languaje="javascript" src="funciones.js" type="text/javascript"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p>Entre con el mouse al recuadro.</p>
<div class="cuadradito" id="c1"></div>
<div class="cuadradito" id="c2"></div>
<div class="cuadradito" id="c3"></div>
<div class="cuadradito" id="c4"></div>
</body>
</html>
.cuadradito{
  background-color: #f00;
  height: 50px; 
  width: 50px;
  margin:3px;
  z-index: -1;

}

#divmensaje {
  background-color: yellow;
   position: absolute; 
   visibility: hidden; 
   padding: 5px;
   width:250px;
  z-index: 100;
}
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 + 15;
  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 + 15;
  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','pagina1.php?cod='+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">';
  }
}


//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}
<?php
  if ($_REQUEST['cod']=='c1')
  {
    echo "<img src=\"../imagen1.jpg\">";
    echo "<p>Primer tooltip.</p>";
    echo "<p>aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaa";
    echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaa";
    echo "aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaaaa aaaaaaa";
    echo "aaaaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaa";
    echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaaaa</p>";
  }
  if ($_REQUEST['cod']=='c2')
  {    
    echo "<img src=\"../imagen2.jpg\">";
    echo "<p>Segundo tooltip.</p>";
    echo "<p>bbbbbbbb bbbbbbbbbbb bbbbbbbb bbbbbbbbbbbbbb bbbbbbbbbbb bb";
    echo "bbbbbbbb bbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbb bbbbbbbbbbb bbb</p>";
  }
  if ($_REQUEST['cod']=='c3')
  {
    echo "<img src=\"../imagen3.jpg\">";
    echo "<p>Tercer tooltip.</p>";
  }
  if ($_REQUEST['cod']=='c4')
  {
    echo "<img src=\"../imagen4.jpg\">";
    echo "<p>Cuarto tooltip.</p>";
  }

?>
Agregar una imagen al tooltip. En el servidor ya hay cuatro imagenes llamadas imagen1.jpg, imagen2.jpg etc. y se encuentran en el directorio inmediatamente superior a donde se almacenan las páginas que codificará ( <img src="../imagen1.jpg"> )
Ver solución

pagina1.html







estilos.css




funciones.js




pagina1.php