Efecto etiqueta javascript

Esta rutina muestra un mensaje colorido cuando nos posicionamos encima de algún enlace. Muy bueno!

<html>
<title>Efecto etiqueta</title>
<body>
<script type="text/javascript" language="JavaScript">
<!--
/*--------------------------------------------------------------------------
por cada explicación que quieras incluir, tienes que escribir una línea !exactamente! como las siguientes por cada explicación que quieras mostrar. Los elementos tienen que estar separados por coma. 
Si quieres incluir un " hazlo en esta forma \".
primer elemento: el texto de tu explicación
segundo: Tamaño del texto
tercero: distancia horizontal del movimiento mouseover
cuarto: distancia vertical del movimiento mouseover
quinto: color del texto
sexto: backgroundcolor(color de fondo)
sétimo: ancho de la capa (layer) en pixels, para IE de otra forma la capa se despliega completamente sobre la pantalla
-----------------------------
cada una debe desplegar una explicación que tiene que incluir los siguientes comandos onMouseover y onMouseout.
<a href="#"></a>onMouseOver="display(1,event)" onMouseOut="hide_layer()"</a>
la conexión entre el enlace (link) y la explicación es hecha a través del número en el manejador del evento onMouseover.
el link que muestra la primera explicación: display(1,event)
segundo: display(2,event)
...
quinto: display(5,event)
y asi sigue
-----------------------------------------------------------------------------
!!!
No te olvides de incluir la capa de salida(layer) al !final!de tu documento. Solo copialo y pegalo de esta página.
*/


	var explanation = new Array()
explanation[1] =  new Array ("Hyper Text Markup Language.","+0",100,0,"#663399","#FFCCFF",240);
explanation[2] =   new Array("Script Language","+1",10,20,"#0000F0","#09F9AF",180);
explanation[3] =   new Array("World Wide Web","+2",0,-50,"#990033","#FFCC99",240);
explanation[4] =   new Array("Alguna pregunta? Solo enviame un mail.","+1",100,0,"#003333","#CCCC99",280);
ns = (document.layers)? true : false;
ie = (document.all)? true: false;

function display(a,event){
if (a>explanation.length-1){alert("You tried to access an explanation which is not defined!."); return}
//a=welches Array event; nur fuer NS
if (ns) layer_to_display_in = document.output;
if (ie) layer_to_display_in = output.style;
if (ns) {layer_to_display_in.visibility = "show" ;//Ausgabelayer wird eingeblendet
		layer_to_display_in.left = event.pageX+explanation[a][2];
		layer_to_display_in.top = event.pageY+explanation[a][3];// Position relativ zum Klickereignis
with(document.layers["output"].document){ // Ausgabetext
open();
write("<b><font size="+explanation[a][1]+" color="+explanation[a][4]+">"+explanation[a][0]+"</font></b>");
close();
bgColor=explanation[a][5]}
}
	
if (ie)  {	layer_to_display_in.visibility = "visible";
if (isNaN(explanation[a][1])) alert("Something is wrong with the input of the text size.\n\nPlease check.")
	//(which_size>300)?which_size=300:which_size=which_size; // which_size hier max. 300px
	layer_to_display_in.pixelWidth=explanation[a][6];
		layer_to_display_in.left=window.event.clientX+explanation[a][2];
		layer_to_display_in.top = window.event.clientY+explanation[a][3];
		layer_to_display_in.backgroundColor=explanation[a][5]
	document.all["output"].innerHTML ="<b><font size="+explanation[a][1]+" color="+explanation[a][4]+">"+explanation[a][0]+"</font></b>";}
}

function hide_layer() {
if (ns) layer_to_display_in.visibility = "hide"	;
else if (ie) layer_to_display_in.visibility = "hidden"}
//-->
</script>
<div align="left"><table border="0" width="598">
      <tr>
        <td width="219" valign="top" style="border-right: thin none rgb(128,128,128)"><small><font
        face="Tahoma"><font color="#000040"><small>Pasa tu cursor sobre los hipervínculos y
        observa como se activa un mensaje.</small></font><p><font color="#000000">Script hecho por
        <a href="mailto:[email protected]" onMouseOver="display(4,event)"
        onMouseOut="hide_layer()" style="color: rgb(0,0,255)">M. Weller </a></font></font></p>
        <p><font face="Tahoma" color="#000000">Documentos escritos solo en<a href="#"
        onMouseOver="display(1,event)" onMouseOut="hide_layer()" style="color: rgb(0,0,255)"> HTML</a>
        se ven muy estáticos. </font></p>
        <p><font face="Tahoma" color="#000000">Con <a href="#" onMouseOver="display(2,event)"
        onMouseOut="hide_layer()" style="color: rgb(0,0,255)">JavaScript</a> tu puedes cambiar
        eso. </font></p>
        </small><p><font face="Tahoma" color="#000000"><small>Entonces la <a href="#"
        onMouseOver="display(3,event)" onMouseOut="hide_layer()" style="color: rgb(0,0,255)">WWW</a> 
        se convierte en algo mas interesante. </small></font></p>
        <div ID="output" STYLE="POSITION:absolute;  TOP:0px; LEFT:0px; visibility: hidden"><p> </p>
        </div></td>
</body>
</html> 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>