Hola gente! Tengo un problema con este ejemplo que quiero incluir en mi web. Lo que estoy tratando de hacer es que me muestre en un tooltip, una imagen, un codigo y la descripción de un producto de acuerdo al ejemplo que les puse en el primer div. Los demás son del ejemplo que viene con todo esto.
Uno de los problemas que encontré es que al agregar el js y al pasar el mouse por toda la web, como está todo hecho con css y capas,
el js toma TODOS los divs y no el div donde están las variables.
Otro problema es... cómo hago para que la página.php tome esas variables SIN hacer click ni presionar nada, pase a esa página, haga la consulta y me muestre en el tooltip todos los datos.
Les dejo los archivos.
pagina.html
Código HTML:
<html>
<head>
<style>
.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;
}
</style>
<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>
<a href="detalle.php?id_articulo=<?php echo $fila['id_articulo']; ?>&cod_categoria=<?php echo $fila['cod_categoria']; ?>" ><div class="cuadradito" id="c1"></div></a>
<div class="cuadradito" id="c2"></div>
<div class="cuadradito" id="c3"></div>
<div class="cuadradito" id="c4"></div>
</body>
</html> 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 + 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;
}
pagina.php
Código PHP:
<?php
if ($_REQUEST['cod']=='c1')
{
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 "<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 "<p>Tercer tooltip.</p>";
if ($_REQUEST['cod']=='c4')
echo "<p>Cuarto tooltip.</p>";
?>
Desde ya muchas gracias y espero puedan darme una mano.
Saludos.
MArx.