El sitio más completo sobre programación, recursos web y herramientas online para Webmasters
Fecha: 04/08/2005

Efecto etiqueta javascript

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

Código Javascript


<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:markus.weller@stud.uni-karlsruhe.de" 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>

Efecto etiqueta javascript Categoría: Javascript, Efectos texto

Compartir Efecto etiqueta javascript en Facebook Twitter MySpace del.icio.us fresqui Meneame


Scripts Similares:

» javascript Top Animacion
» text effects watermark javascript
» text effects zoom javascript
» text multi-fx animacion script
» javascript Top Animacion
» scroll fade javascript
Ver el perfil de Gabriel Marcelo Rodriguez en LinkedIn

Privacidad ּ Publicidad ּ Prensa ּ Premios ּ Colaborar ּ Enlazarnos ּ Mapa del Sitio ּ Aviso legal ּ Boletín ּ Contacto
2001 - 2011 | Sitio Sitio creado y mantenido por Gabriel Marcelo Rodriguez
Hosting de alta calidad a bajo costo Neolo.com.ar