Con un pequeño script podemos hacer cambiar una imagen por otra al pasar el cursor sobre ella, esto le agrega mayor dinamismo a nuestro blog. Sólo necesitamos tener dos imágenes del mismo tamaño y este código que les daré a continuación.
Vamos a Diseño | Añadir un gadget | HTML/Javascript y pegamos lo siguiente:
Vamos a Diseño | Añadir un gadget | HTML/Javascript y pegamos lo siguiente:
<script>
function cambiar (flag,img) {
if (document.images) {
if (document.images[img].permitirloaded) {
if (flag==1) document.images[img].src = document.images[img].permitir.src
else document.images[img].src = document.images[img].permitir.oldsrc
}}}
function preloadcambiar (img,adresse) {
if (document.images) {
img.onload = null;
img.permitir = new Image ();
img.permitir.oldsrc = img.src;
img.permitir.src = adresse;
img.permitirloaded = true;
}}
</script>
<a onmouseover="cambiar(1,'IMG1');" onmouseout="cambiar(0,'IMG1');" href="URL del enlace">
<img border="0" src="URL de la imagen UNO" onload="preloadcambiar(this,'URL de la imagen DOS');" name="IMG1"/></a>
Deben cambiar los datos en rojo por los suyos, guardan los cambios y listo. Tendrán una imagen dinámica sin necesidad de tocar la plantilla. Pueden ver un ejemplo en la foto de mi perfil aquí.
Ciudad Blogger
Exelente! no sabia que se podía hacer eso. Simpre sorprendiéndome en tu blog. jaja.
ResponderEliminarSaludos.
Todo sea en pro de mejorar nuestro blog.
ResponderEliminarUn abrazo.
Para tener dos ó más gadget con este script, ¿Que hay que modificar en él?...
ResponderEliminarSaludos.
Jpz.-
Hola Jpz,
ResponderEliminarSólo pega en otro elemento HTML/Javascript esta parte:
<a onmouseover="cambiar(1,'IMG1');" onmouseout="cambiar(0,'IMG1');" href="URL del enlace">
<img border="0" src="URL de la imagen UNO" onload="preloadcambiar(this,'URL de la imagen DOS');" name="IMG1"/></a>
y modifica donde dice IMG1 (aparece 3 veces) lo cambias por IMG2. Si quisieras agregar otro elemento haces lo mismo cambiándolo por IMG3 y así sucesivamente.
Como ves, no necesitas pegar de nuevo el script, únicamente la última parte que te he dicho.
Saludos.
Extraordinario Potro.
ResponderEliminarGenial!.
Saludos y gracias.
Jpz.-
hola a mi no me funciono, por alguna extraña razon la segunda imagen no me aparece y ya verifique la url de la imagen, la cambie por otra y no me funciona si em pueden ayudar les agradezco
ResponderEliminarHola Jpz,
ResponderEliminarMe alegra que estés contento con los resultados, en estos días publico una forma más sencilla para lograr el mismo efecto.
Saludos.
Hola Hugo Daniel,
Sin saber la dirección de tu blog no podría saber cuál es el problema.
Saludos.
Hola!! que tal a todos!! la verdad cai de casualidad en este Sitio y les quiero agradecer porque todo el materia expuesto, funciona, y lo mejor de todo que esta explicado de una manera "Clara" y "Sencilla".
ResponderEliminarGracias por la ayuda!!
Un fuerte abrazo a todos los que hacen posible este sitio!!
Saludos!!
...
Hola LU7EGC,
ResponderEliminarMuchas gracias por tus comentarios y bienvenido a Ciudad Blogger!
Saludos.
Como se puede cambiar el tamaño de la foto del perfil en blogger?.
ResponderEliminarEspero que alguien pueda ayudarme.
Sólo sube una foto más grande.
ResponderEliminarSaludos.
Gracias ante todo.
ResponderEliminar¿Cómo cambiaría el tipo de letra en el pié de foto? Qué script o tag debería añadir para poner, por ejemplo, el tipo calibri
Gracias
Hola alejandro,
ResponderEliminarEl pié de foto iría así:
<div style="font-family: Verdana;">Aquí va el texto</div>
Cambia donde dice Verdana por el tipo de letra que quieras, sólo recuerda que las fuentes permitidas son:
Arial, Times New Roman, Verdana, Georgia, Comic Sans, Trebuchet y Courier New.
Saludos.
olle y al pasar hacer el efecto que pasa es tus textos
ResponderEliminarcomo lo hacemos a y tambien los efectos de donde esta lo twitter tambn se ven buenos espero me puedas ayudar y pasarme los codigos que andes muy bn
Para personalizar los lins del blog visita esta entrada, ahí verás cómo se cambia el color y otras cositas.
ResponderEliminarDe Twitter no sé exactamente a qué te refieres, pero en sí es un menú vertical, puedes cómo se hace aquí.
Saludos.
exelente potro, te invito a esta pagina que estoy haciendo agregando varias cosas de ciudad blogger mas que todo wow esa de la imagen me quedo muy buena www.atlantistv.blogspto.com
ResponderEliminarhola :3 sera posible que envez de cambiar de imagen al pasar el mouse, muestre una imagen al lado de un enlace al pasar el mouse sobre ese enlace? seria muy interesante y de mucha ayuda :)
ResponderEliminarPues quizá la forma más simple sería con un Tooltip.
ResponderEliminarHola Potro,
ResponderEliminarTe queria comentar algo. Al hacer click sobre mi nombre y mi ciudad en el perfil de mi blog, no ocurre nada. Sin embargo, cuando hago click en donde dice "Ver todo mi perfil", esta frase se subraya y me enlaza con la pagina del perfil.
Como puedo hacer para que al pasar el mouse sobre mi nombre y ciudad, ocurra lo mismo que con "ver todo mi perfil"?..
Muchisimas Gracias y un saludo,
Tu seguidor fiel,
Jose
Hola Jose,
ResponderEliminarProbablemente hayas editado alguna parte de ese código sin darte cuenta.
Prueba eliminando el gadget y poniéndolo de nuevo para ver si se corrige el problema.
Saludos!
Hola Potro,
ResponderEliminarHa funcionado a la perfeccion!..
No sabes como te lo agradezco!... y la de horas que he pasado modificando el HTML tratando de buscar un enlace para el perfil...
Eres maravilloso, Potro.
Tu seguidor fiel,
Jose
A veces la solución más simple es la más efectiva ;)
ResponderEliminar¡Saludos!
Hola Potro,
ResponderEliminarAhora me pasa esto con mi segundo blog.
Es relacionado con el perfil, concretamente con estos dos aspectos:
1): Mi nombre y apellidos
2): "ver todo mi perfil".
Ambos se subrayan cuando paso el mouse por arriba. Hasta ahi todo bien, pero cuando hago click para ver mi perfil y luego regreso a la pagina principal, si paso el cursor sobre el nombre o "ver todo mi perfil", ya no se subraya.
Unicamente lo hace si hago un click en cualquier lado de la pantalla.
Hay alguna posibilidad para que el sistema genere ese click y por consiguiente aparezca subrayado al pasar el cursor?..
O tendria que cambiar algo en el HTML?>.
Esto no me pasa en el otro blog y tengo lo mismo en ambos!>.. Que raro me resulta y contradictorio al mismo tiempo!.
A ver si me arrojas luz en esto.
Saludos cordiales,
Tu seguidor fiel,
jose
Hola Jose,
ResponderEliminarSeguro los estilos de los links son diferentes ahí, necesitaría saber cuál es el blog para decirte cómo arreglarlo.
Saludos.
Hola Potro,
ResponderEliminarEl blog es www.destinoviajes.blogspot.com
Es el blog que tengo de prueba donde hago y deshago, para aprender.
He mirado los estilos de link y no se francamente que debo de añadir o eliminar.
Saludos y muchas gracias
Tu seguidor fiel,
Jose
Pues acabo de entrar a ese blog pasé el cursor por esos links y se subraya, luego di click ahí para ver tu perfil, regresé de nuevo al blog, pasé otra vez el cursor por esos links y sigo viendo el subrayado de forma normal :/
ResponderEliminarHola Potro,
ResponderEliminarTengo una pregunta y perdona las molestias.
Yo tengo 2 blogs entrelazados. Es posible cambiar la foto del perfil de uno de ellos sin que se cambie la del otro?>
Lo he intentado hacer y no me sale.
Muchas gracias.
Tu seguidor fiel,
Jose
No, aunque tengas x cantidad de blogs la cuenta sigue siendo una y el perfil es el perfil de la cuenta no de los blogs. Si abres otra cuenta para otro blog ahí sí podrías cambiar el perfil pues ya es una cuenta distinta ;)
ResponderEliminarUna pregunta como puedo hacer para que las imagenes ( estoy colocando 4 gatget verticales en un mismo HTML/Javascript pero tiene una ligera avertura entre ellos de medio centimetro, como podria hacer para que se vean pegados ? espero tu amable respuesta y si no fuera mucha la molestia a mi correo personal (: abrazos potro!
ResponderEliminarretlawx******@****live.com ( quita los ****) gracias ;)
ResponderEliminarHola Kylie,
ResponderEliminarAl correo no puedo responderte pero con mucho gusto lo hago por aquí ;)
Para que las imágenes no tengan espacio entre ellas coloca los códigos pegados uno detrás de otro.
Si no obtienes el resultado esperado dime en cuál blog lo has puesto y en qué parte exactamente está.
Saludos.
Hola, Potro. Esto mismo se podría hacer pero en vez de cambiar una imagen cualquiera se cambiara la cabecera del blog?
ResponderEliminarSaludos.
Sí, pero no con el gadget de la cabecera actual, tendrías que eliminar la cabecera y en su lugar poner un elemento HTML/Javascript, ahí pondrías el script que se menciona en la entrada.
ResponderEliminarSaludos :)
Hola yo tengo un problema porque lo pongo todo bien y con el html-kit me funciona perfecto pero lo ago desde blogger y no me funciona, no se me cambia la imagen ni nada, me sale tal y como la tenía. ¿Podría ser por la plantilla? Necesito ayudaaa
ResponderEliminarHabría que ver la entrada o blog donde lo has puesto.
EliminarHola Potro. Una pregunta, porque la imagen tarda tanto en cambiar_???
ResponderEliminarPuede ser que la imagen (cualquiera de las dos) es un poco grande.
EliminarQue va son todas de 250x250 maximo. Si en el ejemplo que tienes tu de perfil tambien es asi si te fijas bien.. pero una vez recuerdo que puse una como esta pero directamente en la plantilla (Leer mas) y entonces funcionaba perfectamente.
EliminarBueno igualmente asi no esta mal.) Saludos...
Que se coloca en donde dice URL del enlace? Si ya coloque los urls de las imagenes?
ResponderEliminarQue se coloca en el URL del enlace? Si ya yo coloque las URLs de las imagenes?
ResponderEliminarLa URL de la página que quieras que abra cuando se dé click en ella. Si no quieres que abra ningún enlace pon ahí un signo de gato #
EliminarGracias, me ha costado encontrar esto para que me funcione en IE9.
ResponderEliminarExcelente
Gracias, me ha costado encontrar este codigo para que funcione en IE9.
ResponderEliminarExcelente.
hola, estoy haciendo un libro virtual en html y java script y quisiera agregarle imágenes cambiante(es decir que en la pagina que yo desee la imagen que este pueda mostrar otra al colocar el cursor sobre la misma), me gustaría recibir algún tipo de ayuda, esto es para mi proyecto de grado.
ResponderEliminargracias.
No he comprendido YOYI, ¿me puedes dar más detalles?
Eliminarhola amigo como podría poner dos imagenes una al lado de la otra
ResponderEliminarHola Susi, la manera más práctica es que uses una tabla HTML, de esa manera puedes acomodar tus imágenes poniendo en cada celda el código de cada imagen.
Eliminarpotro y como puedo hacer con un Logo de la cabecera que lleve URL
ResponderEliminarEs igual, en el código verás que dice "URL del enlace", ahí deberás poner el link a donde quieres que tu logo enlace.
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarTambien me gustaría saber como has realizado la tabla de las redes sociales (blogger, facebook y googleplus) que aparece en tu blog... No encuentro el review :(
ResponderEliminarHola, lo del demo no lo sé. Lo del gadget que uso lo puedes ver aquí:
ResponderEliminarhttp://www.compartidisimo.com/2011/10/crear-una-seccion-con-pestanas-para.html
¡Saludos!
Muchas gracias Potro :) voy a verlo ahora :)
ResponderEliminarHola, quisiera saber si se puede hacer que al hacer click la imagen cambie a otra
ResponderEliminar