JMiur [E]

Esta técnica par reemplazar imágenes utilizando CSS es una ocurrencia de Mike’s Experiments y es interesante porque permite generar efectos rollover de forma eficaz, precargando las imágenes lo cual hace que el reemplazo de una por otra sea rápido.

El código CSS (en este caso, aplicado a un encabezado) es el siguiente:
h2.demoIR a {
background-color: #000;
border: 4px solid #333;
display: block;
height: valorpx; /* la altura de la imagen */
margin: 0 auto;
width: valorpx; /* el ancho de la imagen */
}
h2.demoIR a:hover, h2.demoIR a:focus, h2.demoIR a:active {
background: #000 url(URL_imagen2) no-repeat 50% 50%;
border: 4px solid #555;
}
h2.demoIR a:hover img, h2.demoIR a:focus img, h2.demoIR a:active img {
background: transparent;
visibility: hidden;
}
Y lo usamos de esta manera:
<a href="#">
<img alt="tex" src="URL_imagen1" width="ancho" height="alto" />
</a>

Embedded Image Replacement

20 comentarios:

TRECARUNGA  

Ja ja, muy bueno JMiur ;)

Responder
Ariane  

eu sou a rainha da 'gambiarra' mesmo :P ...pois fiz isso no meu blog (menu) da maneira mais doida que você possa imaginar! obrigada pela dica, abraços!

Responder
Σ=o) Pau  

Me encanta!!!!!!!!!! ^_^ es un efecto muy mono ;) y si dices que es rápido, mejor aún ^_^

besos ronroneados

Responder
Javier Cercas Rueda  

Hola JMiur, acudo a ti "enviado" por Rosa (la del Escaparate). Una pregunta off topic:

He comprado www.pasenylean.com y, en la página que me da el dominio, he redireccionado esa dirección a http://javiercercas.blogspot.com. Funciona bien pero he perdido el FAVICON de la izquierda en la barra del buscador.

Además de lo del FAVICON, quería preguntarte:
¿debo "informar de esto" en la configuración de mi blog en blogger? (he comprado sólo el dominio, no hosting) ¿para qué?

¿Qué pasa ahora con mi PageRank?

Creo que la antigua dirección sigue existiendo (¿deja de hacerlo con lo de configuración\publicación\dominio personalizado...?) ¿Me interesa mantener las dos?

He buscado respuesta a todo esto por ahí pero no me aclaro.

Un saludo.

Responder
Graciela  

jajaja estoy medio dormida aún por el calor reinante jajaja digo qué nos quieres contar...MUY MONO:P...besos!!!

Responder
ZonZo  

:S Perdón por mi ignorancia, ya que llevo poco en esto, pero ¿en qué ocasiones se utiliza esta "monada"? Es decir, ¿cuál es la funcionalidad de este experimento?

Responder
Diego  

ZonZo: botones, banners, etc... más allá de poder utilizarlo en casi cualquier elemento para darle un toque más estetico y llamativo.

Jmiur: Funciona con IE?


Saludos

Responder
Espineli  

Muy bueno este post, por cierto Jmiur te he pillao prestadas las imagenes del monito para un post sobre rollover con imagenes. Espero no te enfades, si eso las cambio :X

Salu+2!

Responder
[ :: WwW.FloWKaletA.CoM :: ]  

hola, y muxas gracias x la ayuda k me aces en mis preguntas y se k no vienen al caso con cada post y disculpa x eso.
Estoy dias me encuentro en un problema weno almenos yo lo creo asi... tenog un blog y lo eh rediccionaro a un domino .COM, ahora bine aki empeso mi calvario y peudas ayudarme a salir de el xfa.
El problema es ocn el rediccionamiento, como ago para k cuando escriba MIPAGINA.COM sin "WWW" se redericcione a WWW.MIPAGINA.COM....
se k se tiene k modificar el .htaccess con un codigo pero DONDE ESTA ESA OPCION?? EN K PARTE DE MI DOMINIO PEUDO MODIFICAR EL .htaccess o ay otra manera de acerlo???
porfavor necesito alguna ayuda compre el domingo en go daddy pero sin hosting solo dominio y no se donde entrar o los apsos a seguir para modificar el .htaccess.
Se k es una pregunta muy larga y espeor puedas y tngas las ganas de ayudarme y gracias x poder recurrir a ti.

