Imágenes que cambian al pasar sobre ellas el cursor | blogsmadeinspain

Aquí encontrarás plantillas para Blogger diseñadas por mí totalmente gratuitas, conocerás como se manipulan imágenes, fondos, texto, enlaces o links, los mejores widgets o gadgets, herramientas y utilidades, etc... Y además puedo diseñarte una plantilla exclusiva para tí, totalmente a tu gusto, y solo por 38 Euros.

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.




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.

16 comentarios:

La Blogueria dijo...

¡Antonio! el diseño de tu blog, ¡me encanta! no sé cómo decirte, estoy emocionada y entusiasmada... ¡me encanta me encanta me encanta! bueno espero que eso, aunque malamente, lo exprese...

Pero le falta una cosa importante: ¡Un banner para enlazarte ya mismo!
mira ESTO.

¡Abrazos, con toda sinceridad te digo, que me gusta horrores! ¡Felicidades!

La Blogueria dijo...

Lo veo perfectamente...el problema suele ser al revés: como IE se pasa los estándares web por el forro (vamos, que se niega a interpretar correctamente el lenguaje estandard), hay ciertas cosas que plantean dificultaes..pero esta todo bien, solo ten ojo, cuando vayas a aplicar ciertos efectos, que sólo IE los verá, y te aseguro que el futuro es CUALQUIER EXPLORADOR menos ése...a menos que se renueve y se integre en el panorama del diseño web, aceptando las normas que se impusieron, cual gramática, para entendernos... Siempre puedes ver cómo se ve en otros navegadores AQUI. Yo hace mucho que no reviso mi blog en IE porque me muestra autenticos horrores que no puedo ni mirar....

Marian dijo...

A que os referís con lo de revisar el blog, no entiendo mucho de esto. Es recomendable hacerlo?
Gracias de antemano.

Blogsmadeinspain dijo...

Marian, a lo que se refiere "la bloguería" es a ver tu blog en otros navegadores (probablemente tú estés usando Internet Explorer, que es el más usado), ya que puede que haya configuraciones, efectos, animaciones, u otros temas que no se vean bien en otros navegadores. Ella deja un enlace en el comentario para simular cómo se vería tu blog en otros navegadores. De todas formas comentarte que con mucha diferencia los más usados son Internet Explorer y Firefox, según creo.

Marian dijo...

Gracias por la aclaración, soy novata en lo del blog y muchas expresiones blogueras se me escapan.
Yo utilizo como bien dices internet explorer, si hiciera esa simulación según veo en el enlace, debo marcar con una x en cualquiera de los navegadores del listado, pero pregunto, ¿esto solo es simulado, quiero decir, después de hacerlo no se me queda cambiado el navegador?
Gracias.

Blogsmadeinspain dijo...

No te preocupes, Marian, el enlace que ha dejado "La Bloguería" solo te hace unas capturas de tu blog, simulando cómo se verían en otros navegadores. No te cambiará nada de tus configuraciones.

Marian dijo...

Muchas gracias. Tengo mucho que aprender, con tu permiso vendré por aqui a pedir ayuda.

Terelu dijo...

Estoy preparando un blog y tengo alguna duda que tal vez me podais aclarar:
1 me gustaría que la sidebar (creo que se llama asi) estuviese situada más a la dcha. y si no es posible cambiar esto, entonces quisiera alinearla a la derecha para que lo pongo no se acerque tanto al post.
2 Me gustaría también crear secciones para diferenciar temas en dicho blog, me gusta mucho el sistema que teneis vosotros con esos botones que aparecen y desaparecen. Es lo que yo quisiera hacer.

Si decidís ayudarme, por favor hacerlo de manera muy muy fácil (para novatos)ya que no entiendo casi nada del lenguaje HTML
Gracias y os felicito por vuestro blog, por los contenidos y por el diseño.

Blogsmadeinspain dijo...

Terelu, antes que nada darte las gracias por tus felicitaciones.
respecto a tu primer punto comentarte que de una plantilla pueden modificarse todos sus aspectos, y la mayoría de una manera muy fácil.
Respecto a tu segundo punto, te dejo esta dirección:

http://blogsmadeinspainprueba.googlepages.com/sueo_azul.jpg

Es una plantilla que tengo casi preparada para subirla a mi blog, me faltan un par de días. Esta plantilla usa un sistema de botones parecidos a los de mi blog, que parecen iluminarse cuando se pasa sobre ellos.
No sé si te gustará o se adaptará a la idea de tu blog.

Nota: En la plantilla aparecen inicialmente cuatro botones, pero es fácil aumentar o disminuir ese número.

Saludos

Terelu dijo...

Gracias por la plantilla, voy a mirarla y espero no tener problemas para editarla, soy bastante torpe en esto.
saludos

Blogsmadeinspain dijo...

Terelu, lo que te he dejado no es más que una captura de la pantalla, una imagen para que vieras el aspecto general que tendrá la plantilla. Como te comento creo que mañana o pasado podré terminarla.

Terelu dijo...

¡¡Ahhh!!, ves como soy muy torpe? jejeje, y se supone que soy "la lista de la cuadrilla", ya que este blog que estoy preparando no es para mi sino que es para mi amiga terelu, yo soy Marian, aparece con su nombre porque es así como quedará en el futuro.
Bueno, pues esperaré a que publiques la plantilla, y lo dicho que las explicaciones sean aptas para torpes. Muchas gracias.
Un saludo
Marian

Fabiana dijo...

Millón de gracias por tus plantilas. Adopté una de ellas para mi blog. Aunque no poseo conocimientos html o css me encanta meter dedo, jeje, por supuesto eres bienvenido a mi blog, quedaría muy honrada, aunque nuevito y humilde es de corazón grande. Espero te gusten las minúsculas modificaciones que le hice a tu plantilla.

Mafalda dijo...

Mil y mil gracias por tus plantillas, yo he tomado una de ellas para mi blog y ha causado gran sensación entre mis visitantes.
Quería pedirte el favor que me enseñes como hago para colocar en mi sidebar, algo parecido a lo que tu hiciste con "blogs Amigos" y "Agradecimientos", me gusta que es compacto y van pasando los datos. Gracias y abrazos desde colombia.

JUNNIOR01 dijo...

HOLA ME PUEDE DECIR COMO PONER EL NUMERO DE LECTORES QUE ESTAN SUSCRITO A MI BLOG EN FEEDBURNER

Blogsmadeinspain dijo...

Junnior01, es una opción que da feedburner, creo que está dentro de "publicize", y se llama "FeedCount", ahí te dan los códigos que debes pegar en tu sidebar como "Elemento HTML/Javascript".