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:
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.
Ciudad Blogger
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.
ResponderEliminarSaludos.
¿Ahora te digo Pepe o Snape? Jajaja.
ResponderEliminarEste 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!:)
ResponderEliminar¡Hola, Potro!
ResponderEliminarEste 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,
ResponderEliminarMuchas 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,
ResponderEliminarNo 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.
ResponderEliminarTengo 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,
ResponderEliminarCreo 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.
ResponderEliminarHola Dr. Pagé,
ResponderEliminarNo entiendo qué cuadro sale, verifica que la URL de la imagen es correcta, quizá ahí está el error.
Saludos.
Hola Potro
ResponderEliminarJunto 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,
ResponderEliminarForzosamente 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?
ResponderEliminarGracias.-
Hola guito,
ResponderEliminarHasta donde sé, oscurecer no se puede.
Saludos.
perdona el potro pero no soy capaz de hacer lo de la imagen
ResponderEliminarHola muzgo,
ResponderEliminar¿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?
ResponderEliminarya lo siento essque estoy muy verde...
gracias
Hola peri_erika,
ResponderEliminarLos 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:
ResponderEliminarMe 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,
ResponderEliminarQué 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:
ResponderEliminarQuisiera 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,
ResponderEliminarPrimero 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.
ResponderEliminarMi 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,
ResponderEliminarAgrega 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.
ResponderEliminarAhora 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,
ResponderEliminarEntonces cambia el padding por margin.
Saludos!
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.
EliminarPerfecto.
ResponderEliminarMuchísimas gracias.
No comprendo donde insertar el codigo, yo tengo la url de la imagen por ejemplo
ResponderEliminardonde inserto el codigo?
Gracias..
Hola Retroalimentacion del Ser,
ResponderEliminarEn 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..
ResponderEliminarLa 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.
ResponderEliminarYa 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 ?
ResponderEliminarHola Forrito,
ResponderEliminarYa 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?
ResponderEliminarosea..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,
ResponderEliminarClaro 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!
ResponderEliminarPor nada, me alegro haberte podido ayudar.
ResponderEliminarSaludos.
hola bueno soy nuevo en el blog y
ResponderEliminaresta 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,
ResponderEliminarSó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
ResponderEliminargracias 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.
ResponderEliminarHola Borest,
ResponderEliminarNo 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.
ResponderEliminarUmmm nop, sigue sin poder verse.
ResponderEliminarups, no se que pase,ya he intentado con otras personas y no hay problemas,bueno esperemos y se corrija ese problema.
ResponderEliminarAhora sólo veo información sobre Internetworks, cuando se corrija me comentas para entender un poco sobre tu problema.
ResponderEliminarSaludos.
Mira este es el codigo, talves y lo reconoscas,
ResponderEliminarte 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,
ResponderEliminarTu 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.
ResponderEliminarClaro, al ser miniaturas se ven mal al agrandarlas más del tamaño original.
ResponderEliminarQué 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.
ResponderEliminarah 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.
ResponderEliminarHola Borest,
ResponderEliminarEn 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.
ResponderEliminarPega antes de ]]></b:skin> esto:
ResponderEliminara:focus {
outline: none;
}
Saludos.
Ah ok,muchas gracias potro.
ResponderEliminarHola, aquí de nuevo.
ResponderEliminarEsta ú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.
ResponderEliminarO 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
ResponderEliminarHola:
ResponderEliminarTu 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,
ResponderEliminarSupongo 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
ResponderEliminareste 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,
ResponderEliminarSin 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
ResponderEliminarSaludos, 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
ResponderEliminarSi 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.
ResponderEliminarGracias, tienes razón, intenté con imágenes de mayor tamaño y funciona ok...
ResponderEliminarfelicitaciones 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/
ResponderEliminarUn 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.
ResponderEliminarHola potro.
ResponderEliminarsoy 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,
ResponderEliminarMuchas 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:
ResponderEliminarGracias 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.
ResponderEliminarQuizá 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 :\
Muchas Gracias por tus consejos amigo, en verdad busque mucho tiempo este codigo.
ResponderEliminarQueria consultar si asi como se pone una imagen, tambien se podria poner una animacion en flash.
Gracias por tu dedicacion.
Lamentablemente para fash no servirá, desconozco si haya algún script específico que haga eso.
ResponderEliminar¡Saludos!
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.
ResponderEliminarLa cosa esque uso este codigo dentro del Marquee.
ResponderEliminarNo creo que haya modo de hacer que quede enfrente de todo, al menos no con este método.
ResponderEliminarHOLA!!.... 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!
ResponderEliminarHola Cristian,
ResponderEliminarSó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;"
A mi tambien me ha gustado mucha gracias desde brasil
ResponderEliminarSaldos hasta Brasil, Luis :)
ResponderEliminarhola 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
ResponderEliminargracias
algo como esto:
ResponderEliminarhttp://us.levi.com/product/index.jsp?productId=3536128&kwCatId=&kw=552&origkw=552&sr=1
Hola Top Brand Jeans,
ResponderEliminarLo 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
Gracias por el enlace, muy util, pero no se podria hacer con puro html, gracias
ResponderEliminarProbablemente 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.
ResponderEliminarEsa 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.
Este comentario ha sido eliminado por el autor.
ResponderEliminarhola,no entiendo en qué parte de la programación tengo que poner el código,si alguien pudiera explicarme por favor,saludos!
ResponderEliminarEn 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.
ResponderEliminarGracias Potro, por compartir tus conocimiento, ya lo aplique en mi pagina... http://sgte.comoj.com/
ResponderEliminarSaludos
Gracias a ti por tu visita y comentario!
ResponderEliminarGracias por tu publicación, ha sido de mucha ayuda.
ResponderEliminarNecesito 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
Hola Ricar,
ResponderEliminarCualquier 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.
bueno gracias por el codigo pero como puedo centar la imagen cuando se agrande gracias
ResponderEliminarDe 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.
ResponderEliminarHola 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
ResponderEliminarHola Jesica, ¡bienvenida a Ciudad Blogger!
ResponderEliminarDesde 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.
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola El Potro, necesitaria los mismo que dices en el comentario 39 pero con abriendo en una ventana nueva. Un saludo
ResponderEliminarHola amaltea,
ResponderEliminarDespué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
Hola Potro.
ResponderEliminarMe 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.
Hola Tapestryworkerman,
ResponderEliminarSupongo 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.
Gracias Potro.
ResponderEliminarLo 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.
Ya habrá oportunidad entonces ;)
ResponderEliminarHola 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.
ResponderEliminarhttp://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.
Hola tinchus,
ResponderEliminarCon 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.
Hola Potro.
ResponderEliminarUna 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?
Hola tortugasveloces,
ResponderEliminarElimina de los estilos las medidas que tienes:
height:340px; width:560px;
Eliminándolo se aplicará para imágenes de cualquier tamaño.
Hola Potro. Gracias por tu interés.
ResponderEliminarHay 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
No agregues la clase dentro de un DIV, agrégaselo directo a la imagen, es decir, que la imagen quede así:
ResponderEliminar<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;
}
Eres grande, mu grande!!! Todo como quería. Muchíiisimas gracias.
ResponderEliminarme 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...
ResponderEliminarLa 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 :)
ResponderEliminarGracias por ser lector asiduo de este blog :)
Saludos!
Buenas, queria utilizar este codigo para elevar una imagen al pasar el raton por ella 20px... seria posible??.. saludos
ResponderEliminarHola Juny, ¿pero quieres agrandarla o sólo moverla de lugar?
ResponderEliminarSi 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.
.pushbutton:hover {
ResponderEliminarposition: 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 ;)
Este comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminar¿En cuál página lo has puesto?
ResponderEliminar¿este codigo se puede poner en Microsoft Expression Web 4?
ResponderEliminary si sepuede ¿me podeis decir como?
gracias
No he usado esa plataforma, todos los códigos de este blog son probados únicamente para Blogger.
Eliminarsi 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
EliminarDe hecho sí está centrada, pero se centra respecto a la imagen pequeña, no al ancho de la ventana del navegador.
EliminarPara esos casos quizá te convenga usar el otro método:
http://ciudadblogger.com/2009/06/agrandar-imagen-al-pasar-el-mouse.html
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
ResponderEliminarHola, 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
ResponderEliminarYa te he respondido en la otra entrada Kattin, no hace falta duplicar las preguntas ;)
Eliminaruan pregunta si tengo un "Class=" introducido, puedo poner otro..
ResponderEliminar¿Dos clases en una misma imagen? Sí, por ejemplo:
Eliminarclass="ejemplo1 ejemplo2"
Sólo los separas con un espacio.
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola Potro, me gustaria utilizar este truco para todas las fotografias, pero para siempre sin ir poniendo en cada entrada ese codigo.
ResponderEliminar¿Cómo lo hago? Me lo puedes decir?
GRacias
No hay una forma automática, se tiene que hacer manualmente una por una :/
EliminarHola, 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
ResponderEliminaryo 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.
Hola yui, podrías incluir en los estilos un ancho máximo para las imágenes, por ejemplo:
Eliminar.post-body img {
max-width: 85%;
overflow:hidden;
}
gracias! ya esta bien X3
ResponderEliminarGracias Potro.
ResponderEliminarSó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.
Gracias Luis.
EliminarPodrí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" />
Muchisimas gracias Potro... ya lo apliqué y funciona, sólo que ahora me parece que se carga hacia el otro lado. Disculpa la molestia.
EliminarListo 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??
ResponderEliminarSaludos.
Mira el la categoría de Música, ahí hay algunos reproductores.
Eliminarhola 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
ResponderEliminarhttp://lookedvideos.blogspot.com.ar/2012/04/b-52-roam-video-oficial-letra-ingles.html
No veo que el video de esa página tenga algún efecto, pero quizá quieras usar Shadowbox:
Eliminarhttp://ciudadblogger.com/2010/04/shadowbox-ventanas-modales-multimedia.html
si gracias seria algo de lo ke busco muchas gracias por tu respuesta eres muy amable por ayudar
ResponderEliminarhola 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
ResponderEliminargracias
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:
Eliminarhttp://ciudadblogger.com/2009/05/cambiar-tamano-de-letra-del-blog.html
eso no se hace con javascript!!!!!!!! gastas muchas lineas
ResponderEliminarse hace con CSS 3
el comando hover
y asignamos el width y height, es mas podemos mejorarlo y añadir el desliz del agrandamiento
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 ;)
EliminarEstimado el Potro.
ResponderEliminarExcelente 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.
Estimado El Potro.
ResponderEliminarExcelente 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...
Hola Eduardo, habría que ver dónde lo has puesto, tal vez añadiendo después de <img esto lo resuleva:
Eliminarstyle="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.
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.
ResponderEliminarHola! 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.
ResponderEliminarHola mira esta entrada para que veas cómo encerrar el código de la imagen y alinearla:
Eliminarhttp://ciudadblogger.com/2009/12/alinear-elementos-y-gadgets.html
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.
ResponderEliminarNo sé, pero en Google Maps puedes crear tus propios mapas con tus notas.
EliminarAlguien 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
ResponderEliminarhectormilton@gmail.com
Ni idea Hector.
Eliminar