Uno de los recursos más utilizados a la hora de diseñar una página web son los rollovers o imágenes de sustitución. Al colocar el cursor sobre un elemento (en este caso un link), cambian las propiedades de ese elemento. Se suele utilizar sobre todo a la hora de crear botones para menús. 

En este tutorial veremos un rollover muy sencillo, al poner el ratón sobre nuestro elemento de menú, éste cambiará de color. El fundamento de este recurso es que la imagen de fondo será de 100x100 píxeles pero tendrá una parte superior de 100x50 píxeles de color rojo y otra inferior de 100x50 de color azul. Nuestra área que contiene el link será de 100x50 y mediante el posicionamiento del fondo del área con CSS, lograremos el efecto deseado. Esta es la imagen de la que partiremos.

Hay otras maneras de conseguir este efecto mediante CSS, como por ejemplo tener una imagen para la opción normal y otra para la versión hover, pero esto implica que cada vez que se pone el cursor sobre el área tiene que cargar de nuevo la imagen de la versión hover, produciendo en conexiones o navegadores lentos un lag o retraso muy molesto. Con este recurso no tendremos ese efecto ya que al ser la misma imagen, se carga entera al principio y simplemente cambiará la posición del fondo. 

Antes que nada crearemos un div, dentro de él tres divs que serán los elementos de menú y dentro un link.

<div id="menu">

<div class="elementodemenu">

<a href="#">Enlace 1</a>

</div>

<div class="elementodemenu">

<a href="#">Enlace 2</a>

</div>

<div class="elementodemenu">

<a href="#">Enlace 3</a>

</div>

</div>

En nuestra hoja de estilos CSS definiremos el id y el class de nuestros elementos:

#menu { /* este estilo afecta a cualquier elemento que contenga el id 'menu' */

width: 100px; /*define el ancho del div que contiene el menu*/
margin-right: auto; /*junto con margin-left centra el div horizontalmente */
margin-left: auto; /*junto con margin-right centra el div horizontalmente */
height: 150px; /*define el alto del div que contiene el menu */

}

 

#menu .elementodemenu { /*este estilo afecta a cualquier elemento que contenga la class 'elementodemenu' y que este dentro de un elemento con el id 'menu' */
height: 50px; /*define el alto del div que contiene el elementodemenu */
width: 100px; /*define el ancho del div que contiene el elementodemenu  */
border: #FFF 1px solid; /*aplica un borde superior, inferior, a derecha y a izquierda, de un pixel de ancho y de estilo solido al div */
text-align:center; /* alinea el texto con respecto al div que lo contiene */
line-height:4; /*define un interlineado que hace que el texto se alinee verticalmente, sin unidades */
}

 

 

#menu .elementodemenu a { /*este estilo afecta a cualquier enlace que se encuentre dentro de un elemento con la class 'elementodemenu', que se encuentre dentro de un elemento con el id 'menu' */

background: url(rojoazulvacio.jpg); /*define la ruta donde se encuentra la imagen de fondo */
display: block; /*hace que el enlace sea un bloque para que ocupe todo el espacio del elemento que lo contiene (en este caso 'elementodemenu') cuando le demos el ancho y alto correspondiente */
width: 100%; /*define el ancho del bloque que hemos detallado con la propiedad anterior, como queremos que lo ocupe todo, es del 100%*/

height: 100%; /*define el alto del bloque que hemos detallado con la propiedad anterior, como queremos que lo ocupe todo, es del 100%*/
text-decoration:none; /*elimina la decoración por defecto que contienen los enlaces en cualquier página web */ 
color:#FFF; /*elimina el color por defecto que tienen los enlaces en cualquier página web y le da un color blanco */

}

 

#menu .elementodemenu a:hover { /*este estilo afecta a cualquier enlace que se encuentre dentro de un elemento con la class 'elementodemenu', que se encuentre dentro de un elemento con el id 'menu', y sobre el que se ha puesto el cursor. Mantiene las propiedades del estilo anterior (#menu .elementodemenu a) a no ser que se diga lo contrario */

background-position: 0 -50px; /* define la posición horizontal del fondo '0' y vertical '-50px', de esta forma sacamos el color azul que se encuentra 'debajo' de nuestra imagen */
text-decoration:underline; /* cancelamos la propiedad text-decoration:none del estilo anterior y aplicamos un subrayado */
font-weight:bold; /* hace que el texto adquiera la propiedad 'bold' (negrita) */

}

Con esto ya tendríamos hecho nuestro menú con el efecto rollover que quedaría de la siguiente manera

Cualquier sugerencia o comentario como siempre son bienvenidos.