Agrandar imagen al pasar el mouse II

19 de septiembre de 2009 159 comentarios ,
Anteriormente vimos cómo agrandar una imagen al pasar el mouse sobre ella, para ello agregamos unos estilos a la plantilla y un pequeño código en la entrada. Esta vez haremos el mismo efecto de ampliar la imagen pero con un código mucho más sencillo y corto.
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.


159 comentarios en:

" Agrandar imagen al pasar el mouse II "

  1. 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.

    ResponderEliminar
  2. ¿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!

    ResponderEliminar
  3. 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!:)

    ResponderEliminar
  4. ¡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!

    ResponderEliminar
  5. 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!

    ResponderEliminar
  6. 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!

    ResponderEliminar
  7. 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

    ResponderEliminar
  8. Hola Meri,

    Creo que todos coincidimos con lo mismo =)
    Saludos.

    ResponderEliminar
  9. 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.

    ResponderEliminar
  10. Hola Dr. Pagé,

    No entiendo qué cuadro sale, verifica que la URL de la imagen es correcta, quizá ahí está el error.

    Saludos.

    ResponderEliminar
  11. 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

    ResponderEliminar
  12. 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.

    ResponderEliminar
  13. ¿Y como podríamos hacer que a la vez que se agranda la imagen el fondo se oscureciese?

    Gracias.-

    ResponderEliminar
  14. Hola guito,

    Hasta donde sé, oscurecer no se puede.
    Saludos.

    ResponderEliminar
  15. perdona el potro pero no soy capaz de hacer lo de la imagen

    ResponderEliminar
  16. Hola muzgo,

    ¿Por qué no has podido? ¿te aparece algún error?

    ResponderEliminar
  17. 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

    ResponderEliminar
  18. 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.

    ResponderEliminar
  19. 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

    ResponderEliminar
  20. 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!

    ResponderEliminar
  21. 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

    ResponderEliminar
  22. 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.

    ResponderEliminar
  23. 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.

    ResponderEliminar
  24. 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.

    ResponderEliminar
  25. 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

    ResponderEliminar
  26. Hola ABRIL,

    Entonces cambia el padding por margin.

    Saludos!

    ResponderEliminar
    Respuestas
    1. Hola El Potro quisiera saber como agregar un enlace a esta imagen que al pasar el mouse hace zoom.. pero al darle click mande a un link. agradezco tu ayuda.

      Eliminar
  27. No comprendo donde insertar el codigo, yo tengo la url de la imagen por ejemplo

    donde inserto el codigo?

    Gracias..

    ResponderEliminar
  28. Hola Retroalimentacion del Ser,

    En donde dice URL de la imagen en color rojo, es donde debes poner la URL.

    Saludos

    ResponderEliminar
  29. perdón pero soy muy nobel en esto y no entiendo donde tengo la URL en color rojo en blogger....gracias..

    ResponderEliminar
  30. 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.

    ResponderEliminar
  31. como puedo poner la imagen con el mismo efecto pero fuera de las entradas ?

    ResponderEliminar
  32. Hola Forrito,

    Ya te he respondido en la otra entrada.
    Saludos.

    ResponderEliminar
  33. 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!

    ResponderEliminar
  34. 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.

    ResponderEliminar
  35. GRANDE MAESTRO ME SALVASTE LA VIDA!!! TU BLOG ES UNO DE LOS MEJORES DE LA RED! SALUDOS Y GRACIAS!

    ResponderEliminar
  36. Por nada, me alegro haberte podido ayudar.
    Saludos.

    ResponderEliminar
  37. 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

    ResponderEliminar
  38. 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.

    ResponderEliminar
  39. 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.

    ResponderEliminar
  40. 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.

    ResponderEliminar
  41. hola de nuevo,creo que ya quedo solucionado el problema,jejeje,ahora si se puede ver.espero y me puedas ayudar.

    ResponderEliminar
  42. ups, no se que pase,ya he intentado con otras personas y no hay problemas,bueno esperemos y se corrija ese problema.

    ResponderEliminar
  43. Ahora sólo veo información sobre Internetworks, cuando se corrija me comentas para entender un poco sobre tu problema.

    Saludos.

    ResponderEliminar
  44. 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.

    ResponderEliminar
  45. 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.

    ResponderEliminar
  46. 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.

    ResponderEliminar
  47. 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.

    ResponderEliminar
  48. 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.

    ResponderEliminar
  49. 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.

    ResponderEliminar
  50. 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.

    ResponderEliminar
  51. 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.

    ResponderEliminar
  52. Pega antes de ]]></b:skin> esto:

    a:focus {
    outline: none;
    }

    Saludos.

    ResponderEliminar
  53. 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

    ResponderEliminar
  54. 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.

    ResponderEliminar
  55. 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

    ResponderEliminar
  56. 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.

    ResponderEliminar
  57. 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

    ResponderEliminar
  58. 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.

    ResponderEliminar
  59. 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

    ResponderEliminar
  60. 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.

    ResponderEliminar
  61. Gracias, tienes razón, intenté con imágenes de mayor tamaño y funciona ok...
    felicitaciones por tu blog...

    ResponderEliminar
  62. 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

    ResponderEliminar
  63. 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.

    ResponderEliminar
  64. 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

    ResponderEliminar
  65. 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.

    ResponderEliminar
  66. 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.

    ResponderEliminar
  67. 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 :\

    ResponderEliminar
  68. Muchas Gracias por tus consejos amigo, en verdad busque mucho tiempo este codigo.

    Queria consultar si asi como se pone una imagen, tambien se podria poner una animacion en flash.

    Gracias por tu dedicacion.

    ResponderEliminar
  69. Lamentablemente para fash no servirá, desconozco si haya algún script específico que haga eso.

    ¡Saludos!

    ResponderEliminar
  70. Tengo una consulta, la imagen al momento de hacerse grande queda por debajo de otros elementos del blog, haciendo que sea molesto a la hora de verla en tamaño real. ¿Como puedo hacer que al momento de agrandarse quede por delante de todos los elementos del blog? Suerte! Excelente blog.

    ResponderEliminar
  71. La cosa esque uso este codigo dentro del Marquee.

    ResponderEliminar
  72. No creo que haya modo de hacer que quede enfrente de todo, al menos no con este método.

    ResponderEliminar
  73. HOLA!!.... Probe esto y me encanto queda muy bueno en mi pagina... pero me gustaria que las imagenes tengan un marco color blanco y que tenga un poco de sombra... s epuede hacer? Gracias!

    ResponderEliminar
  74. Hola Cristian,

    Sólo agrega esto dentro del código:

    style="border:10px solid #000; box-shadow: 0 0 5px #333; -webkit-box-shadow: 0 0 5px #333; -moz-box-shadow: 0 0 5px #333;"

    ResponderEliminar
  75. A mi tambien me ha gustado mucha gracias desde brasil

    ResponderEliminar
  76. hola potro, excelente tu truco, me gustaria que en ves de hacer zoom a la imagen esta se pueda cambiar en un frame, algo asi como un tabla de 2 columas, 1era col la foto grande, y la 2da col la foto pequeña, al pasar el mouse cambie la foto de la 1era col
    gracias

    ResponderEliminar
  77. algo como esto:

    http://us.levi.com/product/index.jsp?productId=3536128&kwCatId=&kw=552&origkw=552&sr=1

    ResponderEliminar
  78. Hola Top Brand Jeans,

    Lo que necesitas es una especie de galería de imágenes para poder conseguir eso.
    Algo muy parecido es lo que explican en Vagabundia, sólo que tú en lugar de poner números de abajo podrías colocar imágenes en miniatura:
    http://vagabundia.blogspot.com/2011/04/transiciones-sliders-y-slideshows.html

    ResponderEliminar
  79. Gracias por el enlace, muy util, pero no se podria hacer con puro html, gracias

    ResponderEliminar
  80. Probablemente se podría con puro CSS, el problema es que cuando se usa sólo CSS en ese tipo de galerías se corre el riesgo de que no se vea bien en todos los navegadores.
    Esa opción me parece bastante acertada pues si te fijas el script es sumamente corto por lo que no tardará prácticamente nada en cargar.

    ResponderEliminar
  81. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  82. hola,no entiendo en qué parte de la programación tengo que poner el código,si alguien pudiera explicarme por favor,saludos!

    ResponderEliminar
  83. En la entrada donde escribes tu post, ahí es donde debes pegar el código, sólo debes hacerlo estando en la pestaña Edición de HTML y no en la de Redactar. También es importante que una vez que lo pongas no cambies a la pestaña Redactar.

    ResponderEliminar
  84. Gracias Potro, por compartir tus conocimiento, ya lo aplique en mi pagina... http://sgte.comoj.com/

    Saludos

    ResponderEliminar
  85. Gracias a ti por tu visita y comentario!

    ResponderEliminar
  86. Gracias por tu publicación, ha sido de mucha ayuda.
    Necesito subir un archivo de mi mismo portatil en vez de una foto desde una URL y agrandarla con el mismo ejemplo que pones aquí.
    Sería posible eso?
    Gracias por adelantado

    ResponderEliminar
  87. Hola Ricar,

    Cualquier elemento que quiera ser visible en Internet debe estar subido antes en la red, así que primero debes subir la imagen a un hosting para obtener su URL.

    ResponderEliminar
  88. bueno gracias por el codigo pero como puedo centar la imagen cuando se agrande gracias

    ResponderEliminar
  89. De hecho esa ya está centrada, si te fijas en el código no hay ninguna propiedad que lo ajuste, eso lo hace automáticamente el script.

    ResponderEliminar
  90. Hola Potro. Es la primera vez que entro a tu blog y ya utice un par de tus tutos. Estoy usando la plantilla SENCILLO de Blogger, pero ni este truco ni el de "Agrandar una imagen al pasar el mouse" me han funcionado, es decir la imagen no cambia en nada. Cual podria se el problema? En el caso de que fuera la plantilla, me podrias recomendar alguna?. Desde ya gracias por tu atencion

    ResponderEliminar
  91. Hola Jesica, ¡bienvenida a Ciudad Blogger!
    Desde hace unos días Blogger ha implementado un sistema para ver las imágenes, es por eso que no se ejecuta este o el otro método para agrandar las imágenes. Si deseas hacerlo primero tendrías que quitar esa nueva característica, sólo así podrás ver los efectos de agrandar las imágenes.

    ResponderEliminar
  92. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  93. Hola El Potro, necesitaria los mismo que dices en el comentario 39 pero con abriendo en una ventana nueva. Un saludo

    ResponderEliminar
  94. Hola amaltea,

    Después de "URL del enlace" deja un espacio y después agrega esto:
    target="_blank"

    Aquí hay más información sobre cómo abrir enlaces en una ventana nueva:
    http://ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html

    ResponderEliminar
  95. Hola Potro.
    Me gustaría que al pasar el ratón por encima de una frase (sólo texto), apareciera una imagen emergente.
    De poder hacerse, ¿que código debo poner en la entrada?.
    Un saludo.

    ResponderEliminar
  96. Hola Tapestryworkerman,

    Supongo que con algún tooltip podría hacerse. Tal vez con este, ya que no todos los tooltips permiten imágenes:
    http://ciudadblogger.com/2010/08/tooltips-con-jquery.html

    Saludos.

    ResponderEliminar
  97. Gracias Potro.
    Lo pruebo en breves y te cuento, es un efecto que quería haber aplicado en la última entrada, pero el botón de publicar me tira mucho cuando tengo la entrada preparada, a la próxima le hago un hueco ;)
    Un saludo.

    ResponderEliminar
  98. Hola El Potro: quisiera me ayudes, tengo un problema con una foto y evidentemente, mi plantilla (creo yo) la foto es la de un muchacho delante de una casa. esta bien debajo a la derecha en mi pag.

    http://www.fmamerica.com.ar/index.php?
    option=com_content&view=category&layout=blog&id=78&Itemid=101

    lo que deseo es que la imagen se expanda y vaya al medio de la pantalla, generando sombra al resto de la pantalla.
    el problema que tengo es que se expande pero no de la forma que quiero y además no se ve toda la imagen.

    desde ya muchas gracias.
    un saludos desde Argentina.

    ResponderEliminar
  99. Hola tinchus,

    Con este método no es posible, quizá lo que estás buscando es un tipo de ventana modal. Con Shadowbox podrías hacer que la pantalla se oscurezca y la imagen se centre en la pantalla.

    Saludos.

    ResponderEliminar
  100. Hola Potro.

    Una cuestión. Para poner marco a imágenes utilizo:

    .marco_img {
    padding:1px;
    border:5px solid #ccc;
    background:#fff;
    text-align:center;
    height:340px; width:560px;
    margin-top:10px
    }

    aplicándolo a la imagen así:

    div class="marco_img"
    img src="http://dl.dropbox.com/u/17409693/images/Post/04122011.jpg" style="height: 340px; width: 560px;"

    Esto es aplicable para imágenes de 340x560 px. pero ¿como puedo poner este marco a imágenes independientemente de cuál sea su tamaño?

    ResponderEliminar
  101. Hola tortugasveloces,

    Elimina de los estilos las medidas que tienes:
    height:340px; width:560px;

    Eliminándolo se aplicará para imágenes de cualquier tamaño.

    ResponderEliminar
  102. Hola Potro. Gracias por tu interés.

    Hay algo que falla como puedes ver aquí:
    http://21blogers.blogspot.com/

    Del estilo he eliminado las medidas:
    .marco_img {
    padding:1px;
    border:5px solid #ccc;
    background:#000;
    text-align:center;
    }

    En la primera imagen las he respetado porque la imagen es más ancha que el post:

    div class="marco_img"
    img src="http://dl.dropbox.com/u/17409693/images/Post/19112011.jpg" style="height:340px; width:560px;"/ /div

    En la segunda están retiradas:
    div class="marco_img"
    img src="http://dl.dropbox.com/u/17409693/images/Post/30012011.jpg" / /div

    Pero no se ajusta al tamaño de la imagen, sobre todo abajo de la imagen. En algún sitio hay un padding o un margin que no controlo. ¿podemos solucionarlo?

    Gracias

    ResponderEliminar
  103. No agregues la clase dentro de un DIV, agrégaselo directo a la imagen, es decir, que la imagen quede así:

    <img class="marco_img" src="http://dl.dropbox.com/u/17409693/images/Post/30012011.jpg" style="padding: 3px;">

    Y los estilos manéjalos así:

    .marco_img {
    border: 5px solid #CCC !important;
    background: black;
    margin-top: 10px;
    }

    ResponderEliminar
  104. Eres grande, mu grande!!! Todo como quería. Muchíiisimas gracias.

    ResponderEliminar
  105. me gusto mucho lo coloque en la seccion de mis secciones actualizadas... las cuales las tengo con una imagen.. en mi caso las imagenes estan en 125 px y al pasar el puntero cambia a 130 px ... solo para darle una apariencia de movimiento entre los tres banner a los cuales les puse un link.. muchas gracias potro.. como ves soy fan ya de tu sitio.. y me gusto por ke no tengo ke poner scrips de mas y asi...

    ResponderEliminar
  106. La verdad es que también me encantan este tipo de trucos en los que no hay que agregar tantos códigos, además el resultado es muy bueno :)
    Gracias por ser lector asiduo de este blog :)
    Saludos!

    ResponderEliminar
  107. Buenas, queria utilizar este codigo para elevar una imagen al pasar el raton por ella 20px... seria posible??.. saludos

    ResponderEliminar
  108. Hola Juny, ¿pero quieres agrandarla o sólo moverla de lugar?
    Si sólo quieres subirla entonces mira esta entrada:
    http://ciudadblogger.com/2009/12/efecto-pushbutton-en-las-imagenes.html

    Sólo cambia el top:1px; por bottom: 20px;
    Eso hará que la imagen suba 20px al pasar el cursor sobre ella.

    ResponderEliminar
  109. .pushbutton:hover {
    position: relative;
    bottom: 20px;
    }



    el efecto no se ejecuta correctamente.. es una imagen situada en un sitio de la pagina web.. alguna idea??.. gracias por tu respuesta anterior ;)

    ResponderEliminar
  110. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  111. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  112. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  113. ¿este codigo se puede poner en Microsoft Expression Web 4?
    y si sepuede ¿me podeis decir como?
    gracias

    ResponderEliminar
    Respuestas
    1. No he usado esa plataforma, todos los códigos de este blog son probados únicamente para Blogger.

      Eliminar
    2. si se puede, pero tengo un prolema, tengo barias fotos en la misms linea,la de un lateral no se ve centrada cuando se agranda,http://www.eloyestilista.es/FOTOS.htm

      Eliminar
    3. De hecho sí está centrada, pero se centra respecto a la imagen pequeña, no al ancho de la ventana del navegador.
      Para esos casos quizá te convenga usar el otro método:
      http://ciudadblogger.com/2009/06/agrandar-imagen-al-pasar-el-mouse.html

      Eliminar
  114. si se puede, pero tengo un prolema, tengo barias fotos en la misms linea,la de un lateral no se ve centrada cuando se agranda, y queria que se viera centrada os dejo el enlace http://www.eloyestilista.es/FOTOS.htm

    ResponderEliminar
  115. Hola, tengo una imagen y me gustaria que al pasar el mouse por la imagen solo dse agrandara la parte en la cual esta el mouse y no toda la imagen, es urgenteeeeeee graciasss

    ResponderEliminar
    Respuestas
    1. Ya te he respondido en la otra entrada Kattin, no hace falta duplicar las preguntas ;)

      Eliminar
  116. uan pregunta si tengo un "Class=" introducido, puedo poner otro..

    ResponderEliminar
    Respuestas
    1. ¿Dos clases en una misma imagen? Sí, por ejemplo:
      class="ejemplo1 ejemplo2"

      Sólo los separas con un espacio.

      Eliminar
  117. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  118. Hola Potro, me gustaria utilizar este truco para todas las fotografias, pero para siempre sin ir poniendo en cada entrada ese codigo.
    ¿Cómo lo hago? Me lo puedes decir?
    GRacias

    ResponderEliminar
    Respuestas
    1. No hay una forma automática, se tiene que hacer manualmente una por una :/

      Eliminar
  119. Hola, me gustaría saber como hacer que las imágenes grandes no se salgan del margen de la plantilla, esto es a lo que me refiero: http://4.bp.blogspot.com/-wQTGBWK_tyw/T4SHNYiqZxI/AAAAAAAABwk/-6E9Qlarrus/s1600/.....png

    yo he usado plantillas en las que por más grande que fuera la imagen se ajustaba, así que dejaba las imágenes así como estaban, y ahora tengo ese problema al cambiar de plantilla, porque la que estoy usando ahora no hace esto, en la que se ve en la imagen, (la plantilla que uso) las imágenes se ajustan un poco, pero no del todo, hay imágenes que se sobrepasan mucho más y por eso pregunto si hay algún código o algo para que no pase esto, y así no ir imagen por imagen para que no se salgan de ese margen T^T

    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola yui, podrías incluir en los estilos un ancho máximo para las imágenes, por ejemplo:
      .post-body img {
      max-width: 85%;
      overflow:hidden;
      }

      Eliminar
  120. Gracias Potro.

    Sólo una pregunta... cómo hago para que al hacerse grande siga centrado?? ya que al pasar el mouse se hace más grande pero se carga a la derecha. Esta es la página potro: http://www.dolcecapricciomty.com/

    Felicidades por tu blog, es el mejor que existe en la red.

    ResponderEliminar
    Respuestas
    1. Gracias Luis.
      Podrías aplicarle un margen izquierdo al pasar el cursor, para que se recorra, por ejemplo:
      <img height="175" onmouseout="this.width=873;this.height=175;this.style.margin='0';" onmouseover="this.width=1023;this.height=205;this.style.margin='0 0 0 -135px';" src="http://dl.dropbox.com/u/48715328/Banner%20del%20concurso.jpg" width="873" />

      Eliminar
    2. Muchisimas gracias Potro... ya lo apliqué y funciona, sólo que ahora me parece que se carga hacia el otro lado. Disculpa la molestia.

      Eliminar
  121. Listo Potro, muchisimas gracias. Utilicé -90 en lugar de -135 en margin y quedó centrado, te lo agradezco muchisimo. Aprovechando... tienes alguna entrada donde expliques cómo poner música de fondo en blogger??
    Saludos.

    ResponderEliminar
    Respuestas
    1. Mira el la categoría de Música, ahí hay algunos reproductores.

      Eliminar
  122. hola se podra hacer lo mismo con los reproductores de los videos , es decir aki veras mi blog estoy modificando cosas para achicar espacios y me gustaria ke al pasar el mouse sobre el video este pueda ampliarse al tamaño presentado en el ejemplo -- o algo parecido a ese efecto agradeceria mucho tu respuesta gracias

    http://lookedvideos.blogspot.com.ar/2012/04/b-52-roam-video-oficial-letra-ingles.html

    ResponderEliminar
    Respuestas
    1. No veo que el video de esa página tenga algún efecto, pero quizá quieras usar Shadowbox:
      http://ciudadblogger.com/2010/04/shadowbox-ventanas-modales-multimedia.html

      Eliminar
  123. si gracias seria algo de lo ke busco muchas gracias por tu respuesta eres muy amable por ayudar

    ResponderEliminar
  124. hola necesito saber si hay mouse que al pasarlos sobre imagenes o palabras puedo agrandarlas. soy profesora de niños con baja vision y seria muy util para ellos
    gracias

    ResponderEliminar
    Respuestas
    1. Hola Andromeda, con imágenes sí, el de esta entrada es uno de los métodos que conozco, pero con imágenes sólo se me ocurre algo como esto:
      http://ciudadblogger.com/2009/05/cambiar-tamano-de-letra-del-blog.html

      Eliminar
  125. eso no se hace con javascript!!!!!!!! gastas muchas lineas
    se hace con CSS 3
    el comando hover
    y asignamos el width y height, es mas podemos mejorarlo y añadir el desliz del agrandamiento

    ResponderEliminar
    Respuestas
    1. Se hace con Javascript, se hace con CSS, y se hace con librerías. Las opciones son muchas, dejemos que cada quien tome la que más le convenga ;)

      Eliminar
  126. Estimado el Potro.

    Excelente tu ejemplo, lo probé y todo OK. Podrías ayudarme para que cuando se muestre la imagen grande lo haga en primer plano de la página web, ya que tengo otros módulos que se montan encima de la imagen agrandada.

    ResponderEliminar
  127. Estimado El Potro.

    Excelente tu indicaciones. Lo probé y todo OK. Pero podrías ayudarme para la imagen agrandada aparezca en primer plano de la pagina, ya que tengo posiciones en mi pagina que se monta en la imagen agrandada.

    Gracias...

    ResponderEliminar
    Respuestas
    1. Hola Eduardo, habría que ver dónde lo has puesto, tal vez añadiendo después de <img esto lo resuleva:
      style="z-index:99999999999;"

      En caso de que no funcione habrá que ver, cómo dije, dónde lo has puesto para revisar los estilos de los demás elementos.

      Saludos.

      Eliminar
  128. Disculpa, lo que yo busco es como hacer para colocarla en el lado izquierdo pero siempre agrandar al pasar el ratón, o sea! que no se coloque en el lado que trae por defecto, por ejem, así como la tuya que la colocaste al centro, me explico? Podrías ayudame por favor! Gracias, te lo agradezco. :) yo soy usuario jimdo. :) Saludos.

    ResponderEliminar
  129. Hola! hice un comentario antes pero no lo veo, te decía que como le hago para posicionar la imagen en otro lado que no sea el que trae por defaul, o sea, colocar la imagen en el lado izquierdo, derecho o en el centro como la tuya, pero siempre que se agrande al pasar el raton. Muchas Gracias.

    ResponderEliminar
    Respuestas
    1. Hola mira esta entrada para que veas cómo encerrar el código de la imagen y alinearla:
      http://ciudadblogger.com/2009/12/alinear-elementos-y-gadgets.html

      Eliminar
  130. Sabes como hacer un tipo mapa de google??.... que cueando pases el mause ensina de una parte de la imagen se haga mas grande y ademas de pueda poner comentarios o notas o algo por el estilo.. Te lo agradeceriaa.

    ResponderEliminar
    Respuestas
    1. No sé, pero en Google Maps puedes crear tus propios mapas con tus notas.

      Eliminar
  131. Alguien sabe si puedo hacer este efecto pero al encender mi PC se abra una imagen en pequeño y al pasar el mouse se amplie, Gracias saludos. me pueden escribir a mi correo
    hectormilton@gmail.com

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger