57

Efecto Rollover para tus imagenes online

Generador
En unos minutos conseguiremos un bonito efecto rollover (la imagen cambia por otra cuando el ratón pasa por encima) para nuestras imágenes.

[1] Hemos de tener las dos imágenes del mismo tamaño subidas a un alojamiento de archivos, ya que necesitaremos sus direcciones (url).

[2] Accedemos a la página del generador en Creating online, pinchamos sobre el logo de la llave (open generator) y completamos los campos.

[3] En el primer campo hemos de colocar el enlace al que llevará nuestra imagen (opcional). En el segundo, la url de la imagen que se mostrará antes de pasar el ratón por encima, y en el tercero la imagen que veremos al pasar el ratón sobre la anterior. Fijaros que en todos los campos tenemos que ingresar las urls sin http://.

[4] Pinchamos en "Generate My Code", copiamos el código resultante y lo pegamos donde vamos a mostrar el efecto, una entrada o la sidebar, funciona en ambas sin problemas.
Tendremos en cuenta que el código no puede usarse más de una vez, es decir, no podemos pegar uno en la sidebar, y el mismo en una entrada, porque no funcionarían, pero si podemos volver a hacerlo cuantas veces queramos con distintas imágenes, he incluso usando las mismas pero con distinta url (volviendo a re-alojarlas).

Ejemplo:

Entradas Relacionadas:

57 comentarios:


LordVader

Es un efecto bonito, a ver si veo donde aplicarlo, gracias.

Lss Rutas de Angelica

Hola amiga, pasando a saludarte y desearte un resto de semana feliz. Este efecto me encanta voy a ver donde aplicarlo en alguna de mis entradas y están muy lindos los monstricos de abajo ese me gusto, y es una iniciativa muy buena porque es cierto los blogs se alimentan de los comentarios así como de las visitas. Besos amiga y un gran abrazo.

Anónimo

¡Precioso!

Anónimo

Desesperada, a mi también me lo parece, y sencillo.

Anónimo

Muy interesante y creo que lo voy a aplicar.
Por cierto, quiero hacerte una pregunta no muy relacionada con el contenido de este post.
No sé si me puedas dar el enlace de algún post que hayas escrito sobre cómo hacer para que cada parte del blog esté en un recuadrito diferente ?

Saludos.

Anónimo

¡Me ha encantado tu blog! Hay trucos geniales que estaba necesitando: tienes tantos recursos. Felicidades y gracias. Te agregué a mi círculo de blogs recomendados. :)

Sin más que decir,
¡Me despido!

Anónimo

Buenas Rosa, eee te quería comentar que no se hacer una cosa en mi blog y haber si tu me podrías ayudar, ya he puesto una "imagen fija" y ahora me gustaría saber si en blogger puedo ponerle a mi imagen de la esquina el "Subir Arriba" que no tengo ni idea de como se hace. Gracias.

Anónimo

Hola Rosa:
Gracias a tu blog he podido hacer el mío, pero acabo de atascarme. Quisiera poner la nube de etiquetas como tú, pero me sale pequeñita, arriba pero no extendida como tu; es decir no ocupa todo lo ancho del blog.¿Como podría solucionarlo?.

Eulalia

Hola Rosa: Te he dejado un regalito en Tuneando.
Un abrazo.

Anónimo

Anónimo, la nube se expande ocupando el espacio donde la colocas, tal vez la has puesto sobre las entradas y no debajo de la cabecera...
Por cierto, la próxima vez deja un enlace a tu blog, por favor.

Anónimo

Eulalia, voy pa yaaaaaa!!!! :-)

Anónimo

Fernandooo1, ¡Gracias!!

Anónimo

Anónimo, mira aquí para "enmarcar" los elementos del blog:
Enmarcando

Por favor, la próxima vez deja un enlace a tu blog.

Anónimo

Espineli, has de colocarlo así

<a href="#"><img src='Url_de_la_imagen'/></a>

Agustín Gonzalez C.

hola!!!!! Felicitaciones por el blog!!

Re lindo todo!,,

y muy necesario!!

Congratulation!

queria saber algo mas de blogger...
que se me comlica hacerlo..

te pediria si me podes ayudar para hacer "javascript:fetchLatestPosts"
en mi blog...
es muy complcado me dijeron..no se bien como funciona pero se que sirve para importar entradas sin salir del blog,, utilizando un link para ello..

Bueno..desde ya muchas gracias..
mi mail es acamerced@hotmail.com

