Otro muy buen efecto

 

 

 

Este es el código

CODIGO

<img src="Tu imagen" onmouseover="this.width=500;this.height=400;" onmouseout="this.width=100;this.height=80;" width="100" height="80" alt="" />

En width=500;this.height=400 pones el tamaño de tu imagen o el tamaño en que quieres que se mire  y en width=100;this.height=80 el tamaño en miniatura

Escribir comentario

Comentarios: 90
  • #1

    Nisa (sábado, 11 diciembre 2010 01:08)

    Esta muy bien, lo probe pero al pasar el mouse se agranda la imagen pero no la ventana como la imagen de tu ejemplo aqui, asi que se ve solo la parte que cabe en la ventana de la imagen cuando esta chica

  • #2

    lagentemasfelizdelatierra (jueves, 03 febrero 2011 07:57)

    <img src="Tu imagen" onmouseover="this.width=500;this.height=400;" onmouseout="this.width=100;this.height=80;" width="100" height="80" alt="" />

  • #3

    latrastienda (sábado, 05 febrero 2011 02:20)

    Muchas gracias, buen truco, me servirá para utilizarlo en mi página.

    Saludos.

  • #4

    truco95 (sábado, 05 febrero 2011 10:47)

    Nisa: es porque no modificaste bien el width=500;this.height=400 esto lo cambias por el tamaño de la imagen original

    latrastienda: Gracias a ti por la visita :D

  • #5

    elreportedemalanzan (lunes, 07 febrero 2011 13:29)

    Por favor explicame como coloco la imagen que quiero poner junto con el código. Gracias

  • #6

    truco95 (lunes, 07 febrero 2011 13:33)

    elreporte: en donde dice Tu imagen tienes que poner la url de tu imagen sin borrar las comillas si no sabes como obtener la url mira este tutorial http://truco95.jimdo.com/trucos/como-subir-tus-propios-archivos/

  • #7

    Jose Ochoa castillo (lunes, 07 febrero 2011 20:02)

    Magnificas ayudas,nos hacen la vida mas placentera gracias

  • #8

    truco95 (lunes, 07 febrero 2011 22:03)

    José: Gracias muy amable

  • #9

    titeres expresivos (jueves, 24 febrero 2011 19:25)

    gracias por la ayuda que nos dan,.,.,.,.

  • #10

    tutosaxel (viernes, 25 febrero 2011 11:40)

    buen aporte

  • #11

    truco95 (viernes, 25 febrero 2011 18:26)

    titeres: gracias a ti por visitarnos :D
    tutosaxel: si es muy bueno :)

  • #12

    Magneto DJ (sábado, 26 febrero 2011 13:43)

    este truco si me gusto

  • #13

    truco95 (domingo, 27 febrero 2011 10:11)

    magneto: que bien, es muy llamativo e interesante para implementarlo

  • #14

    aldairlechuga (domingo, 06 marzo 2011 11:29)

    Hola daniel tengo este codigo y para mi pagina Jimdo no me deja poner el hipervinculo me podrias ayudar?

    <center><a href="http://aldairlechuga.jimdo.com/acerca-de/"><center><img src="http://i52.tinypic.com/2w1utl3.png" onmouseover="this.width=400;this.height=140;" onmouseout="this.width=200;this.height=70;" width="200" height="70" alt="" /></center></a>


    creo que lo tengo todo bien pero nose que pasa...='(

  • #15

    aldairlechuga (domingo, 06 marzo 2011 11:31)

    JaaJaa perdon ya vi el error tengo un center entre las imagenes =P Pero gracias aun asi =)

  • #16

    truco95 (domingo, 06 marzo 2011 17:00)

    aldairlechuga: jajaj si pero que bueno que ya está :D

  • #17

    toxick-life (lunes, 07 marzo 2011 00:03)

    Holaa!.Pues.nadamas.para.ver.si.me.das.el.codigo
    para.que.mi.imagen.salda.asi.como.la.tuya.pegada.

    hasta.la.izquerda.va.D.
    gracias

  • #18

    truco95 (lunes, 07 marzo 2011 15:03)

    toxick: solo tienes que copiar el código tal como lo doy

  • #19

    toxick-life (lunes, 07 marzo 2011 21:44)

    pero..yo.lo.quier.asi..unas.imagebes.pegadas.
    a.la.izquierda!

  • #20

    toxick-life (martes, 08 marzo 2011 13:23)

    e.puedes.dar.tu.correo.para.charlar!.;D..Porfa!

  • #21

    alDaiR (domingo, 13 marzo 2011 15:04)

    hola.danel.soy.aldair..

    solo.para.pedirte.tu.correo.tengo.varias.paginas.web.
    espero.me.lo.despara.platicar.sale..

    ;D

  • #22

    truco95 (miércoles, 16 marzo 2011 17:37)

    toxick: claro, es edaragatwo@hotmail.com

  • #23

    tiaggo-17 (domingo, 27 marzo 2011 15:00)

    oye amigo muy bueno el código pero necesito uno que sea igual y que ademas baya con link.

  • #24

    moises (martes, 26 abril 2011 17:57)

    hola tengo una pagina jimdo www.centollito-djpascual.com y no se como ponerlo peodon por que soy nuevo gracias

  • #25

    truco95 (viernes, 03 junio 2011 17:49)

    moises: solo tienes que pegarlo como un elemento widget html

  • #26

    Diego (miércoles, 29 junio 2011 13:59)

    Hola necesito esto para unas entradas para mi blog de blogger como es posible poner este codigo en la entrada? o ai alguna forma de ponerlo en el html asi cuando solo pasan el mouse se hace grande?

  • #27

    sebaz (jueves, 04 agosto 2011 17:32)

    men quisiera saber como abrir un pop up desde un botón colo lo que haces en la opción como instalar

  • #28

    delapauta (domingo, 28 agosto 2011 13:37)

    esta bien jevi

  • #29

    conferencista1 (sábado, 03 septiembre 2011 10:26)

    Hola! Gracias por los excelentes aportes e ideas.
    Me gustaría utilizar este recurso. Sin embargo no logro construir la URL de la foto y en tutorial del enlace esta inactivo.
    ¿Podrías indicarme como obtener la url de la foto?
    Mil gracias.

  • #30

    truco95 (jueves, 08 septiembre 2011 20:53)

    diego: si no me equivoco solo cuando estés escribiendo la entrada dale -edicion de html- y pega ahí el código :)

    conferencista: mira este tutorial para obtener la url http://truco95.jimdo.com/trucos/como-subir-tus-propios-archivos/

  • #31

    conferencista1 (viernes, 09 septiembre 2011 07:59)

    Gracias! Resultó muy sencillo y logré hacerlo.
    Esta página tiene recomendaciones muy útiles y muy fáciles de aplicar, particularmente para los aficionados... como yo.

  • #32

    polo (domingo, 20 noviembre 2011 22:52)

    me gustaria usar este codigo pero como puedo agregarle o usalo como link

  • #33

    truco95 (martes, 22 noviembre 2011 02:38)

    conferencista1: muchas gracias y que bueno que lo hayas podido hacer :D

    polo: lo siento pero ahorita no hay forma de hacerlo así

  • #34

    alejandro lopez (viernes, 25 noviembre 2011 00:08)

    Amigo quisiera que por favor me ayudaras pero que al pasar el mouse por un texto,se reproduzca lo que ese texto contiene.osea algo así como que la pagina web al abrirla el usuario y pase el cursor sobre dicho texto o imagen,se produzca el sonido diciendo que se esta tocando,esto es para que las personas con discapacidades visuales logren obtener la información presentada,GRACIAS

  • #35

    alejandro lopez (viernes, 25 noviembre 2011 00:11)

    POR FAVOR ENVÍAME UN LINK O TU CORREO PARA QUE ME ASESORES,MI CORREO ES alejandro3608@hotmail.com,nuevamente mil GRACIAS

  • #36

    truco95 (viernes, 25 noviembre 2011 14:03)

    alejandro: siento no poder ayudarte ya que no sabemos nada sobre escript o sobre el editor que mencionas, te recomiendo que publiques tu pregunta en un foro ya que ahí hay personas expertas que pueden guiarte

  • #37

    truco95 (viernes, 25 noviembre 2011 14:03)

    alejandro: siento no poder ayudarte ya que no sabemos nada sobre escript o sobre el editor que mencionas, te recomiendo que publiques tu pregunta en un foro ya que ahí hay personas expertas que pueden guiarte

  • #38

    alse (lunes, 19 diciembre 2011 21:23)

    Amigos muchas gracias . Estoy implementando el truco, me esta funcionando bien aunque espero mejorarlo. Muchas gracias, estoy ensayando. Gracias por tu ayuda.

  • #39

    william (martes, 15 mayo 2012 12:33)

    <img src="imagenes/Productos/WALLDECOR/wall4.png" onmouseover="this.width=120;this.height=75;" onmouseout="this.width=102;this.height=55;" width="102" height="55" alt="" />

    puse el código y funciona bien salvo un detalle yo quiero que se agrande del medio hacia los lados pues lo tengo centrado pero sólo me agranda hacia abajo y hacia la derecha

  • #40

    truco95 (miércoles, 16 mayo 2012 16:39)

    William: eso no es posible cambiar, es un efecto practicamente configurado por si solo, lo siento.

  • #41

    Rafa (miércoles, 30 mayo 2012 12:17)

    es posible insertar un enlace para que cuando se agrande pinchando vaya a otra url

  • #42

    www.panoramadigital.jimdo.com (martes, 19 junio 2012 00:48)

    hola hola hola

  • #43

    flojo (miércoles, 04 julio 2012 20:54)

    gracias amigo me gusto y me sirvio

  • #44

    djlucasoficial (martes, 10 julio 2012 11:02)

    Men, Yo pongo todo bien ,, el URL Dentro de las "" y me sale el link solo :/ Ayudame!

  • #45

    asda (martes, 10 julio 2012 22:47)

    amaria tu web si quitaras los putos anuncios que no dejan ver tu post que se ve que es muy bueno pero no puede ver ni madres por tus chingaderas de anuncios

  • #46

    truco95 (martes, 10 julio 2012 23:51)

    rafa: me temo que no es posible.

    djlucas: que url pones? tiene que ser la de tu imagen.

    asda: si mantienes presionado Ctrl + Alt y mueves el scroll hacia atrás se solucionará.

  • #47

    jorge (sábado, 18 agosto 2012 07:24)

    no se donde poner el codigo,rtengo varias paginas con varias fotos en cada una.Debo ponerlo en cada pagina y para cada foto
    y la url es el nombre de mi pagina o el archivo dionde estan las fotos

  • #48

    truco95 (domingo, 19 agosto 2012 22:29)

    Esto truco no es para poner enlace, sólo la imagen. Pones la URL de tu imagen donde dice "Tu imagen"

  • #49

    daniel (lunes, 03 septiembre 2012 15:44)

    muy buenos tus trucos

  • #50

    about (viernes, 28 septiembre 2012 10:49)

    Hola, genial los recursos que tienes, pero estoy intentando agrandar una imagen al pasar el mouse de un boton flotante, que a su vez incorpore un link que al hacer click sobre el boton me dirija a otra pagina web...jajajajjaja...me ayuda alguien a llevar a cabo semejante reto???Creo que hay mas de uno que desearia saber como se hace. Un abrazo y nuevamente gracias.

  • #51

    aura (jueves, 01 noviembre 2012 11:42)

    uauuuuuuuuuuuuuuuuuuu superrr.,... me encanto.

  • #52

    samsara (miércoles, 14 noviembre 2012 06:57)

    buenas, muy buen truco.
    solo tengo un problema, y es que la miniatura tiene muy mala calidad y al ampliarse se ve muy pixelada. Como puedo hace que la ampliación provenga de una imagen de mayor calidad o como hacer una miniaura que tenga muchísima calidad?
    muchas gracias

  • #53

    samsara (miércoles, 14 noviembre 2012 08:02)

    ya lo solucione. Pero me encuentro con un nuevo problema. Tengo una galería de imágenes en miniatura. Cuando utilizo este código y se agranda la imagen, esta aparece por detrás de las otras y no se ve.
    como puedo hacerlo?

  • #54

    Federico Bianchi (viernes, 16 noviembre 2012 23:40)

    Donde lo pongo antes o despues de la imagen ?

  • #55

    Odalis Rivas (martes, 19 marzo 2013 19:03)

    disculpa en donde le pongo ese codigo ?

  • #56

    MARIANA (miércoles, 20 marzo 2013 17:35)

    ESTA MUY SUAVE

  • #57

    Oscar (viernes, 22 marzo 2013 09:56)

    Hola me gustaria saber como pongo para que enviar me llegue a mi correo y en que parte lo pongo Gracias

  • #58

    Juicer Review (jueves, 18 abril 2013 04:32)

    I shared this upon Facebook! My friends will definitely enjoy it!

  • #59

    Free Videos (sábado, 22 junio 2013 18:58)

    Gracias

  • #60

    juanito (viernes, 05 julio 2013 10:54)

    mmm buena aunque le falta un pokito mas para que sea exelente

  • #61

    Mariela (jueves, 11 julio 2013 15:56)

    Hola! Muchisísimas gracias por el aporte! Logré poner el código como link, funciona de maravilla, salvo porque estoy armando una biblioteca, que tiene 5 estantes, con 4 libros cada uno. Para ello armé una tabla. La cuestión es que cuando aumenta la imagen sobre la cual paso el mouse, se distorsiona el diseño de la tabla (para hacerle lugar al libro que aumentó) y desparrama los demás libros como puede. Me hace un desastre. Una vez que quito el mouse todo vuelve a la normalidad, pero es un efecto indeseado

  • #62

    Flor Dávila (lunes, 05 agosto 2013 14:52)

    Me ayudarías mas de lo que imaginas si me dices como se hace para agrandar la imagen pero colocarla en otro lado que no sea el que viene por defaul, o sea! Yo quiero agrandar una imagen que vaya al lado izquierdo de mi blog, y no tengo ninguna idea de como hacerlo. Gracias

  • #63

    sapcar (miércoles, 07 agosto 2013 17:55)

    Muy buenos tips, gracias y éxito

  • #64

    Flor Dávila (sábado, 24 agosto 2013 14:03)

    Hola, ya hice el truco pero veo que en la tuya no se pierde calidad, en la mía si. Sabes que pasa?

  • #65

    Belles (viernes, 20 septiembre 2013 14:37)

    A mi me funcionó a la perfección! Muchas gracias!

    Eso si, un apunte, ¿añadiendo una transición no se podría ''suavizar'' el efecto al hacerse grande y que no sea tan brusco?

  • #66

    Dj'Alexis (miércoles, 13 noviembre 2013 12:02)

    Lo Qe Pasa Niko es Qe Tenes Qe Modificar Las Medidas Como Qieres Qe Se Vea Y Ya es Todo

  • #67

    JK (sábado, 22 febrero 2014 13:49)

    LLL

  • #68

    lsdld (viernes, 07 marzo 2014 08:58)

    ñdñd

  • #69

    Esteban (miércoles, 12 marzo 2014)

    Muy bueno y sencillo
    Muchas gracias

  • #70

    replica handbags uk (miércoles, 23 abril 2014 01:38)

    Planning to allocate enough device architecture into the acquaintance will get every one of them, because they are completely enough, because it can be used as a good and valuable. Thank you for your reprint. My ranking!

  • #71

    BBTCC (domingo, 11 mayo 2014 23:20)

    alguien me puede ayudar?
    busco que haya una imagen que cambie de color se expanda u otra cosa pero sea capaz de redireccionar a una pagina

  • #72

    miky (viernes, 06 junio 2014 13:09)

    esta bien tu código pero al agrandar al pasar el mouse no deformaria tu pagina?, en todo caso tendrás para que se abra en una ventana aparte temporal

  • #73

    yuvitzia (lunes, 09 junio 2014 16:15)

    excelente :D

  • #74

    JhonnierAndrey (miércoles, 09 julio 2014 12:42)

    Gracias, es justamente el code que buscaba, ahora lo agregare a mi Blog.

  • #75

    ferrrrrr (viernes, 11 julio 2014 15:04)

    esta muy buenooo colega

  • #76

    lizbeth (martes, 26 agosto 2014 21:54)

    muchas gracias, muy útil. saludos

  • #77

    jhonatan (sábado, 06 septiembre 2014 15:22)

    Quiero poner varias imagenes pero cuando paso el mouse por la ultima de la derecha no se convierte porque la ventana no modifica la resolucion

  • #78

    Alejandro (lunes, 29 septiembre 2014 18:23)

    Hola oye solo se puede crear esa funcionalidad en imagenes?, no aplica en otros controles?

  • #79

    christian (domingo, 04 enero 2015 14:53)

    tengo varias imagenes y al hacer ese efecto del tamaño las desordena. Como podria hacer para que al agrandarla cuando el mouse pasa encima , las demás no se muevan.

  • #80

    Rebeca Lázaro Canales (martes, 17 marzo 2015 14:54)

    Hola truco95, estoy intentando generar el código para que cuando pases el ratón por encima de una imagen, cambie de color y al quitar el ratón vuelva a su posición inicial. Había leído que indicabas este código:
    <img src="URL de tu primer imagen" onmouseover="this.src=" url="" de="" tu="" segunda="" onmouseout="this.src='URL de tu primer imagen';" alt="" />
    Decías que lo pusiéramos en el Widget de Jimdo. Lo he puesto y me sucede que no sé encontrar la URL de las 2 fotos que he subido desde la opción AÑADIR ARCHIVOS desde dentro de mi web. No sé si sabrás si se puede averiguar esto. Te lo agradecería mucho!

    También habías comentado una web donde subir los archivos a través de este link http://www.truco95.com/2011/10/como-subir-tus-propios-archivos-y.html para ir a la web de FILEDEN, pero cuando hago click en ese link me lleva a esta web: http://adf.ly/1398PD

    No se si es que ya no existe o qué.

    Muchas gracias!!

  • #81

    Ma Elena (sábado, 21 marzo 2015 07:32)

    Muchas gracias y que dios te siga dando sabiduría y un corazón noble para seguir compartiendo..<3

  • #82

    Sergio Mualim (miércoles, 08 abril 2015 21:07)

    Solución simple y eficiente, gracias

  • #83

    elmer (miércoles, 22 julio 2015 13:33)

    que tal me sirvió de mucho amigo gracias

  • #84

    azumaz (lunes, 30 noviembre 2015 14:41)

    Gracias!

  • #85

    CAMILA (sábado, 16 abril 2016 17:07)

    BUENISIMA

  • #86

    chystian (martes, 03 mayo 2016 15:56)

    hola buenas estoy haciendo algo parecido pero en visual basic vb

    <div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-12 col-xs-12" >
    <asp:ImageButton ID="BtnNuevo0" runat="server" CssClass="mitooltip" title="Nuevo" ImageUrl="~/Botones/nuevo.png" BackColor="#0099cc" onmouseover="this.width=80;this.height=80;" onmouseout="this.width=70;this.height=70;" width="70" height="70" alt="" />
    <asp:ImageButton ID="BtnGuardar0" runat="server" CssClass="mitooltip" title="GUARDAR" ImageUrl="~/Botones/Guardar.png" onmouseover="this.width=80;this.height=80;" onmouseout="this.width=70;this.height=70;" BackColor="#0099cc" Text="Guardar" />
    <asp:ImageButton ID="BtnEditar0" runat="server" CssClass="mitooltip" title="EDITAR" ImageUrl="~/Botones/Editar.png" onmouseover="this.width=80;this.height=80;" onmouseout="this.width=70;this.height=70;" BackColor="#0099cc" Text ="Editar" />
    <asp:ImageButton ID="BtnEliminar0" runat="server" Text="Eliminar" CssClass="mitooltip" title="ELIMINAR" ImageUrl="~/Botones/eliminar_todo.png" onmouseover="this.width=80;this.height=80;" onmouseout="this.width=70;this.height=70;" BackColor="#0099cc" />
    <asp:ImageButton ID="BtnImprimir0" runat="server" Text="Imprimir" CssClass="mitooltip" title="IMPRIMIR" ImageUrl="~/Botones/imprimir.png" onmouseover="this.width=80;this.height=80;" onmouseout="this.width=70;this.height=70;" BackColor="#0099cc" />

    </div
    Todo bien, pero no logro hacer que al cargar la pagina salga con la medida q yo quiero y me sale el tamaño original de la imagen y otra cosa no se mueva el contenido que tengo abajo ya q al agrandar la imagen se mueve todo para abajo es muy leve pero se nota de antemano muchas gracias

  • #87

    cristian (martes, 05 julio 2016 08:56)

    y si quiero hacer zoom a un archivo pdf desde netbeans java, el archivo abre por medio de un PagePanel y PDFFile

  • #88

    Leon Peleador sin ley (miércoles, 06 julio 2016 16:31)

    Excelente, funciona a la perfecccion...te agradezco esta valiosa información

  • #89

    camila (jueves, 15 septiembre 2016 15:57)

    Hola! Puse el código y me funcionó a la perfección el tema es que tengo una galería de imágenes, unas pegadas a las otras de w250*h230, al pasar el mouse agranda la imagen haciendo desplazar a las de más imágenes hacia abajo y los lados, mi pregunta es : ¿ Cómo serían los códigos para que se superpusiera la imagen sobre las otras al agrandarse?

  • #90

    miguel (domingo, 13 agosto 2017 08:43)

    como adaptar el codigo a moviles?gracias