Foros del Web » Creando para Internet » HTML »

Onmouseover y Rollover texto e Imagenes.

Estas en el tema de Onmouseover y Rollover texto e Imagenes. en el foro de HTML en Foros del Web. Hola Saludos, Me gustaria saber como como hacer esto: tengo una imagen con texto que dice " hoteles " de color negro y otra igual ...
  #1 (permalink)  
Antiguo 03/06/2011, 11:14
 
Fecha de Ingreso: febrero-2007
Mensajes: 44
Antigüedad: 9 años, 10 meses
Puntos: 0
Pregunta Onmouseover y Rollover texto e Imagenes.

Hola Saludos,

Me gustaria saber como como hacer esto:

tengo una imagen con texto que dice "hoteles" de color negro y otra igual "hoteles"pero Amarilla como haria el efecto rollover y que demas aun lado me muestre una imagen de un Hotel. todo esto solo al pasar el mouse por encima . Gracias.

y que cambie a amarillo y muestre la imagen al pasar el mouse
Hotel
  #2 (permalink)  
Antiguo 03/06/2011, 11:25
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 14 años, 6 meses
Puntos: 361
Respuesta: Onmouseover y Rollover texto e Imagenes.

Hola:

Prueba con la pseudoclase hover.

Saludos.

  #3 (permalink)  
Antiguo 03/06/2011, 11:32
 
Fecha de Ingreso: febrero-2007
Mensajes: 44
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Onmouseover y Rollover texto e Imagenes.

En este caso como seria??
  #4 (permalink)  
Antiguo 04/06/2011, 08:41
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 7 meses
Puntos: 538
Respuesta: Onmouseover y Rollover texto e Imagenes.

las dos cosas con :hover como ya le indicó Jomaruro
Pero eso ya estaba dicho, si participo es para ampliar:
y el hotel en span oculto mostrado al :hover
  #5 (permalink)  
Antiguo 04/06/2011, 13:42
 
Fecha de Ingreso: febrero-2007
Mensajes: 44
Antigüedad: 9 años, 10 meses
Puntos: 0
Pregunta Respuesta: Onmouseover y Rollover texto e Imagenes.

Me podrian mostrar un codigo de ejemplo?

se los agradeceria !!
  #6 (permalink)  
Antiguo 04/06/2011, 14:33
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 7 meses
Puntos: 538
Respuesta: Onmouseover y Rollover texto e Imagenes.

Cita:
Iniciado por navaslord Ver Mensaje
Me podrian mostrar un codigo de ejemplo?

se los agradeceria !!
Pues no, no tengo a mano nada creado que pasarle.

Pero no tengo ninguna duda sobre que no le llevará más de 5 minutos encontrar alguno con ayuda de s. google.

Un buen sitio para comenzar la búsqueda puede que sea http://www.cssplay.co.uk/
  #7 (permalink)  
Antiguo 04/06/2011, 17:08
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 12 años, 8 meses
Puntos: 8
Respuesta: Onmouseover y Rollover texto e Imagenes.

El ejemplo:
Código CSS:
Ver original
  1. .rollover {
  2.             display: block;
  3.             width: 306px;
  4.             height: 350px;
  5.             background: url(http://quehotelreservo.es/files/2009/07/gran-hotel-almeria-exterior.jpg) no-repeat;
  6.         }
  7.        
  8.         .rollover:hover {
  9.             background: url(laotraimagen.jpg) no-repeat;
  10.         }
  11.        
  12.         .rollover span {
  13.             display: none;
  14.         }
Código HTML:
Ver original
  1. <a href="#" class="rollover"><span>Hotel</span></a>

Otra solución es que juntes las dos imágenes y que en el :hover sólo hagas un cambio en la propiedad background-position.

Espero te sirva de ayuda.
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #8 (permalink)  
Antiguo 07/06/2011, 12:58
 
Fecha de Ingreso: febrero-2007
Mensajes: 44
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Onmouseover y Rollover texto e Imagenes.

Cita:
Iniciado por braulito Ver Mensaje
El ejemplo:
Código CSS:
Ver original
  1. .rollover {
  2.             display: block;
  3.             width: 306px;
  4.             height: 350px;
  5.             background: url(http://quehotelreservo.es/files/2009/07/gran-hotel-almeria-exterior.jpg) no-repeat;
  6.         }
  7.        
  8.         .rollover:hover {
  9.             background: url(laotraimagen.jpg) no-repeat;
  10.         }
  11.        
  12.         .rollover span {
  13.             display: none;
  14.         }
Código HTML:
Ver original
  1. <a href="#" class="rollover"><span>Hotel</span></a>

Otra solución es que juntes las dos imágenes y que en el :hover sólo hagas un cambio en la propiedad background-position.

Espero te sirva de ayuda.
Hola muchas gracias,

mira el que me pusiste desaparece la imagen al pasar el mouse, y lo que necesito es que aparesca una imagen al pasar el mouse por sierto item ya sea texto o un link pero no que aparesca encima que me tape si no aun costado.

la idea es hacer un menu de sectores de comercio y que al pasar el mouse por un sector me muestre una imagen alusiva!

Etiquetas: imagenes, onmouseover, rollover
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 10:42.