¿OnMouseOver en Imagenes?

Carlmycol · #1 (**permalink**) 24/02/2008, 17:04

He oido que se puede... (una imagen que cuando se le Pone el mouse ensima... se cambia a otra imagen... Ahora como lo hago?...

xD Salu2 y Gracias

hades87 · #2 (**permalink**) 24/02/2008, 17:17

a parte de que esto iría la tema de javascript, aquí te dejo un enlace que te peuda interesar.

http://www.desarrolloweb.com/articulos/2.php

Carlmycol · #3 (**permalink**) 24/02/2008, 17:29

Muchas Gracias Hades! Ya he hecho mi rollover para hacer parte de mi barra de navegacion. Te lo agradesco Mucho...

Salu2 y Gracias xD

caricatos · #4 (**permalink**) 25/02/2008, 00:08

Hola:

He visto el artículo por encima, y me parece absurdo usar el evento del enlace contenedor pudiendo usar directamente el de la propia imagen.
Ese tipo de rollover depende de javascript, pero con unas simples líneas consigues lo mismo solo con css...

Código:

<html>
<head>
<title>
	http://www.caricatos.net/probador
</title>
<style>
#oculto {
 padding: 0;
 margin: 0;
 left: 0;
 top: 0;
 width: 32px;
 height: 32px;
 background: transparent url(../dibujos/_grid.gif) no-repeat center center;
 position: relative;
}
#visible {
 padding: 0;
 margin: 0;
 top: 0;
 left: 0;
 width: 32px;
 height: 32px;
 background: transparent url(../dibujos/miemoticon.gif) no-repeat center center;
 position: absolute;
 
}
#enlace {
 position: relative;
}
#enlace:hover #visible {
 visibility: hidden;
}
</style>
</head>
<body>
<a id="enlace" href="javascript: alert('Ok')">
<span id="oculto" ></span>
<span id="visible" ></span>
</a>
</body>
</html>

Y con javascript, hay otras formas: Rollover: otra forma de conseguir este efecto

Saludos

rasmarko · #5 (**permalink**) 27/02/2008, 02:13

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.

rasmarko · #6 (**permalink**) 27/02/2008, 02:20

Ufff, ahora que veo las soluciones en javascript me parecen harto engorrosas. En lo personal yo he usado la propuesta que les acabo de postear y no me he complicado con códigos complejos y largos. Creo que CSS tiene muchas ventajas como uso único.

Saludos a todos, mucha suerte!!! ^^

rasmarko · #7 (**permalink**) 27/02/2008, 02:23

Por cierto que la solución CSS de caricatos no funciona en Internet Explorer, porque como bien sabrán el evento "hover" Internet Explorer sólo lo reconoce en etiquetas <a>, pero no en otras como <div>, <td>, etc.