Hacker of the Web
Tus ideas en código!...y mas

Ampliar imágenes con mouse y Javascript

Un efecto bastante útil para aquellos donde el espacio es muy reducido o quieren aprovechar el espacio al máximo. Puedes hacer que al paso del mouse se abra otra imagen o cambie de tamaño, también se puede que al hacer un clic se amplíe o cambie de imagen y al hacer dos clics se reduzca o cambie por la imagen inicial.

Puedes usarlo como te des a entender incluso puede ser un menú, con dos imágenes y unos links, CSS y queda el menú, es un decir. puede ser lo que creas mejor para tu sitio.

[1] Solo añade el código donde lo quieras utilizar. Algunos ejemplos con sus respectivos códigos.


Con un clic, aumenta de tamaño y con dos se reduce.
capricornio
<img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/"
width="50"
onclick="javascript:this.height=100;this.width=100"
ondblclick="javascript:this.width=50;this.height=50"/>

El texto en color:
rojo es la url de la imagen.
azul es el ancho y alto de la imagen reducida.
verde es el ancho y alto de la imagen original.




Al pasar el mouse se agranda la imagen
capricornio
<img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/"
width="20"
onmouseover="javascript:this.height=49;this.width=49"
onmouseout="javascript:this.width=20;this.height=20"/>

El texto en color:
rojo es la url de la imagen.
azul es el ancho y alto de la imagen reducida.
verde es el ancho y alto de la imagen original.




Al pasar el mouse se abre otra imagen. Que tal puedes ver el mini choche, es solar y a solo 13 Euros Increible!
capricornio
<img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/s400/capricornio.exe"
onmouseover="javascript:this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij-PGoWNKbZ9GpPQAwK6grSQ5Q6JNjNZbUVJVRN3WiaIa7_mwyDKt8z1OoVNAVx67BTOxYm5J88NdjfEplazt0mPOuxPLliwYd34dQ33rd3DL7v_Ix0OPMVjrYhL4vLnDWVmVDVpMf5FqT/s400/mini-coche-solar.exe';"
onmouseout="javascript:this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/s400/capricornio.exe';"/>

El texto en color:
rojo es la url de la primer imagen.
azul es la url de la segunda imagen.



/!\ Las imágenes que estoy utilizando estan alojadas en blogger, pero puedes alojarlas donde quieras. Y de cualquier tamaño.

#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

22 comentarios !

Unknown dijo...

muchas gracias esta muy interesante tu articulo...obtare por pornerlo en practica en mi blog de prueba..gracias

Unknown dijo...

Hola!! .::Vanderlof::., pues gracias a ti por comentar en este blog de ayuda.

y espero que sigas comentado.

:)

Uno mas del monton dijo...

Gracias me sirvió :)
Lo use para hacer como un menu en esta web
http://expresandome.com.ar

Y tambien hice unas entradas en mi blog con este contenido Saludos, Muy lindo el blog

http://cosasparaelblog.com.ar/2009/02/cambiar-de-imagen-al-pasar-el-mousse.html

http://cosasparaelblog.com.ar/2009/02/ampliar-imagenes-al-pasar-con-el-mouse.html

Unknown dijo...

Hola!!

Uno mas del monton, lindo el menú y gracias por el link de tu entrada, nos vemos!!

Anónimo dijo...

Muchísísimas gracias!!! Está super esplicado, me es muy útil para mi página. Muchas gracias de nuevo. Saludos!!!

Unknown dijo...

De nada Pepe, para eso estamos aqui xD.

Unknown dijo...

Amigo esto se puede convertir en un codigo para una hoja de estilo CSS?

Unknown dijo...

Italo disco style. Claro que se puede, es mas haré una entrada y te la dedico, por que es mucha la información

Ese Maldito Kaspersky dijo...

Hola SaNTy:
Gracias de antemano, pues ya he utilizado uno de tus códigos, en concreto el de agrandar la imagen cuando pasas el mouse. Pero como no podía ser de otra forma, la solución de un problema suscita plantearse otros de mayor envergadura, así que te comento: Las imágenes se agrandan de izquierda y arriba, a derecha y abajo, de tal manera que la esquina superior izquierda se queda en punto muerto, y todo lo demás se desplaza. Mi pregunta es "¿Podría desplazarse la imagen de derecha a izquierda de tal manera que ese punto muerto fuera la esquina superior derecha?".
Un saludo y muchas gracias.

Unknown dijo...

Ese Maldito Kaspersky,

Lo que me preguntas es muy sencillo de resolver, solamente necesitas agregar lo siguiente dentro de la etiqueta IMG:

style='float:right;'

De manera que quede de la siguiente forma:

<img src='_blank.gif' style='float:right;' />

Timoteo bm dijo...

gracias

entren a mi blog haciendo click en mi nombre.

Gracias

Timoteo bm dijo...

la imagen se me pone en error (cuadradico con una X)

Unknown dijo...

Timo y Lucky, Si se pone en error, es por que la imagen no existe y tendrás que colocar otra xD.

suerte!!

Elio Eduardo Rivera dijo...

Buenisima la PAGINA.
¿Donde debo pegar el codigo para agrandar la imagen al pasar el mouse?
MUCHAS GRACIAS POR ESTE ARTICULO.

Unknown dijo...

Elio Eduardo Rivera, gracias a ti por comentar xD!!

El código puedes pegarlo en cualquier entrada, o incluso si así lo prefieres en algún gadget de tu blog.

blog creado por J.A.N dijo...

me sale una x en la imagen, podrias describir como hacer para pasar el mouse por encima de la imagen, lo he intentado de todas formas y nada. un saludo

Unknown dijo...

blog creado por J.A.N, Debes reemplazar los enlaces en color rojo y verde por las imagenes que quieres y si aun haciendo eso la imagen tiene una "x", es por que no se ha cargado completamente o no existe.

suerte!!

Rasengan dijo...

Hola esta muy bueno !! gracias !! :) tu haces apreser que un blog es mejor que una web! de verdad :) saludos gracias. pondre fotos en mi blog que se agranden :D

Rasengan dijo...

y porcierto como haces estos comentarios? esta buena dame el codigo? porfa :D es buena forma para comentar lo que quiero saver es como hacer un blog con mi plantilla y cosas asi a mi estilo :) que estes bien saludos.

Anónimo dijo...

hola perdon mi ignorancia, este codigo lo pego en el lugar donde quiero que vaya la imagen, y no necesito pegar ningun codigo en la carpeta css?

Anónimo dijo...

y porque las imagenes son un .exe?

Unknown dijo...

anónimo, son meramente explicativas, puedes poner cualquier extension de imagen (jpg, jpeg, png, gif), el .exe suena alarmante pero es una imagen.

gracias por comentar!


Página Principal
Arriba