destacados

Gabriel Da Silva

Portafolio del ilustrador y director de arte brasileño, aunque afincado en Madrid, Gabriel Da Silva.

B&W Helmut Newton

Selección de fotografías en blanco y negro de uno de los fotógrafos más conocidos de las últimas décadas, Helmut Newton.

Judith Erwes

Fotógrafa afincada en Londres con un estilo que combina la moda, el humor y la estética retro.

Jody Rogac

Nacida en Inglaterra y criada en Canadá, Jody Rogac en la actualidad vive y trabaja en Brooklyn. Sus trabajo ha obtenido diversos galardones.

Publicaciones

Tooltip con Javascript y CSS

, , 12/05/2005 00:00:00

1.- Debemos crear un estilo para el tooltip:

<style type="text/css">
#toolTipBox {
       display: none;
       padding: 5;
       font-size: 12px;
       border: black solid 1px;
       font-family: verdana;
       position: absolute;
       background-color: #ffd038;
       color: 000000;
}
</style>

2.- Luego tenemos el código de javascript:

<script type="text/javascript">
var theObj="";
function toolTip(text,me) {
       theObj=me;
       theObj.onmousemove=updatePos;
       document.getElementById('toolTipBox').innerHTML=text;
       document.getElementById('toolTipBox').style.display="block";
       window.onscroll=updatePos;
}
function updatePos() {
       var ev=arguments[0]?arguments[0]:event;
       var x=ev.clientX;
       var y=ev.clientY;
       diffX=24;
       diffY=0;
       document.getElementById('toolTipBox').style.top  = y-2+diffY+document.body.scrollTop+ "px";
       document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+"px";
       theObj.onmouseout=hideMe;
}
function hideMe() {
       document.getElementById('toolTipBox').style.display="none";
}
</script>

3.- Todo lo anterior, lo más apropiado es insertarlo dentro de la etiqueta . Una vez hecho esto unicamento nos resta utilizarlo en las imágenes que lo deseemos.

<div align="center">
<span id="toolTipBox" width="200"></span>
<img src="imagen001.jpg" width="237" height="197" border="0" onmouseover="toolTip('Mensaje que aparecera en el tooltip',this)"></div>
Páginas: 1
comentarioscomentarios