Imágenes que cambian al pasar sobre ellas el cursor

Muy útil a todos los niveles en el diseño de tu blog, con efectos espectaculares. Solo pasa el cursor sobre estas dos imágenes... sin pinchar en ellas.

prueba rollover

prueba rollover

Con esto tenemos unas posibilidades enormes en el diseño de los blogs, con unos efectos muy fáciles de realizar.
Leer completo...[+/-]

Pincha ahora sobre las imágenes, y esto te dará una idea del fundamento de este "truco".

Lo que hacemos con esto es un "falso" rollover, engañamos a la vista para conseguir ese efecto. Lo primero es hacer una imagen del tipo que habéis visto en los dos ejemplos, en el primer caso es de 300 x 37 px. Lo que hace este falso rollover es desplazar la imagen 150 px hacia la izquierda cuando se posiciona el cursor sobre ella, así el efecto es igual que un rollover verdadero, pero sin utilizar javascript.
Para ello añadiremos en la plantilla general del blog, que vemos en "Plantilla/Edición HTML", este código (Al final de los "links", que suele estar muy al principio de la plantilla):

a {outline: none;}
.rollover {
display: block;
width: 150px;
height: 37px;
background: url(http://blogsmadeinspain.googlepages.com/botonrollover_morado.png) no-repeat;
text-indent: -9999px;
}
a.rollover:link, a.rollover:visited, a.rollover:active {
background: url(http://blogsmadeinspain.googlepages.com/botonrollover_morado.png) no-repeat;
}
a.rollover:hover {
background-position: -150px;
}

Lo que está en color rojo es lo que debemos cambiar y adaptar a nuestro blog. Por una parte se coloca dos veces la URL o dirección donde tengáis alojada la imágen, también se indica la dimensión de la imagen en pixeles (width = en este caso es la mitad del ancho de la imagen, height= altura de la imagen), muy importante que la anchura de la imagen siempre tenga un numero par de pixeles. En la última línea de código se coloca la mitad exacta de la anchura de la imagen completa, igual a la que se ha colocado en la línea de más arriba.
Y por último, el término rollover, que se repite en cinco ocasiones, lo cambiáis por cualquier nombre. Este nombre lo que hace es denominar a este efecto. (Si váis a usarlo en más de una ocasión dentro del mismo blog, no estaría mal denominarlo por ej. rollover01, rollover02, rollover03...etc.), ya que para cada imagen que queráis usar este efecto tenéis que pegar todas estas líneas de código cambiando el nombre que le dáis, además, claro está, del resto de términos en color rojo, adaptándolos a cada imagen que usemos.

Ya solo queda el pequeño código que colocaremos en cada elemento que queramos usar esto (como elemento html en el sidebar, dentro del post, o en el lugar que eligamos):

<a href="http://www.catastro.minhac.es/" target="blank" class="rollover" title="Rollover con CSS">prueba rollover</a>

Si vosotros no queréis que al pulsar la imagen enlace con algo, quitarle [href="URL de enlace" target="blank"], y listo. De nuevo aquí aparece el nombre que halláis colocado en la plantilla general para este efecto, de ahí lo importante de usar los códigos en la plantilla general cada vez que quiera usarse con una imagen diferente, y dándole un nombre también diferente.