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>

Deja un comentario