jesus.perezpaz.es

Cambiar entre dos imágenes al pasar el raton por encima con css

- 19 comentarios

Esto es una reedición de un post en mi otro blog (http://caosmental.com) donde subo fotos de mi gato y escribo sobre otras cosas, como por ejemplo mi otra pasión, la escritura :)  Como tiene muchas visitas he pensado que es mejor mantenerlo aquí junto con los demás recursos.

Este “efecto” lo conocerá ya mucha gente. Es muy simple de hacer y da mucho dinamismo a las páginas,  yo lo uso en casi todas las que hago.

Simplemente es hacer que cuando el ratón esté encima de una imagen esta cambie a otra, volviendo a la anterior cuando dejamos de tener el ratón encima.

Es muy útil para iluminar botones antes de presionarlos y llamar la atención sobre ellos. Un ejemplo se puede ver en los botones de la página principal de esta misma web.

No tenemos más que crear en nuestro CSS una etiqueta con el nombre que queramos y decir cual es la imagen y cuales sus medidas (imagen1.jpg):

Luego, tenemos que hacer otra etiqueta, en realidad la misma pero con el atributo :hover, que nos diga cual es la imagen que debe aparecer cuando el ratón esté encima (imagen2.jpg):

Luego no tendríamos más que llamar con un <div> (por ejemplo) a la etiqueta imagen.

El problema de esto es que hasta que carga, la imagen2 no aparece, por lo que aparece como un parpadeo. Para evitar esto podemos o bien precagar las imágenes antes, o usar el truco que voy a explicar ahora.

No hay más que unir las dos imágenes que queramos en una sola, por ejemplo la imagen1 a la izquierda y la imagen2 a la derecha, una detrás de otra y guardadas en la misma imagen (imagen1y2.jpg). Entonces en nuestra css ponemos lo siguiente:

Con esto le hemos dicho que el fondo es la imagen1y2.jpg, entonces empieza a poner la imagen de fondo desde la derecha, pero como le hemos puesto que la anchura del div (o lo que sea) es igual al de la imagen1, el resultado es que sólo parece ese “cacho” de la imagen que corresponde con la imagen1.

Al poner el ratón por encima le estamos diciendo que en vez de empezar a poner la imagen1y2.jpg desde la derecha (la imagen es la misma, por eso no hace falta poner url de fondo en la etiqueta, porque es la misma), la empiece a poner desde la izquierda y como su anchura es la misma que la de la imagen2, pues sólo aparece el “cacho” que corresponde con esta.

Lo bueno de esto es que, aunque no toda la imagen1y2.jpg se muestre en todo momento, si que se carga entera en el navegador, por lo que no vemos el molesto parpadeo y el efecto es instantáneo.

Ir a la portada → ← Volver artás

Comentarios

19 comentarios

  1. Omar says:

    Hola, gracias por toda esta información y espero puedas orientarme en una duda que tengo.
    Me gustaría saber como podría hacer que al pasar el cursos encina de una imagen de alguna entrada esta cambiara de color dependiendo de la categoría, que a cada categoría se le asignara un color distinta ( la plataforma que uso es WordPress y sinceramente no se mucho sobre esto, solo estoy tratando de abrir una pagina de música por mi amor a ella)

    Espero puedas ayudarme y gracias por adelantado, gran pagina :)

    • admin says:

      Hola Omar.

      La verdad que no entiendo muy bien que quieres hacer ¿Cambiar una imagen de color cuando pasas el raton por encima? La forma más fácil que se me ocurre es creando dos imágenes (una normal y otra con el filtro de color) y usar lo mismo que propongo aqui.
      De todas formas dime exactamente que es lo que quieres hacer y vemos a ver si te puedo echar una mano.

      Un saludo

  2. Omar says:

    Muchas gracias por la respuesta lo aprecio mucho.

    Es exactamente lo que quiero, pero quisiera que por ejemplo si al pasar el puntero en la imagen de una entrada de cierta categoría por ejemplo, CINE, que esta imagen cambie a un filtro de color, y si el puntero pasa por encina de la imagen de otra entrada perteneciente a la categoría de MÚSICA, haga lo mismo pero de diferente color, que se le asigne a cada sección o categoría un color especifico.

    No se si logro explicarme bien. Vi esta función en la siguiente pagina: http://www.culton.net/

    Espero puedas ayudarme y te estaré profundamente agradecido, gracias por tu tiempo.

    Saludos.

    • admin says:

      Hola Omar,

      En la página que mencionas lo hacen con javascript, pero se puede hacer sólo con css.

      He creado un ejemplo aquí: http://jesus.perezpaz.es/downloads/hover-color.zip

      Descárgalo y dime si lo puedes adaptar a tu página. Seguramente haga un tutorial en esta web con ese mismo código (para aprovechar que ya lo tengo hecho :) ) .

      Cualquier cosa me comentas.

      Un saludo.

  3. Omar says:

    Muchas gracias por la ayuda de verdad la aprecio, solo que no se como adaptarlo.

  4. Francisco says:

    Es exactamente lo que buscaba, PERO, necesito que esas imágenes sean un “Link” osea que permita hacer click y me lleve a otra pagina :c

    Alguna idea? aunque ya de antemano esta muy muy bueno !
    Muchas Gracias

    • admin says:

      Hola Francisco.

      No hay problema en hacer lo descrito en un enlace. Debería funcionar sin problema.

      Un saludo

    • David says:

      Super me sirvió mucho la idea gracias, y para los que quieren hacer que la imagen sea un link aqui les dejo el codigo

      #imagen {
      position: absolute;
      height: 200px;
      width: 200px;
      background:url(imagen1.jpg) no-repeat;
      }
      #imagen:hover {
      background:url(imagen2.jpg) no-repeat;
      }
      #imagen a {
      position: absolute;
      height: 200px;
      width: 200px;
      }

  5. antonio says:

    hola, que buena esta info! ya te digo gracias! yo cargo una duda yo usaba dreamweaver en sus inicios luego lo deje ahora lo retome, recuerdo que jugaba con el cambio de imagenes pero no la de rollover, era un cambio en donde si tenia una imagen en el menu al pasar el mouse cambiaba una imagen del contenido por ejemplo, es decir una imagen diferente, recuerdo lo podias hacer colocandole una capa azul de estas que te permiten darle links a las imagenes, luego en propiedades de esta capa buscabas mouse rollover y alli te pedi seleccionar que imagen querias cambiar entre todas las imagenes presentes en el sitio web.

    esta opcion ya no existe en dreamweaver cs5? =(

  6. paloma says:

    Hola! estoy haciendo una página web para la universidad y tiene que tener css , el caso es que el menú lo estoy haciendo con imágenes para poder ponerle una tipografía chula, y lo que he hecho es guardar esas imágenes en gris y luego en rojo. Quiero que al pasar por encima del gris pase al rojo, pero el menú es horizontal y está arriba fixed, tiene que ser enlaces y tienen que estar todos en la misma linea horizontal. No sé cómo hacerlo… por favor ojalá me ayudes antes de que acabe el día porque tengo que entregar esto hoy y es lo único que me falta!!

    un saludo y gracias!!!

    • admin says:

      Hola Paloma

      Quizá poner imágenes no es la mejor opción para lo que quieres hacer, pero bueno, viendo que no tienes mucho tiempo, si quieres, mándame un email a jesus @ perezpaz . es (quita los espacios) con el código de lo que estás haciendo para que sepa exactamente cual es el problema y te intento echar un cable.

      Un saludo

  7. Lalo says:

    Excelente información, gracias por compartirla con nosotros.

  8. Jose says:

    Hola!

    No entiendo muy bien cómo introducir la línea: “Could not embed GitHub Gist 5168920″ dentro del css para alternen las dos partes del archivo.

    ¿Así quizá?
    #imagen:hover {
    background: url(ruta_a_la_imagen/imagen2.jpg) no-repeat;
    height: (alto)px;
    width: (ancho)px;
    Could not embed GitHub Gist 5168920
    }

    • admin says:

      Hola Jose, no entiendo muy bien tu pregunta.

      Esa línea que dices no aparece en el CSS. Si aparece, por algún problema con el visor de código, no debes introducirla y todo debería funcionar bien.

      Un saludo

  9. Francisco Ponce says:

    Hola Jesús, muchas gracias por publicar este tutorial que me ha servido demasiado. Sin embargo quiero agregar links a estas imagenes y no me deja, ¿Cual es la forma correcta de hacerlo?

    • admin says:

      Hola Francisco.

      Puedes aplicar los CSS directamente en una etiqueta “a”, de esta forma tendrás un enlace.

  10. aitor says:

    Hola me gustaria hacer un menu con imagenes he creado una lista y tal pero quiero que cuando pulsemos a la imagen y nos vaya a la pagina que le toca en la pagina que se abre nueva salga el icono que hemos pulsado de otro color, como lo puedo hacer, no se si necesito javaascript o algo ya que ago esto en css
    #navigation a:active.inicio{background-position: -0px -36px; }

    utilizo una imagen sprite y no se me cambia no se si es porque no detecta que esta activo o algo estoy utilizando el tema wp-bootstrap de wordpress

    • admin says:

      Hola Aitor. La pseudoclase :active no te sirve para lo que quieres hacer. Prueba a meter una clase normal en el elemento que tiene que estar seleccionado (supongo que tendrás que hacer algún ipo de condicional con PHP si estás con wordpress) y a aplicar los estilos a esa clase.

  11. jessica says:

    hola buenas noches!!
    No se si alguien me pueda ayudar, tengo un menú de varias opciones, quiero que al momento de pasar el mouse por alguna de estas opciones me despliegue una imagen, pero sin que cambie de pagina web. Trabajo con html. Tengo entendido que se utilizar hovers. Gracias!

Dejar un comentario

Tu dirección de email no será publicada