Anónimo

Pues que pena no me sale, lo he probado de todas las maneras y nada, de todas formas me guardo el código que me has dado en un bloc de notas y seguiré intentandolo, gracias.

Anónimo

Espineli, quizás tienes el código de otra manera y no "aciertas" a colocar el link. Pega el código que tienes para la imagen en un comentario, aunque sea sin las < > para que pueda verlo.

Anónimo

Soy el Anónimo de antes. Disculpa.

El blog es http://consultadepsicoterapia.blogspot.com.

Enmarcada la tengo, lo que no consigo hacer es ponerla extendida como tu, no se explicarlo mejor.

Muchas gracias y cuando me termine de aclarar pondré un link de tu blog.Es genial.

Anónimo

Gracias Rosa eres de gran ayuda como siempre, pues creo que debería ir por este trocito el código que tu me das:

body {
background-image: url(http://img147.imageshack.us/img147/2834/espinelijk7.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right;
background-color: #FFFFFF;
margin:0;
padding:0px 0px;
text-align:center;
font:x-small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Anónimo

Por cierto de paso tengo otra cuestión que me ronda la cabeza; cómo hago para poner iconos de esta página en mis links o Blogroll aunque se repitan, he visto que has hecho un post para hacerlo en las etiquetas pero no veo ninguno de iconos en los links, si lo supieras el cómo se hace espero que nos lo hagas saber en uno de tus posts.
1 salud/o.

Anónimo

Espineli, el problema es que eso que tu llamas una "imagen fija" no lo es, es la imagen de fondo del blog, así que ahí no puedes poner ningún link.
Para poder hacerlo, tendrías que dejar el fondo de color blanco y aplicar la imagen como fija, con otro código distinto.

Anónimo

Pues creo que lo hize de otra manerra jeje, pero si tengo el fondo blanco, y mi imagen si queda fija, sale un monigote en la esquina inferior derecha con un cartelito que dice "no a las guerras".
Bueno gracias de todas formas, espero que un día nos digas como poner iconos en los links, los de esta página me encantan!

http://www.mena.com.mx/

1 saludo.

Anónimo

Espineli, lo que queda fijo es el fondo de tu blog con la imagen del muñequito incluido, esta en tu css en el body y como te digo, NO es una imagen fija, está aplicada como background del fondo. La imagen a la derecha y el fondo en blanco y has puesto el fixed para que no se mueva, el efecto que logras es parecido, pero no es el que se llama literalmente "imagen fija", en el css no pueden usarse links, solo en HTML, que es donde se aplican las imágenes fijas.

Anónimo

Carmen, nos hemos liado, hay dos anónimos (tu y otro) la respuesta de "enmarcar" era para el otro ...¿entiendes ahora uno de los motivos de no comentar como anónimo? es un lío para todos...

Verás, te decía que te queda así, porque has puesto el elemento nube sobre las entradas y entonces se expande para ocupar el mismo ancho que ellas.
Tendrías que arrastrar el elemento debajo de la cabecera.
Si no te deja ponerlo ahí, tendrás que hacerle hueco, ve al código de la plantilla y busca esto:
<div id='header-wrapper'>
Justo debajo está la sección de la cabecera, tienes que ponerla como aquí:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Guarda cambios y ve a elementos de página, ya podrás arrastrar el elemento debajo del header sin problema.

Anónimo

Agustin, lo siento mucho...pero no tengo ni idea de lo que hablas, como no te expliques con más amplitud...

Anónimo

O.K. reconozco lo que dices de que no es una imagen fija... pero no me diras que no queda la mar de mono...
Por cierto intentaré lo de la imagen fija siguiendo tu post, pero un dia de estos podrías explicarnos en uno de tus posts lo de poner iconos para nuestro "blogroll"?.
Gracias

Anónimo

Espineli, pues claro que es mono XD, el muñequito es lindísimo y su lema aún lo es más. Y así queda superbien, pero no puedes añadirle un link ahí.

Tendré en cuenta lo de los iconos (antes se me olvidó contestarte a eso, perdona) para una futura entrada.

Anónimo

Gracias Rosa, estaré atento a tus futuras entradas ya que tu blog es genial tienes muchos trucos.
1 salud/o!

BeTina

Gracias Rosa!! La "corvina", me quedó mucho más sabrosa con este efecto en mis "sabores eternos". Si quieres pasar y ver en http://saboreseternos.blogspot.com
Por ahí te animas y preparas algo ;-)
Gracias y saludos!!
BeT

Lupus

Rosa, estoy promocionando una cadena muy interesante que inició Phylosoft.com, es sobr el tema de hacer una campaña contra el NoFollow.
Pasate y, si te interesa, sumate..
http://generacion-blogger.blogspot.com/2008/03/cadena-movimiento-dofollow.html

Anónimo

Bet, yo creo que se vería bien sobrosona incluso sin el efecto ;-)

