Foros del Web - Ver Mensaje Individual

marx-pola · #1 (**permalink**) 18/08/2011, 21:01

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.