Como hacer que la imagen resalte al pasar el puntero - Java y Javascript

Caos.X
@man / @woman

Mensajes: 3.199
Desde: 06/Sep/2003

RE: Como hacer que la imagen resalte al pasar el puntero

Son botones hechos con rollovers de dos estados. En un estado el botón esta normal y en el segundo estado la imagen del botón tiene el efecto de brillo y se acciona con el evento OnMouseOver.

El codigo es este, a ver si me explico:

- Paso 1 -
Entre el <head> y el </head> del sitio vas a poner la siguiente funcion Javascript:

<SCRIPT languaje="JavaScript">
function mueveimg(img_name,img_src)
{
document[img_name].src=img_src;
}
</SCRIPT>

- Paso 2 -
Cada imagen que quieras que cambie cuando pase el mouse deberas agregarle un parametro name="nombre de la imagen" donde podras ponerle un nombre cualquiera a la imagen (no necesariamente el del archivo) pero que no se repitan.

- Paso 3 -
Vas a poner como ligas los botones que es donde quieres que al pasar el mouse cambie la imagen con el siguiente formato:

<a href="#" onmouseover="mueveimg('nombre que le diste a la imagen','URL de la imagen CON el mouse encima');return true;" onmouseout= "mueveimg('nombre que le diste a la imagen','URL de la imagen SIN el mouse encima');return true;"><img name="nombre que le diste a la imagen" border="0" src="URL de la imagen SIN el mouse encima"></a>

(poco lioso )

Consideraciones:
- En la liga "nombre que le diste a la imagen" debe ser exactamente el mismo del parametro name="nombre de la imagen"

- Debes tener cuidado con las URL de las dos imagenes (con y sin mouse)

CASO PRACTICO


<head>
<SCRIPT languaje="JavaScript">
function mueveimg(img_name,img_src)
{
document[img_name].src=img_src;
}
</SCRIPT>
</head>

<body>



<a href="#" onmouseover="mueveimg('MiImagen','MiImagenOn.gif');return true;" onmouseout= "mueveimg('MiImagen','MiImagenOff.gif');return true;"><img name="MiImagen" border="0" src="MiImagenOff.gif" width="80" height="80"></a>

</body>