Anónimo

Lupus, muchas gracias! Voy a ver ahora mismo...

Anónimo

Muchas gracias. Lo de escribir como anónimo fue un accidente.
Ya he hecho lo que decias y funciona.

Anónimo

Por cierto, una duda. ¿Es posible que en blogger no se vean las scrollbars?. Sale un segundo y desaparece.

Agustín Gonzalez C.

Hola Rosa!
Ahi encontre un pagina que lo explica mas o menos..pero esta en ingles y no entiendo mucho...Segun entiendo se debe intalar un "Neo".. :S,, Bueno..Gracis de todos modos..!!

Segui asi con el blog!!
Gracias por todo!

La paguina es:

http://hackosphere.blogspot.com/2007/05/installing-neo-template-in-your-blog.html

Agustín Gonzalez C.

Por ejemplo para Importar Titulares de Otros Blogs..se usa..

"Cambie <> por ()"

va...

(div id='main-wrapper')
(div class='main section' id='main')
(div class='widget HTML' id='HTML12')
(div class='widget-content')
(div style="text-align: justify; color:#DDDDDD"
font color="#FF0000")
(br/)(b)Lee los post de tus otros blogs favoritos sin salir de aquí. Sólo tienes que completar el campo de la dirección del blog y luego le das click a "Importar Titulares"(br/)(br/)
(/b)(/font)
(center)(form action="" name="neoform")(b)(font color="#FF0000")
(span style=";font-size:11;")http://(/span)(/font)(span style=";font-size:11;color:#FF0000;")(input name="blog" size="10" type="text"/)(/span)(font color="#FF0000")(span style=";font-size:11;").blogspot.com(/span)(/font)(/b)(font color="#FF0000")(span style=";font-size:11;font-weight:700") (/span)
(/font)(b)(font color="#FF0000")(input value="Importar Titulares" onclick="javascript:getBlogPosts();" type="button"/)(/font)(font color="#FF0000")
(/font)(/b)
(/form)(/center)
(/div)
(/div)(/div)
(/div)



Espero que te haya servido!

Adios!

Anónimo

Carmen, si que se ven en Blogger, a no ser que sea en un elemento con scrollbar:auto y entonces solo saldrá cuando el elemento lo necesite.
¿Donde te pasa eso? En tu blog las veo añadidas en dos widget de la sidebar y están bien...

Anónimo

Agustín, lo que hay que instalar es la plantilla completa de Hackospere, que es la que usa ese sistema, el neo.
Si lo que quieres es insertar titulares de otros blogs, es tan fácil como colocar un elemento "Feed" con la url del feed del blog del que se quieren importar los titulares.

Alvaro

Holaa Rosaa!! :-D

Quería pedirte un favor. Esque me pasa algo muy raro en mi blog. Solo quiero que veas esta imagen. Lo de mis elementos de página se corta y no puedo añadir nada a los que están abajo.

La imagen es esta:


Saludos!!

Anónimo

Rosa, una dudita (no es respecto a este tema, pero no sabía dónde más postearlo ^^).

Es que mira, le puse a mi blog el Menu-bar debajo de la cabecera, y cada link lo direccioné a diferentes etiquetas (espero explicarme bien).

Pero obviamente cuando hago clic en ellos me aparece "Mostrando todas las entradas con la etiqueta X" Hay alguna manera de que no te salga eso?

Es que veo que usas lo mismo en tu menú-bar aquí en el blog y no aparece así. Y otra cosilla, ¿como hago para que cuando me aparece mi página no me salgan todas las entradas "digamos abiertas" sino en lista como las tuyas? Revisé el tutorial de Mostrar/Ocultar pero me pregunto si en la página principal saldría "oculto".

Anónimo

Alvaro, para mi ya no es raro, je,je, hace días que recibo consultas con el mismo problema.
Es un error de Blogger que está afectando a muchos blogs (incluyendo el mio, por cierto) así que solo nos queda tener paciencia.
Mientras tanto prueba a usar las flechas de dirección de tu teclado, está funcionando en algunos casos, o a editar los elementos desde las herramientas de la plantilla en vista previa.

