|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Tips dinámicos
por Luciano Moreno, del departamento de diseño web de BJS Software.
A lo largo de los últimos dias he recibido varias peticiones relacionadas con un script que permita simular los conocidos "tips" o "bocadillos" que aparecen cuando situamos el cursor encima de una imagen, pero que aparecieran en el caso de un enlace cualquiera.
El caso es que la etiqueta <A> posée un atributo propio, TITLE, que permite hacer esto, si bien es cierto que no funciona en Nestcape 4x y que no podemos configurar la apariencia de estos tips. Así que se hace necesario crear los nuestros propios, cosa que vamos a hacer usando dos capas, y que además nos van a permitir darle a los tips la apariencia que deseémos. El script es cross-browser (compatible con todos los navegadores de cuarta generación).
El escript está dividido en dos partes: una página HTML normal, en la que vamos a situar la capa principal del tip y los estilos de la misma, y un fichero JavaScript externo queva a ser el encargado de pintar en contenido del tip.
El código necesario para la página HTML es el siguiente:
<html>
<head>
<title>HTMLWeb.
WebScript . Capas. Tips dinamicos</title>
<style
type="text/css">
#tip{
position:absolute;
background-color:yellow;
layer-background-color:yellow;
border:1px red
solid;
visibility:hidden;
}
.tdtip{
font-size:10px;
font-family:Verdana,Helvetica;
}
</style>
<script
language="JavaScript"
src="tip.js"></script>
</head>
<body>
<a
href="#" onmouseover="muestraTip('primer enlace')"
onmouseout="ocultaTip()">enlace 1</a><br><br>
<a
href="#" onmouseover="muestraTip('descripción del segundo enlace
enlace')" onmouseout="ocultaTip()">enlace
2</a><br><br>
<a href="#" onmouseover="muestraTip('y
aquí va el tercer tip')" onmouseout="ocultaTip()">enlace
3</a><br><br>
<div
id="tip"></div>
</body>
</html>
Y el código del fichero JavaScript, el que sigue:
/**
* fichero JavaScript para construir
tips dinamicos cross-browser
*@Autor Luciano
Moreno (http://www.htmlweb.net)
*/
/**
* var tipX, tipY >> posiciones
izquierda y superior del tip respecto al cursor
* var estilo >> <almacena la ruta de
acceso a los estilos del tip en cada navegador
* var x, y >> almacenan las posiciones temporales del tip al mover el
cursor sobre el link
* var masX,masY >>
pixels en coordenadas X e Y que se suman a la posicion del tip cuando
* no esta visible, para que no aparezcan las
barras de desplazamiento en la ventana
*/
vartipX=10,tipY=0;
var
estilo,x,y;
varmasX=-1000,masY=-1000;
/**
*
capturamos el evento en Nestcape Navigator
*/
if(document.layers)
{
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove=capturaRaton;
/**
*
funcion que situa el tip en la posicion adecuada y lo hace
visible
* var cadena >> contiene el
codigo HTML del contenido de la capa tip en forma de
string
*/
function muestraTip(msg)
{
var cadena="<span
class='contenido'><table width=150 border=0 cellpadding=2
cellspacing=0>"+
"<tr><td
class='tdtip'>"+msg+"</td></tr></table></span>";
/**
* quitamos los pixels de mas en Y cuando vamos a mostrar el
tip
*/
masX=tipX;
masY=tipY;
/**
* para Nestcape 4x
abrimos el documento de la capa y escribimos la cadena de
contenido
*/
if(document.layers)
{
document.tip.document.write(cadena);
document.tip.document.close();
document.tip.visibility="visible"
}
/**
* para Internet
Explorer y Nestcape 6x escribimos en contenido del tip
directamente
*/
if(document.all)
{
document.all("tip").innerHTML=cadena;
document.all("tip").style.visibility="visible"
}
if(document.getElementById)
{
document.getElementById("tip").innerHTML=cadena;
document.getElementById("tip").style.visibility="visible"
}
}
/**
*
funcion que posiciona en cada momento el tip mediante las coordenadas capturadas
del raton
*/
function capturaRaton(e)
{
if(document.all)
{
x=event.x+document.body.scrollLeft;
y=event.y+document.body.scrollTop;
document.all("tip").style.left=x+masX;
document.all("tip").style.top=y+masY;
}
else
if(document.layers)
{
x=e.pageX;
y=e.pageY;
document.layers['tip'].left=x+masX;
document.layers['tip'].top=y+masY;
}
else
if(document.getElementById)
{
x=e.clientX;
y=e.clientY;
window.status=x;
document.getElementById("tip").style.left=x+masX;
document.getElementById("tip").style.top=y+masY;
}
}
/**
*
funcion para ocultar el tip y asignarle la posicion Y con exceso
negativo
*/
function ocultaTip()
{
masY=-1000;
masX=-1000;
if(document.all)
document.all("tip").style.visibility="hidden";
else
if(document.layers)
document.layers["tip"].visibility="hide";
else
if(document.getElementById)
document.getElementById("tip").style.visibility="hidden";
}
/**
* fin del fichero
*/
Consideraciones:
1) Como véis, en la página HTML lo único que hacemos es dar estilos a la capa padre principal (tip) y a la celda de la tabla que pinta dentro el código JavaScript (tdtip). Incluimos luego un enlace al fichero tip.js, que es donde está el código JavaScript necesario y por último colocamos en el BODY la capa "tip", inicialmente vacía.
2) El código del fichero JavaScript está explicado mediante comentarios de forma clara. Solo deciros que se basa en la captura de las coordenadas del puntero sobre la pantalla del navegador para posicionar la capa del tip. Esta está inicialmente escondida, pero aparecerá cada vez que se sitúe el puntero sobre un enlace, y se ocultará al abandonarlo.
3) Cuando llamamos a la función muestraTip('cadena') le pasamos como argumento el texto que debe aparecer en el tip, y lo que hace la función es escribir el mismo dentro de la capa, usando para ello la propiedad "innerHtml" de la capa, que funciona en Internet Explorer y en Nestcape 6x. En el caso de Nestcape 4x debemos abrir el documento de la capa, escribir en ella mediante el método write y luego cerrar el documento.
El resultado de este código podéis verlo pinchando aquí.
Y los ficheros necesarios aquí, en formato ZIP.
Eso es todo, amigos. Si tenéis alguna duda, escribidnos.