Códigos javascript para el control de hipervinculos.

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.

CÓDIGO 0103

Tres hipervínculos imprescindibles.

Aquí ofrecemos el código para poner enlaces a las paginas anterior y siguiente que constan en el historial con enlace de texto, botón e imagen.

<html> <head> <title>Hipervinculos atrás, adelante y actualizar con enlace de texto, de imagen y botón</title> </head> <body> <p><a href="javascript:history.go(-1)"><font face="Verdana" color="#000000">Atrás</font></a></p> <p><a href="javascript:history.go(1)"><font face="Verdana" color="#0000FF">Adelante</font></a></p> <p><a href="javascript:history.go(0)"><font face="Verdana" color="#0000FF">Actualizar</font></a></p> <p><a href="javascript:history.go(-1)"><img border="0" src="http://www.uterra.com/images_uterra/demos_script/demo_script0001.jpg" width="100" height="100"></font></a></p> <p><a href="javascript:history.go(1)"><img border="0" src="http://www.uterra.com/images_uterra/demos_script/demo_script0002.jpg" width="100" height="100"></font></a></p> <p><a href="javascript:history.go(0)"><img border="0" src="http://www.uterra.com/images_uterra/demos_script/demo_script0001.jpg" width="100" height="100"></font></a></p> <p><input TYPE="button" VALUE=" ATRÁS " onClick="history.go(-1)"></p> <p><input TYPE="button" VALUE=" ADELANTE " onCLick="history.go(1)"> </p> <p><input TYPE="button" VALUE="ACTUALIZAR" onCLick="history.go(0)"> </p> </body> </html>

Ver demostración

CÓDIGO 0104

Imprimir una página con un hipervínculo.

Este codigo te permite imprimir una pagina sin recurrir a los botones de tu navegador, con la posibilidad de tener en enlace como texto, boton o imagen.

CÓDIGO 0105

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.

<html> <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>

Ver demostración

CÓDIGO 0106

Hipervínculo sin la línea inferior.

Este código te permite eliminar permanentemente la molesta línea inferior que aparece en los enlaces.

Página anterior

Página siguiente