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

Responder a Anónimo Cancelar respuesta

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