Responder
JMiur  

Si, Graciela. Este es un post muy mono :D

Espineli: Todo suyo. Vaya uno a saber de donde lo saqué. Juro que no soy yo :D

Hasta donde ví, funciona en IE7, Diego.

Zonzo: Sólo son técnicas. Herramientas. Cada uno las usa como se le ocurre.

Javier: El favicon no se ve porque no hay. El favicon es de la página en si misma y www.pasenylean.com no lo tiene. Lo que ves, es un FRAME donde se muestra el contenido de otro sitio, en este caso, tu blog.

¿Cómo influye en el PR? Son dos sitios distintos y tienen PR diferentes e indexaciones diferentes. Distinto sería el caso de hacer el cambio via Configuración | Publicación y establecer un dominio propio. Fíjate en este post de SpamLoco para más detalles. Esa es la solución razonable.

WwW.FloWKaletA.CoM: No hay un htaccess a menos que tengas un hosting. Fíjate en el mismo post de SpamLoco.

Responder
Javier Cercas Rueda  

Muchas gracias por tu ayuda. Me pongo a ello, a ver si lo consigo.

Responder
Gem@  

El problema que yo veo es la necesidad de utilizar varios estilos si queremos añadir más de una imagen ya que la imagen hover se añade a los estilos.
De todas formas como recurso está muy bien y mejor el efecto conseguido por ti con esas dos imágenes.

Responder
JMiur  

Sí, Gem@. Creo que es verdad.

A mi juicio, la mejor solución y la que normalmente uso es esta ya que sólo se usa una imagen. Veremos de reflotar el post :D

Responder
LuzdeLuna  

jaja un mono piola!!:D
JMiur, tengo otro problemita :O jeje cuando no!?
bue, es que en IE el color y la imágen de fondo del outer-wrapper no se ven. Tampoco el fondo de los títulos de la sidebar y el buscador(esto de hace tiempo).
Pensé que era porque las imágenes estaban en blogger, pero las de imageshack tampoco las muestra, esto porqué será?? Estaré haciendo los códigos mal??
Un abrazo

Responder
JMiur  

Luz:
En los tres hay un mismo error en la propeidad background. Por ejemplo en outer-wrapper:

background: #000000 url(xxxxxxx.jpg)no-repeat fixed center top;

falta un espacio entre el cierre de url() y no-repeat

Lo mismo en los otros dos:

002.jpg)bottom left repeat-x;
2965fd9.gif)repeat;

falta el espacio entre el cierre del paréntesis y la siguiente palabra.

Responder
LuzdeLuna  

Naaaa no podés JMiur!!mirá que revisé mil veces y no le veía el error!!!!! :D
Todo bien ahora! Sos mi ángel de la guarda JMiur! :P
un abrazote

Responder
JMiur  

No fue sencillo. Necesité una lupa para encontrar eso :D

Responder
ZonZo  

Ok, chicos, gracias por la información!!

Responder
Retro Icon  

Hola Jmiur!
Me gustaría saber por qué si la extennción total de mi main wrapper es arriba de los 600px, por que al colocar una imagen cn esa dimensión dicha imagen se reduce mas o menos a 400px cuando veo la entrada. Al subir la imagen elijo "Grande"...pero no aparece en tamaño real.

Responder
JMiur  

Porque ese es el máximo admitido cuando subes las imágenes a Blogger a menos que cambies el código HTML que se genera. Mira en esta entrada.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR