Botones en movimiento. Rollover

Darle un aspecto más "profesional" a nuestro blog, es cuestión de pequeños detalles. Los botones y los enlaces con efectos son uno de estos detalles. Además, aplicar un estilo más sofisticado a estos elementos, permite descubrir más fácilmente qué imágenes son a la vez enlaces.

Lo que explicaremos a continuación, son algunas maneras de destacar nuestros botones con el efecto denominado ROLLOVER. Se trata de sustituir la imagen original por otra, al pasar el cursor por encima de ella. Con esto se consigue la sensación de que el botón se mueve.

---

Hay diversos sistemas de realzar un enlace, pero para las imágenes lo más fácil es utilizar los eventos ONMOUSEOVER y ONMOUSEOUT. El primero se ejecuta cuando se pasa el cursor por encima de la imagen y el segundo cuando se sale de ella.

Tenemos una primera opción que requiere crear dos imágenes. Cada una se verá con cada uno de los eventos descritos. El esquema general del código es el siguiente:

<a href="URLenlace" onmouseout="getElementById('IdentificadorUnico').src='URLimagenORIGINAL';" onmouseover="getElementById('IdentificadorUnico').src='URLimagenBIS';">
<img id="IdentificadorUnico" src="URLimagenORIGINAL"/>
</a>

Así, por ejemplo, utilizando este código con estas dos imágenes

podemos conseguir este efecto que simula un botón pulsado:

Una vez más, IdentificadorUnico es un número o conjunto de caracteres, igual para las tres apariciones en el anterior código, pero único con respecto a otro elemento que lleve un ID. Por ejemplo un segundo botón.

---

Hay otra opción jugando con la instrucción BACKGROUNDPOSITION. En este caso construiremos una sola imagen conteniendo los dos dibujos a alternar, uno arriba y otro abajo. Con dicho atributo y de nuevo con ONMOUSE, indicaremos si queremos mostrar la parte superior de la imagen o la inferior. El código general es este:

<a href="URLenlace"><div style="width:ANCHOimagen px; height:LAmitadDELaltoDElaIMAGEN px; background: transparent url(URLimagen) no-repeat left top;" onmouseover="this.style.backgroundPosition='right bottom';" onmouseout="this.style.backgroundPosition='left top';"></div></a>

Ahora necesitamos una sola imagen similar a las que se encuentran a ambos lados de este párrafo. Sólo hay que tener en cuenta que la parte superior tiene que tener las mismas dimensiones que la de abajo. En el código, además de colocar correctamente la dirección del enlace y la de la imagen, hay que indicar la anchura y la altura del blogque (DIV) que contendrá la imagen final. En este caso, usamos una imagen base de 50x100 pixels, pero como sólo queremos ver una parte de ella, habrá que dimensionar a 50x50 pixels usando WIDTH0=50px; y HEIGHT=50px; tal y como se veía antes. Importante también es poner correctamente si deseamos ver la parte superior (LEFT TOP) de la imagen o la inferior (RIGHT BOTTOM). El resultado si todo lo hacemos bien sería este:

---

Por último, veamos como conseguir un efecto rollover con CSS, para los enlaces de texto y por qué no, para las imágenes.

Tenemos que crear en nuestra plantilla una nueva clase Luego designaremos con esa clase el elemento sobre el que queremos conseguir el efecto. En la clase se definiría el aspecto normal y el que tendría el enlace al pasar el ratón por encima (HOVER). Sólo veremos como hacer para que cambie el color del texto y su fondo, aunque también se puede conseguir con el tamaño del texto u otros atributos.

Podemos colocarla en dos sitios: antes de ]]></b:skin> tal y como se muestra a continuación o antes de la etiqueta </head>. En este último caso, al código habrá que añadirle una primera línea <style type='text/css'> y una última </style>:

.rollover {
color: #000000;
background: ffffff;
}
.rollover:hover {
color: #ffffff;
background: #000000;
}

Ahora lo que tendremos que hacer para que el efecto funcione donde queramos, será añadir class="rollover" a la etiqueta donde esté el enlace a rollovear. Podría ponerse incluso en otros elementos que no fueran enlaces, como párrafos, bloques DIV, imágenes... En este último caso, salvo que tuvieran alguna parte transparente, no apreciariais diferencia. La segunda línea en cada ejemplo, está construida incluyendo ya la clase rollover:

<a href="URLenlace">TEXTO DEL ENLACE</a>
<a class="rollover" href="URLenlace">TEXTO DEL ENLACE</a>

<p>TEXTO</p>
<p class="rollover">TEXTO</p>

Simulación de como quedaría sobre una imagen gif con fondo transparente y colocando en HOVER un fondo amarillo.

Y ahora un truquillo para hacer un sencillo rollover sin necesidad de crear dos versiones de la misma imagen. En este caso vamos a jugar con la transparencia, lo que nos permitirá que de la sensacion de que la imagen se realza. Realmente lo que haremos, será asignar al estado normal de la clase ROLLOVER una opacidad del 100%. Sin embargo, al pasar el cursor por encima, la opacidad será del 80% y se verá con menor intensidad. También se podría hacer al revés, claro.

Podeis verlo actualmente en los botones de categoría al principio de cada entrada de este blog y en la imagen al final de este post. Con imágenes de tinta plana queda mejor y nos sirvirá para no tener que redactar tanto código cada vez que queramos conseguir realzar un enlace.

Se trata de incorporar una nueva clase en nuestra parte CSS y con la pseudo clase HOVER, conseguir la transparencia. Para ello hay que redactar un código como este y después incluir en las imágenes enlazadas, la clase ROLLOVER:

.rollover {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

.rollover:hover {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

.../...

<a href="URL_ENLACE"><img class="rollover" src="URL_IMAGEN"/></a>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter