Webmaster Workers utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies


Mostrar un tooltip con datos recuperados del servidor en for


Implementaremos un problema utilizando todos los conceptos aprendidos hasta ahora.


ProblemaImplementar un Tooltip con jQuery recuperando la información a mostrar del servidor en forma asincrónica.

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


pagina1.html



<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</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>

estilos.css



.cuadradito{
background-color: #f00;
height: 50px;
width: 50px;
margin:3px;
z-index: -1;
}

#divmensaje {
background-color: yellow;
position: absolute;
padding: 5px;
width:250px;
left:120px;
top:100px;
z-index: 100;
}

funciones.js



$(document).ready(function () {
$("body".append('<div id="divmensaje">hhhh</div>');
$("#divmensaje").hide();
$(".cuadradito").hover(function (e) {
$("#divmensaje").show();
$("#divmensaje").css("left",e.clientX+document.body.scrollLeft+5);
$("#divmensaje").css("top",e.clientY+document.body.scrollTop+5);
$("#divmensaje").load("pagina1.php?cod="+$(this).attr('id'));
},
function () {
$("#divmensaje").hide();
})
$(".cuadradito").mousemove(function (e){
$("#divmensaje").css("left",e.clientX+document.body.scrollLeft+5);
$("#divmensaje").css("top",e.clientY+document.body.scrollTop+5);
})
})

pagina1.php



<?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>";
}
?>

Como podemos ver el código JavaScript utilizando la librería jQuery queda muy compacto y reducido:



$(document).ready(function () {
$("body".append('<div id="divmensaje">hhhh</div>');
$("#divmensaje").hide();
$(".cuadradito").hover(function (e) {
$("#divmensaje").show();
$("#divmensaje").css("left",e.clientX+document.body.scrollLeft+5);
$("#divmensaje").css("top",e.clientY+document.body.scrollTop+5);
$("#divmensaje").load("pagina1.php?cod="+$(this).attr('id'));
},
function () {
$("#divmensaje").hide();
})
$(".cuadradito").mousemove(function (e){
$("#divmensaje").css("left",e.clientX+document.body.scrollLeft+5);
$("#divmensaje").css("top",e.clientY+document.body.scrollTop+5);
})
})


Opciones
Estadísticas
Creado 01.01.1970 a las 00:00 hs
Categoría Jquery

  • Medallas
  • 0
    Favoritos
  • 9714
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Administrador Administrador
Hombre Administrador  Mensaje
43 1,352 1
Medallas
No tiene medallas
Tags
Posts relacionados