Este es el ejemplo:
Tan sólo debes usar el siguiente código dentro de tus entradas:
<img src="URL de la imagen" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=100;this.height=80;" width="100" height="80" />
- Sólo debes cambiar la URL de la imagen (en su tamaño normal)
- El primer width y height son las medidas a las que se va agrandar la imagen al pasar el cursor, width es el ancho y height es el alto.
- Los width y height que están en color verde son el ancho y alto de la imagen en tamaño pequeño, es decir, el thmbnail.
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Unirse en Facebook
Enviar un correo
Iconos RSS.PNG)
Música JPZ
73 comentarios:
que bueno que este script, pero para ser sincero me gusta mas el primero XD, aunque creo que es cuestion de opinion, igual muchas gracias.
Saludos.
¿Ahora te digo Pepe o Snape? Jajaja.
Este es muy sencillo, pero el otro tiene la ventaja de poder incluir más atributos en el CSS como bordes, etc.
Ya será elección de ustedes usar el que más les agrade.
Saludos!
Potro te digo que sos un groso con este blog,granmente me sirvio un montonaso para personalizar el mio,espero que sigas asi,espero mas!:)
¡Hola, Potro!
Este truco me salió mucho mejor que el otro.
La verdad es que algo estoy haciendo mal en el otro truco, pero con este nada salió mal.
¡Felicidades y muchas gracias!
Hola Emanuel Martinez,
Muchas gracias por tus comentarios. Me da gusto saber que este blog te ha ayudado a personalizar el tuyo.
Saludos y mucho éxito con tu blog!
Hola Eduardo Arteaga,
No creo que hayas hecho algo mal, el problema con el otro método es que muchas veces los estilos de la plantilla "chocan" con los estilos del efecto de agrandar y por eso no se ve como quisiéramos. Sin duda con este método nadie batalla.
Un saludo!
Excelente resultado puesto en marcha en mi blog.
Tengo que decir que me gusta más el otro pero este es más rápido y no hay que tocar la plantilla
Gracias
Meri
Hola Meri,
Creo que todos coincidimos con lo mismo =)
Saludos.
Amigo saludos llego repotenciado de esas vacaciones el blog tiene muy buen diseño, amigo estoy tratando de hacer pero me sale un cuadro donde tengo que colocarlo.
Hola Dr. Pagé,
No entiendo qué cuadro sale, verifica que la URL de la imagen es correcta, quizá ahí está el error.
Saludos.
Hola Potro
Junto con agradecerte por este truco publicado. Me gustaria saber como hago para que la imagen que agrando al pasar con el mouse no mueva las demas imagenes que estan al lado o abajo de esta.
Saludos
Hola andres,
Forzosamente tiene que mover todo el contenido a su alrededor, texto imágenes, etc. pues le estás dando la orden de mover el tamaño de un elemento.
Saludos.
¿Y como podríamos hacer que a la vez que se agranda la imagen el fondo se oscureciese?
Gracias.-
Hola guito,
Hasta donde sé, oscurecer no se puede.
Saludos.
perdona el potro pero no soy capaz de hacer lo de la imagen
Hola muzgo,
¿Por qué no has podido? ¿te aparece algún error?
hola,soy muy nueva en esto y he intentado modificar la url pero me pone que no se puede,y ya no se que mas hacer,que es eso de los estilos de plantila?
ya lo siento essque estoy muy verde...
gracias
Hola peri_erika,
Los estilos de la plantilla son los códigos que le dan color, forma, etc. a la página.
¿Qué sucede con la URL de la imagen?
Dime qué imágenes son o donde están alojadas para ayudarte con el código.
Saludos.
Hola, El Potro:
Me alegra saludarte.Estoy aquí de nuevo. Lo de la Nube salió perfecto,puedes verlo en mi blog. Ahora, con respecto a éste truco en cuestión (pasar el cursor y que se agrande la imagen) ¿se puede hacer en un Gadget y no, en una entrada?
Saludos para ésa linda tierra mexicana desde aquí en Argentina. Un abrazo
Hola tolin_vs_tolin,
Qué bueno que se pudo solucionar lo de la nube de etiquetas.
Este truco también puede usarse en un gadget, sólo entra a Diseño > Elementos de la página > Añadir gadget > HTML/Javascript y ahí pega el código.
Sólo te recomiendo que la imagen agrandada no sea mayor al ancho de la barra lateral o donde lo pongas, sino los resultados podrían no ser los esperados.
Saludos!
Hola, El Potro:
Quisiera hacerte una consulta que no se si corresponde a éste sector. ¿Cómo puedo hacer para que los que visiten, eventualmente, mi página puedan descargar o bajar ciertos elementos como, por ejemplo un tema musical, una fotografía, un video, etc.? Desde ya te agradezco muchísimo todo lo que haces por nosotros y te felicito por tu empeño y tu buena voluntad.
Un abrazo de tolin_vs_tolin
Hola tolin_vs_tolin,
Primero necesitas subir los archivos que quieres compartir a un servidor gratuito, hay muchos en su tipo, yo te recomiendo Dropbox.
Ya que los has subido crea una entrada y ahí haz una reseña sobre el tema a descargar. Luego hasta abajo usa este código para que tus lectores puedan descargarlo:
<a href="URL del archivo">Descargar esta canción</a>
En la URL del archivo deberás poner la dirección del archivo que subiste anteriormente al servidor.
Te dejo un enlace para que sepas más acerca de cómo usa Dropbox para subir tus archivos:
http://ciudadblogger.com/2009/04/alojamiento-de-archivos-gratis.html
Saludos.
Hola Potro.
Mi consulta de hoy es la siguiente:
Tengo varias imágenes seguidas en una misma entrada ¿Cómo puedo dejar alguna cantidad de espacio entre ellas?
De ante mano mil gracias.
Hola ABRIL,
Agrega un "padding" para dejar separación entre ellas, quedaría así:
<img style="padding:10px;" src="URL de la imagen" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=100;this.height=80;" width="100" height="80" />
Ahí son 10px de separación pero tú puedes ponerle más o quitarle, según quieras.
Saludos.
Gracias.
Ahora el problema que tengo es que todas las imágenes tienen marco (borde) y sucede que al hacer lo que dijiste la imágen sí se separa pero del borde. Lo que quiero es que la imágen con su borde se separe de la siguiente imágen con su respectivo borde.
Discúlpa si no soy muy claro.
MIl gracias
Hola ABRIL,
Entonces cambia el padding por margin.
Saludos!
Perfecto.
Muchísimas gracias.
No comprendo donde insertar el codigo, yo tengo la url de la imagen por ejemplo
donde inserto el codigo?
Gracias..
Hola Retroalimentacion del Ser,
En donde dice URL de la imagen en color rojo, es donde debes poner la URL.
Saludos
perdón pero soy muy nobel en esto y no entiendo donde tengo la URL en color rojo en blogger....gracias..
La URL de la imagen es la dirección en Internet de la imagen, primero necesitas subir la imagen a un servidor como Imageshack o Photobucket para conseguir la URL.
Ya que la tengas pones esa URL en donde dice URL de la imagen, por ejemplo quedaría así:
<img src="http://i38.tinypic.com/o5up8l.jpg" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=100;this.height=80;" width="100" height="80" />
Saludos.
como puedo poner la imagen con el mismo efecto pero fuera de las entradas ?
Hola Forrito,
Ya te he respondido en la otra entrada.
Saludos.
hola,lindo efecto pero.. ¿se puede hacer que aparte de agrandar la imagen al pasar el mouse esta cambie a otra?
osea..que la imagen mas grande sea otra! no la misma.
no se si me explico.
POner una foto pequeña y que al pasar el mouse se pase a otra imagen mas grande! Saludos exelente blog!
Hola gambetagol,
Claro que se puede, sería combinar este efecto junto al de cambiar imagen al pasar el mouse.
Tendrías que usar este código:
<img src="URL de la imagen UNO" onmouseover="this.width=400;this.height=300; this.src='URL de la imagen DOS';" onmouseout="this.width=100;this.height=80; this.src='URL de la imagen UNO';" width="100" height="80" />
Sólo cambia las URL de las imágenes donde se indica y listo.
Saludos.
GRANDE MAESTRO ME SALVASTE LA VIDA!!! TU BLOG ES UNO DE LOS MEJORES DE LA RED! SALUDOS Y GRACIAS!
Por nada, me alegro haberte podido ayudar.
Saludos.
hola bueno soy nuevo en el blog y
esta genial ,pero tengo una pregunta sobre este
efecto puedo ponerle un enlace a la imagen , sin que se pierda el estilo de agrandarla , me explico es que quisiera saber como le puedo poner un enlace a la imagen , que al al pasar el mouse se haga grande y al dar click se valla a otra pagina
bueno si me puedes AYUDAr
bye
nice blog
Hola bernardo28,
Sólo encierra el código que he mencionado en este post con esto:
<a href="URL del enlace">
...Aquí va el resto del código...
</a>
Cambia la URL del enlace y listo.
Saludos.
ok
gracias por la ayuda
bye
Hola de nuevo potro,bueno creo que fue la entrada mas parecida a la pregunta que quiero hacerte, en mi plantilla del blog,cuando pongo una imagen en una entrada al principio la achica y la carga hacia la izquierda, habra algun codigo para que la deje debajo o por arriba de las letras? mira esta es la pagina, www.borest.net espero y me puedas hechar la mano.
Hola Borest,
No he podido ver tu blog, el navegador dice que la página no existe, supongo que tienes algunos problemas con la configuración.
Saludos.
hola de nuevo,creo que ya quedo solucionado el problema,jejeje,ahora si se puede ver.espero y me puedas ayudar.
Ummm nop, sigue sin poder verse.
ups, no se que pase,ya he intentado con otras personas y no hay problemas,bueno esperemos y se corrija ese problema.
Ahora sólo veo información sobre Internetworks, cuando se corrija me comentas para entender un poco sobre tu problema.
Saludos.
Mira este es el codigo, talves y lo reconoscas,
te dejo el link del archivo ya que no me permitia poner html, http://dc182.4shared.com/download/188504082/daec0c41/codigoborest.txt?tsid=20100104-195451-d1d0853c
Ojala me puedas hechar la mano,lo que quiero es que aparesan imagenes,pero en su tamaño real,ya que me paso a la entrada completa ya se ven en su tamaña real, pero cuando esta la entrada cortada por el (leer mas) no,ah,y ademas si elimino ese codigo,pierde el corte que se hace en la entrada osea el (...) Sludos.
Hola Borest,
Tu plantilla ya tiene integrado el Leer más de forma automática, es por eso que en la página principal aparece la foto en miniatura.
Lo que ahora no sé es si quieres eliminar el Leer más para que las entradas se muestren de forma normal o si sólo quieres que las imágenes estén más grandes aun con el Leer más.
Saludos.
haha si,lo se,pero el problema era que la foto se despixelaba y ya no se veia tambien,lo que hice fue eliminar,las partes de la img, y en la entrada convertir un salto de linea,para que lo dividiera,porque como ya habia eliminado lo de las imagenes ya no se hiba a poder,pero ya esta solucionado,gracias por la ayuda y disculpa la molestia jejeje.Saludos.
Claro, al ser miniaturas se ven mal al agrandarlas más del tamaño original.
Qué bueno que ya has encontrado la solución.
Saludos.
Hola potro,tengo otra dudilla,mira pues bien hice un pequeño menu para las suscripciones,pero puse una imagen y un link a la derecha de la imagen pero yo quiero que solo me de el url de el texto,no el de la imagen osea que cuando pase el mouse por la imagen no pase nada,ni si quiera se ve el url, como puedo hacer eso podrias ayudarme? O bien si no se puede asi, que se haga como en la imagen de cabecera que tienes,CIUDAD BLOGGER asi,que te lleve a un link pero cuando le das clik no se haga un marco alrededor.
ah perdon lo olvide,vi tu menu de suscripciones,y me gusto esa opcion de que cuando pones el mouse,se va un color de fondo,aunque no me gustaria que se resaltara la imagen,pero haber si puedes compartir esos datos,si no es mucha molestia.
Hola Borest,
En este enlace puedes ver cómo poner ese menú.
Para lo otro no te he entendido, si un elemento, ya sea una imagen o un texto tienen un enlace, siempre se verá en la barra de estado del navegador la URL del enlace a la que dirige, eso no se puede elminar, pero no sé si es eso a lo que te refieres.
Saludos.
Si,bueno lo que quiero es hacer que la imagen al darle clik no se le ponga un marco de lineas pequeñas,porque veo que en la image que tienes de cabecera no pasa eso,le das clik y se queda asi sin que se le marque el borde,espero y me hayas entendido.
Pega antes de ]]></b:skin> esto:
a:focus {
outline: none;
}
Saludos.
Ah ok,muchas gracias potro.
Hola, aquí de nuevo.
Esta última que respondiste a Borest también la andaba buscando, excelente.
Mis imágenes en las Entradas tienen marco ¿Hay algún modo de hacer que unas lo tengan y otras no? ¿Se puede también tener unas y otras con marco diferente?
Mil gracias
Depende, puedes poner dentro del CSS el estilo para que ninguna lo tenga o para que todas tengan el mismo marco.
O bien, cada vez que pongas una imagen le pones dentro del código de la imagen esto:
style="border:1px solid #000;"
Así cada imagen podrá tener el color y tipo de marco que quieras.
Saludos.
Muchísimas gracias
Hola:
Tu blog me ha ayudado con la creación de mi página web. La he realizado con Microsoft Publisher. En este programa inserto un fragmento de cógido HTML. Ahí copio y pego el código que nos has facilitado (adaptando las URLs etc). Tengo varias imágenes en la página con este truco. El problema es que al pasar el mouse sobre una de las imágenes, la imagen agrandada queda por detrás de las que están a su lado todavía en formato "pequeño" cuando debería quedar por delante de ellas.
Gracias de antemano por tu ayuda
Hola Francisco,
Supongo que debe ser por la hoja de estilos de tu página web, lamentablemente desconozco esas plataformas por lo que no sabría decirte cómo corregir el problema :S
Saludos.
hola
este truco me a gustado mucho porque es mas sencillo que el otro, pero tengo una duda, para ciertas imagenes utilizo esto:
<img imageanchor="1" src="url imagen" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"
¿donde va el codigo para agrandar la imagen sin que me afecte esto.
gracias por tu ayuda
Hola Andres Fanatico,
Sin duda también me parece mucho más fácil este método.
El código quedaría así:
<img imageanchor="1" src="URL de la imagen" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=100;this.height=80;" width="100" height="80"/>
Saludos.
ok amigo muchas gracias eres muy amable
Saludos, todo funciona bien, pero la resolución de las imágenes cambia, no consigo que tenga la misma resolución de la imágen de la URL original. Ojala puedas ayudarme... gracias
Si quieres agrandar una imagen pequeña no tendrá la resolución de una imagen grande, necesitas que la imagen que quieres agrandar ya sea de un tamaño considerable para que al agrandarse no se distorcione.
Gracias, tienes razón, intenté con imágenes de mayor tamaño y funciona ok...
felicitaciones por tu blog...
hola potro, ya hace dias que no saludo. podrias decirme como hacer el efecto de poner el raton sobre una imagen y que se habra una ventana al lado ampliando la zona sobre la que he puesto el raton y al mover el raton se mueva igualmente la imagen ampliada. te mando un ejemplo http://www.trekbikes.com/es/es/bikes/mountain_full_suspension/top_fuel/topfuel99ssl/
Un saludo desde zaragoza
Me parece que con jQuery se puede aunque nunca he visto que se pueda en Blogger, tendría que investigar un poco y ver si hay modo de echarlo andar en Blogger.
Hola potro.
soy un fiel lector de tu blogger, es que es a mi parecer el mejor de la web, y eso en gran medida se debe a la dedicación que te tomas al responder las inquietudes y problemas de los user que la visitan, sique a sí. Pasando a mi problema pues, utilice el código de más arriba, pero al pasar el mouse sobre la imagen, esta se amplía hacia la derecha, y no de forma uniforme como el ejemplo. Me podrías decir cómo hacer que se expanda de manera uniforme, hacia tanto derecha como izquierda. y arriba y abajo. Mi segundo problema es que al ampliarse la imagen esta, queda detrás de sidebar derecho y no sobre la columna, la segunda imagen tiene el efecto y el código para que puedas verlo aquí: http://lethaeuslethum.blogspot.com/
Espero con ansias tu respuesta, ya que esto me tiene bastante complicado y no me deja seguir avanzando en mi blogger.
Un saludo cordial. De un fans y lector frecuente de tu blogger, que es excelente.
Atte.
Darkgelus
Hola Daniel,
Muchas gracias por tus amables comentarios, me da gusto saber que este sitio te ha sido de ayuda.
Quizá se expande a la derecha porque la imagen la tienes alineada a la izquierda (o a la derecha). Prueba encerrando el código dentro de <center> y </center>
Respecto a lo otro es un problema muy común con esas plantillas nuevas. Lo único que se me ocurre es que busques dentro de toda tu plantilla esta parte:
z-index: 1;
Y la elimines o la pongas en 0 (cero), quizá con eso se arregle pero no te aseguro nada.
Saludos.
Potro:
Gracias por contestar mis preguntas tan rápido.
Pues bien cerrar el código en Center. Resulta en la vista previa. Y queda como tu ejemplo de arriba, pero al ir a la entrada del blogger sigue expandiéndose hacia la derecha.
Me puedes decir por qué en vista previa sale bien, y en el blogger sigue ocurriendo que se expande al lado derecho.si me puedes ayudar con la solución te lo agradeceria. ya que si hago que se expande de manera uniforme, no necesitare que, quede sobre el sidebar derecho, ya que limitare su ancho, hasta antes de llegar a las columnas del costado.
De ante mano, gracias por darte el tiempo de ayudarme con el blogger. Saludos.
Atte.
Darkgelus.
Pues entonces supongo que sí debe ser por la plantilla. En el ejemplo de mi entrada no he hecho nada especial ni diferente, así que algún estilo de tu plantilla debe ser el que hace que lo agrande hacia la derecha.
Quizá quieras probar el otro método que es con CSS pero no te aseguro que funcione, ya que en esas plantillas nuevas casi nada funciona :\
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.