Imágenes de sustitución (Rollover) en WordPress

Cuando estaba montando este blog me encontré con la necesidad de añadir imágenes de sustitución o rollover; para el que desconozca el término, son esas imágenes que cuando pasas el ratón por encima cambian, como en el siguiente ejemplo:

 

 

Como suele ser habitual, existe un plugin que nos resuelve el problema de forma sencilla. El que he elegido es Image Mouseover. Su uso básico es muy sencillo. Primero subimos las dos imágenes al servidor (en el ejemplo cadena1.jpg y cadena2,jpg), pero en nuestra entrada sólo añadimos la primera. El código HTML que genera es algo similar al siguiente:

<img class="aligncenter size-full wp-image-332" src="http://apuntsemav.es/wp-content/uploads/2011/08/cadena11.jpg" 
alt="" width="425" height="120" />

Deberemos modificar manualmente el código, añadiendo a la class mouseover, además de indicar el nombre de la segunda imagen con la marca oversrc. El código quedará así:

<img class="aligncenter size-full wp-image-332 mouseover" src="http://apuntsemav.es/wp-content/uploads/2011/08/cadena11.jpg" 
alt="" width="425" height="120" oversrc="http://apuntsemav.es/wp-content/uploads/2011/08/cadena21.jpg" />

De esta sencilla forma ya tenemos implementadas las imágenes rollover dentro nuestro blog

4 Responses to Imágenes de sustitución (Rollover) en WordPress

  1. jessica servin dice:

    hola
    yo he querido hacer algo parecido en wordpress y la verdad es que no se utilizarlo muy bien por que soy una novata en el software. Me encargaron aprender a manejarlo, y quieren algo asi como……una imagen que diga:
    QUIENES SOMOS……….. Y AL PASAR EL CURSOR POR ENSIMA, SE DESPLIEGA EL TEXTO QUE DICE: somos el instituto de certificación, shalala shalala…….estoy muy desesperada porque es para una fecha espedcifica y aun no llevo avances, alguien podria explicarme como hacerle, tengan en cuenta que soy principiante
    POR FAVOR, SE LOS AGRADEZCO DE ANTEMANO.

  2. jordiaguilera dice:

    Hola Jessica,

    instala el plugin que se indica en este post y sigue los pasos, es muy fácil. Lo primero que tienes que hacer, evidentemente, es crear las dos imágenes que comentas.

    Suerte!!

  3. Manuel dice:

    Buenas.

    He hecho todo lo indicado, instale el plugin, hice el código.

    Explico.

    Mientras estoy logueado como admin y veo los cambios, me funciona el efecto mouseover.

    Pero cuando cierro sesión y miro la pagina sin estar logueado. No funciona el efecto, es algo extraño.

    ¿Me ayudan?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *