Foros del Web » Creando para Internet » CSS »

¿OnMouseOver en Imagenes?

Estas en el tema de ¿OnMouseOver en Imagenes? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/02/2008, 17:04
Avatar de Carlmycol  
Fecha de Ingreso: diciembre-2007
Ubicación: Los Teques, Venezuela
Mensajes: 240
Antigüedad: 10 años
Puntos: 3
¿OnMouseOver en Imagenes?

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
  #2 (permalink)  
Antiguo 24/02/2008, 17:17
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: ¿OnMouseOver en Imagenes?

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
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 24/02/2008, 17:29
Avatar de Carlmycol  
Fecha de Ingreso: diciembre-2007
Ubicación: Los Teques, Venezuela
Mensajes: 240
Antigüedad: 10 años
Puntos: 3
Re: ¿OnMouseOver en Imagenes?

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

Salu2 y Gracias xD
  #4 (permalink)  
Antiguo 25/02/2008, 00:08
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: ¿OnMouseOver en Imagenes?

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 27/02/2008, 02:13
Avatar de rasmarko  
Fecha de Ingreso: noviembre-2002
Ubicación: México
Mensajes: 78
Antigüedad: 15 años
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
  #6 (permalink)  
Antiguo 27/02/2008, 02:20
Avatar de rasmarko  
Fecha de Ingreso: noviembre-2002
Ubicación: México
Mensajes: 78
Antigüedad: 15 años
Puntos: 1
Re: ¿OnMouseOver en Imagenes?

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!!! ^^
__________________
Fuentes - Diseweb - Frases Célebres
  #7 (permalink)  
Antiguo 27/02/2008, 02:23
Avatar de rasmarko  
Fecha de Ingreso: noviembre-2002
Ubicación: México
Mensajes: 78
Antigüedad: 15 años
Puntos: 1
Re: ¿OnMouseOver en Imagenes?

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.
__________________
Fuentes - Diseweb - Frases Célebres
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:02.