- Hipervinculos

Hipervínculo con solo pasar el puntero

Con este código puedes colocar un enlace de tal forma que no es necesario pulsar el ratón, basta con pasar el puntero sobre él, para dirigirnos al archivo de destino.

<html> <head> <title>Enlace con solo pasar el ratón</title> </head> <body> <a href="Doesn't matter" onMouseOver="parent.location='http://www.uterra.com'"> Enlace solo con pasar el ratón</a> </body> </html>

Informa sobre el destino del hipervínculo

Con este código al colocar el puntero sobre el enlace te aparecerá información sobre su destino.

<head> <title>Informa sobre el destino de un enlace</title> <STYLE TYPE="text/css"> BODY {OVERFLOW:scroll;OVERFLOW-X:hidden} .DEK {POSITION:absolute; VISIBILITY:hidden; Z-INDEX:200;} </STYLE> </head> <body> <p ID="dek" CLASS="dek"> <SCRIPT TYPE="text/javascript"> Xoffset=-20; Yoffset= 20; var nav,old,iex=(document.all),yyy=-1000; if(navigator.appName=="Netscape") {(document.layers)?nav= true: old=true;} if(!old){ var skn=(nav)?document.dek:dek.style; if(nav)document.captureEvents(Event.MOUSEMOVE); document.onmousemove=get_mouse; } function popup(msg){ var content="<TABLE WIDTH=130 BORDER=2 BORDERCOLOR=#FF9933 CELLPADDING=2 CELLSPACING=4 "+ "BGCOLOR=#CC33FF><TD ALIGN=center><FONT FACE=VERDANA SIZE=2 COLOR=#FFCC66><b>"+msg+"</b></FONT></TD></TABLE>"; if(old){alert(msg);return;} else{yyy=Yoffset; if(nav){skn.document.write(content); skn.document.close(); skn.visibility="visible"} if(iex){document.all("dek").innerHTML= content; skn.visibility="visible"} } } function get_mouse(e){ var x=(nav)?e.pageX:event.x+document.body.scrollLeft; skn.left= x+Xoffset; var y=(nav)?e.pageY:event.y+document.body.scrollTop; skn.top=y+yyy; } function kill(){ if(!old){yyy=-1000;skn.visibility="hidden";} } </SCRIPT> </p> <p><a href="http://www.uterra.com" onMouseOver="popup('El enlace te lleva a la pagina principal de UTERRA.COM')" onMouseOut="kill()" ;>ENLACE 1</a></p> <p><a href="http://www.uterra.com/crea_tu_web/principal.htm" onMouseOver="popup('Este enlace te lleva a la pagina principal del curso de diseño web de UTERRA.COM')" onMouseOut="kill()" ;>ENLACE 2</a> <p><a href="http://www.uterra.com/internet/codigos_javascript.htm" onMouseOver="popup('El enlace te lleva a la pagina de SCRIPT de UTERRA.COM')" onMouseOut="kill()" ;>ENLACE 3</a></p> </body> </html>

Efectos de color

Con este código cuando pasas el ratón sobre los enlaces aparece un fondo de color sobre él.

<html> <head> <title>Resalte en color de un enlace</title> <script> function highlight(which,color){ if (document.all||document.getElementById) which.style.backgroundColor=color} </script> </head> <body> <font face="Verdana" size="2"> <p><a href="http://www.uterra.com" onMouseover="highlight(this,'#008000')" onMouseout="highlight(this,document.bgColor)">UTERRA.COM</a></p> <p><a href="http://www.uterra.com" onMouseover="highlight(this,'#00FF00')" onMouseout="highlight(this,document.bgColor)">Códigos java script</a></p> <p><a href="http://www.uterra.com" onMouseover="highlight(this,'#FF0000')" onMouseout="highlight(this,document.bgColor)">Crea tu web</a></p> </font> </body> </html>

Destellos de colores en los enlaces

Con este script podrás crear efectos de destellos en varios colores en aquellos enlaces sobre los que desees llamar la atención.

<html> <head> <title>Destellos de colores en los enlaces</title> <script language="JavaScript"> var ok=150 //delay time in milliseconds var color=0 function rain() { color=color+1; if(color==1){document.linkColor='red';} if(color==1){document.vlinkColor='red';} if(color==1){document.alinkColor='red'; setTimeout("rain();",ok);} if(color==2){document.linkColor='orange';} if(color==2){document.vlinkColor='orange';} if(color==2){document.alinkColor='orange'; setTimeout("rain();",ok);} if(color==3){document.linkColor='yellow';} if(color==3){document.vlinkColor='yellow';} if(color==3){document.alinkColor='yellow'; setTimeout("rain();",ok);} if(color==4){document.linkColor='green';} if(color==4){document.vlinkColor='green';} if(color==4){document.alinkColor='green'; setTimeout("rain();",ok);} if(color==5){document.linkColor='blue';} if(color==5){document.vlinkColor='blue';} if(color==5){document.alinkColor='blue'; setTimeout("rain();",ok);} if(color==6){document.linkColor='A209F4';} if(color==6){document.vlinkColor='A209F4';} if(color==6){document.alinkColor='A209F4'; setTimeout("rain();",ok);} if(color==7){document.linkColor='purple';} if(color==7){document.vlinkColor='purple';} if(color==7){document.alinkColor='purple'; setTimeout("rain();",ok);} if(color==8){document.linkColor='pink';} if(color==8){document.vlinkColor='pink';} if(color==8){document.alinkColor='pink'; setTimeout("rain();",ok);} if(color==9){color=0; setTimeout("rain();",ok);} } setTimeout("rain();",ok); </script> </head> <body> <a href="http://www.uterra.com">JavaScript</a> <br> <a href="http://www.uterra.com">Curso de diseño Web</a><br> <a href="http://www.uterra.com">Juegos</a> </body> </html>