Anónimo

Fernandooo1, te explicas perfectamente:-)
Para ocultar ese mensaje mira aquí:
Ocultar mensaje de etiquetas
Te recomiendo que escojas la 2º opción (ocultarlo) nunca se sabe si tendremos que volver a mostrarlo y entonces solo tendríamos que "deshacer lo hecho".

En cuanto a lo de los títulos expandibles, los míos solo se muestran así en las páginas de etiquetas, tengo una entrada donde explico como hacerlo así, y en ambas, es decir, expandibles en la página principal y en la de etiquetas, pero solo en la principal no lo he conseguido aún...
Títulos expandibles

Con el sistema mostrar/ocultar también se puede, de hecho hay un chico que lo tiene así, siento no poder darte la dire de su blog y es que ahora mismo no me acuerdo...

Anónimo

Rosa, parece ser que lo solucioné. Ahora voy a intentar que el scrollbar funcione solo con el contenido porque se me lleva el título tambien. En algún lado he visto que lo tienes explicado.
Gracias de nuevo.

Anónimo

Rosa eres una master (en estos momentos te alabo XD).

"En cuanto a lo de los títulos expandibles, los míos solo se muestran así en las páginas de etiquetas"

Justo eso quería.

MIIIL GRACIAS DE VERDAD. :) Ahorita lo aplicaré. Mil, mil gracias. :)

Sol Sol

Hola Rosa, este blog es una gran ayuda para todos los que estamos empezando. Por eso quiero que pases por mi blog que tienes una cosa para ti.

Besos

Agustín Gonzalez C.

HOla!

Gracias!!!

Pero como hago exactamente eso?

Siempre tuve problemas con los FEED..

ME pasas el codigo HTML, por favor?

Gracias!..

Anónimo

Carmen en esta entrada, o mejor en los comentarios de esa misma entrada, tal vez encuentres ayuda para eso.

Anónimo

Fernandooo1, gracias a ti!

Anónimo

Jalapa, gracias, ahora mismo me paso!

Anónimo

Agustín, en breve voy a publicar algo sobre el tema que, con suerte, te servirá.

Avalon

Como siempre, excelente Rosa. Muchas gracias

Avalon

Sería una estupidez hacer una encuesta sobre quien es la mujer más querida de la red. Obviamente Rosa!!!!!!!!.-

Gracias por este truquito, lo andaba buscando.-

PD: Te aclaro que tu blog es adictivo. Un beso

Anónimo

Rosa, tengo una duda con este truco. Hay la posibilidad de meter este código en la plantilla, o alguno similar, para crear un menú con este efecto y ubicarlo debajo del Header?

Gracias de antemano ;)

Anónimo

Alvaro, pues es casi seguro que si. ¡Trataré de mirarlo!

Anónimo

Hola Rosa, hace poco me crucé con tú blog y me parece una herramienta útil, lo que pasa que yo a veces soy un poco inútil... ya me costo colocar lo de la flecha de deslizamiento pero al final lo conseguí, aunque no se ni como puse la casita de las entradas, y ahí se quedará, lo único que me gustaria sería cambiar la casita por una flecha...

Pero bueno mi mayor problema es con este post, mi blog es el siguiente "http://elpoetasinvoz.blogspot.com/" y tengo varias etiquetas, en forma de "imagen" en el sidebar, pero con el enlace a las etiquetas; "secretos y mentiras, forasteros, etc..." pero me gustaria crear esto del rollover, que por mas que lo intente no me sale nada, es como si la imagen se rompiera...

este es mi blog: http://elpoetasinvoz.blogspot.com/

Ayudame por favor

Anónimo

Perdona pero no te dije los problemas, que mas que mas que problemas, será qu eno hago nada bien...

A ver, creo el codigo rescatando el url de las imagenes desde el Photobucket, y lo intento de colocar en un elemnto de htmal/javascrip y no me sale nada, tambien he probado como dice, de pegarlo en el codigo html, de mi blog, entre los "body" y nada, a ver si me puedes ayudar.

Anónimo

( EpsV ) Tendrías que hacer lo que indico aquí, es decir, una vez en la página ingresas las url, la del botón que tienes en la sidebar y la del que va a verse al pasar el ratón (los dos del mismo tamaño) y ese código resultante ha de estar en sustitución de donde ahora tienes en el blog el botón sencillo.

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S