Ver Mensaje Individual
  #5 (permalink)  
Antiguo 27/02/2008, 02:13
Avatar de rasmarko
rasmarko
 
Fecha de Ingreso: noviembre-2002
Ubicación: México
Mensajes: 78
Antigüedad: 21 años, 4 meses
Puntos: 1
Re: ¿OnMouseOver en Imagenes?

Yo propondría lo siguiente que es también de uso común:

1. Crear una imagen vacía de 1x1 y transparente llamada x.gif
2. Agregar la siguiente class de nuestro enlace en CSS:

Código HTML:
 a.mienlace {
display: block;

//Aquí pondremos nuestra imagen previa al mouse over:
background: url(imagenes/imagen01.gif) no-repeat;

// Asignar los tamaños de nuestra imagen que tendra el evento:
 width: 200px; 
height: 100px;

}

a.mienlace:hover {

// Aquí pondremos la segunda imagen que queramos que aparezca
background: url(imagenes/imagen02.gif) no-repeat;

}
3. Insertamos nuestra imagen vacía junto con algún enlace que tendrá la class .mienlace, de este modo:

Código HTML:
<a href="http://www.diseweb.com.mx" class="mienlace">
<img src="imagenes/x.gif" width="200" height="100"  alt="Descripción"/>
</a> 
Es necesario que agreguemos en el HTML los atributos width y height de nuestra imagen. Además el display: block de la class .mienlace, también es necesario. También la transparencia de nuestra imagen vacía 1x1 es indispensable.
__________________
Fuentes - Diseweb - Frases Célebres