Efectos en imágenes pegadas a un link de texto
Para entender mejor lo que vamos a
explicar, observen el ejemplo:
 WebExperto.com
Tectimes.com
MrDevy.com
JavaScript
La forma de realizarlo es muy sencilla: simplemente debemos contar con el siguiente
JavaScript que lo ubicaremos entre las etiquetas <head> y </head>:
<script
LANGUAGE="JavaScript">
<!--
IMG01 = "on.gif" //imagen al pasar por arriba
IMG02 = "off.gif" //imagen al salir de arriba
//Función MouseOver
function imgover(imgname){
imgname.src = IMG01
}
//Función MouseOut
function imgout(imgname){
imgname.src = IMG02
}
//-->
</script>
Armando los diferentes links
Para explicar el armado y funcionamiento de los links
tomaremos el ejemplo citado anteriormente:
<img NAME="IMG01" SRC="off.gif" WIDTH="8" HEIGHT="9"
BORDER="0"> <a
HREF="http://www.webexperto.com" target="_blank"
onMouseOver="imgover(IMG01)"
onMouseOut="imgout(IMG01)"><font face="Verdana"
size="2">WebExperto.com</font></a>
<img NAME="IMG02" SRC="off.gif" WIDTH="8" HEIGHT="9"
BORDER="0"> <a
HREF="http://www.tectimes.com" target="_blank"
onMouseOver="imgover(IMG02)"
onMouseOut="imgout(IMG02)"><font face="Verdana"
size="2">Tectimes.com</font></a>
<img NAME="IMG03" SRC="off.gif" WIDTH="8" HEIGHT="9"
BORDER="0"> <a
HREF="http://www.mrdevy.com" target="_blank"
onMouseOver="imgover(IMG03)"
onMouseOut="imgout(IMG03)"><font face="Verdana"
size="2">MrDevy.com</font></a>
off.gif: es una imagen transparente, se utiliza cuando el puntero no pasa por arriba del
link
IMG0X: es una identificación para
cada ID, si se encuentra duplicado en dos o más links tirará un error.
Como podrán notar, en los links se utilizan los eventos
onMouseOver y onMouseOut, y como resultado de ello se activa la función creada en el
JavaScript (ya sea imgover o imgout).
Código completo del ejemplo
<html>
<head>
<title>Efectos en imágenes pegadas a un texto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script LANGUAGE="JavaScript">
<!--
// (c) by Manfred Renner
IMG01 = "on.gif" //image when mouse is over the link
IMG02 = "off.gif" //image when mouse isn't over the link
function imgover(imgname){
imgname.src = IMG01
}
function imgout(imgname){
imgname.src = IMG02
}
//-->
</script>
</head>
<body>
<p><font face="Verdana" size="4" color="#0080C0">Efectos en imágenes pegadas a un texto</font></p>
<p align="justify"><font face="Verdana" size="2">Para entender mejor lo que vamos a
explicar, observen el ejemplo:</font></p>
<p align="justify"><img NAME="IMG01" SRC="off.gif" WIDTH="8" HEIGHT="9" BORDER="0"> <a
HREF="http://www.webexperto.com" target="_blank" onMouseOver="imgover(IMG01)"
onMouseOut="imgout(IMG01)"><font face="Verdana" size="2">WebExperto.com</font></a> <br>
<img NAME="IMG02" SRC="off.gif" WIDTH="8" HEIGHT="9" BORDER="0"> <a
HREF="http://www.tectimes.com" target="_blank" onMouseOver="imgover(IMG02)"
onMouseOut="imgout(IMG02)"><font face="Verdana" size="2">Tectimes.com</font></a><br>
<img NAME="IMG03" SRC="off.gif" WIDTH="8" HEIGHT="9" BORDER="0"> <a
HREF="http://www.mrdevy.com" target="_blank" onMouseOver="imgover(IMG03)"
onMouseOut="imgout(IMG03)"><font face="Verdana" size="2">MrDevy.com</font></a><br>
</p>
</body>
</html>
|
Del.icio.us
Digg
Technorati
