SEPARADOR INICIO.jpg

 

Este es otro efecto muy bueno para agregar a tu página

 

 

Este es el código:

 

 

<img src="URL de tu primer imagen" onmouseover="this.src="URL de tu segunda imagen';"

onmouseout="this.src='URL de tu primer imagen';" alt="" />

 

prueba separador.jpg

Escribir comentario

Comentarios: 42
  • #1

    fredy cabrera (miércoles, 24 noviembre 2010 09:23)

    fijate que estoy tratando de poner la opcion de pasar el mouse a la imagen para hacerla grande pero no entiendo donde tengo que ponder el codigo html.si en el nombre de la imagen o solo crearlo sobre la pagina principal

  • #2

    truco95 (miércoles, 24 noviembre 2010 09:38)

    para poner el código tienes que insertarlo como un elemento widget/html (mira este tutorial http://truco95.jimdo.com/trucos/como-instalar-estos-c%C3%B3digos/ )
    En donde dice TU IMAGEN va la URL de la imagen que quieres que se agrande al pasar el mouse, pero no borres las comillas por que si lo haces ya no te saldrá bien

  • #3

    digicomphoto agency press (domingo, 06 febrero 2011 06:20)

    no funciona

  • #4

    gioart (lunes, 07 febrero 2011 09:50)

    Se puede utilizar este widget como boton? o sea: ademas de cambiar imagen al pasar el mouse al hacer clic direcciona a otro sitio? Me gustaría usarlo para mi sección "Galería". Muchas gracias.

  • #5

    truco95 (lunes, 07 febrero 2011 11:51)

    digicomphoto; bien funciona
    gioart: para eso hay otro truco que pronto presentaremos :D

  • #6

    crazydancers (miércoles, 16 marzo 2011 02:10)

    como lo hago para que sean imagenes que tengo yo guardadas en el ordenador y no en internet?

  • #7

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

    crazydancers: mira este tutorial http://truco95.jimdo.com/trucos/como-subir-tus-propios-archivos/

  • #8

    ellasfrezas (sábado, 02 abril 2011 17:08)

    no puedo la vrdd no entiendo sere inda o ke pero no me sale la imageen

  • #9

    truco95 (sábado, 02 abril 2011 20:20)

    ellasfrezas: cuanto lo siento :(

  • #10

    tiaggo-17 (viernes, 15 abril 2011 14:55)

    hey necesito esa con un link

  • #11

    DJ JexFlOw (domingo, 01 mayo 2011 13:27)

    POR QUE A MI NO ME ZALE EL TRUCO
    YA PUZE EN MI WEB PERO NO FUNCIONA EL TRUCO
    POR FAVOR AYUDAME O ESQUE EL CODIGO ESTA MAL

  • #12

    truco95 (domingo, 01 mayo 2011 17:44)

    tiaggo: pronto la publicaremos :)

    DJ: tienes que darle vista previa

  • #13

    minombreesmuycorto1 (miércoles, 08 junio 2011 18:38)

    oie sabes ke sabeis un code de ke al apretar salga un texto o otra imagen eso nececito xd no ke al pasar el mouse si no ke apretar y salga otra cosa

  • #14

    lorenzo (sábado, 18 junio 2011 16:07)

    hey truco si entiendo todo esto de la imagen pero tengo una pregunta para hacer esta imagen asi como esta peo que te lleve a un sitio en la web determinado al hacer clic sobre ella como le ago

  • #15

    truco95 (jueves, 23 junio 2011 17:02)

    minombre: por el momento no se, pero si me llego a enterar de algo te cuento :D

    lorenzo: pronto publicaremos el código :D

  • #16

    Generic Viagra (jueves, 07 julio 2011 14:38)

    Decir gracias es una de las acciones mas importantes de los seres humanos, me gustaría tanto leer mas sobre esto.

  • #17

    holadiversion (jueves, 04 agosto 2011 20:30)

    nofunciona

  • #18

    probarweb (lunes, 05 septiembre 2011 17:42)

    graciaaaaaaaaaaaas

  • #19

    truco95 (jueves, 08 septiembre 2011 20:24)

    holadiversion: que no te funciona?

    probarweb: gracias a ti por tomarte el tiempo de visitarnos y comentar :D

  • #20

    Rolando (viernes, 13 enero 2012 14:44)

    Gracias :D

  • #21

    Marcelo (miércoles, 28 marzo 2012 06:50)

    Hola amigo, necesito hacer un slideshow, pero chico, y que se agrande al pasar el mouse, y poder ver la presentacion, solo en grande si paso el mouse. Se puede.????? y sino que quede chico.. Gracias de antemano

  • #22

    truco95 (domingo, 01 abril 2012 01:01)

    Marcelo: no entiendo muy bien lo que quieres hacer.

  • #23

    anónimo (martes, 22 mayo 2012 09:27)

    intento ponerlo y aun poniendo las url bien , le dio a aplicar y no funciona ,porq a y porfavor recomiendame una pgina para subir las fotos y que me diga la url

  • #24

    truco95 (miércoles, 23 mayo 2012 00:47)

    anónimo: lo puedes ver aquí http://www.truco95.com/2011/10/como-subir-tus-propios-archivos-y.html :)

  • #25

    fredd (martes, 31 julio 2012 11:15)

    hola

  • #26

    Edworld (jueves, 09 agosto 2012 14:51)

    sabes hay como hacer para que de link a otra paguina?

  • #27

    Virulazo Benvenuto (viernes, 05 octubre 2012 20:14)

    Probé el código y no me andubo (Wn7 + IE o Chrome), pero con este sí:

    <img src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/>

    ¡¡¡GRACIAS POR TODO EL CONOCIMIENTO QUE DIVULGAN, ES UNA TAREA HERMOSA !!!

  • #28

    ana (jueves, 22 noviembre 2012 12:02)

    muchas gracias me ha servido de mucho saludos :)

  • #29

    Centrifugal Juicer (domingo, 14 abril 2013 00:06)

    This is an excellent post! Thank you for sharing!

  • #30

    5uRFi (lunes, 13 mayo 2013 23:23)

    El Código fuente no me funciono. Ya que tiene una comilla doble en lugar de simples al inicio de la url de la segunda imagen.

    "URL de tu segunda imagen';


    Codigo corregido.

    <img src="URL de tu primer imagen" onmouseover="this.src='URL de tu segunda imagen';"
    onmouseout="this.src='URL de tu primer imagen';" alt="" />

  • #31

    5uRFi (lunes, 13 mayo 2013 23:24)

    Gracias, Por los códigos, Muy buena pagina.

  • #32

    miguel (viernes, 19 julio 2013 13:54)

    exelente si solo abia una hay unas comillas que se deben remplazar por ' y funciona bien les dejo la correcion
    <img src="images/Menu_boton 1.png"
    onMouseOver="this.src='images/Menu_boton2.png';"
    onmouseout="this.src='images/Menu_boton 1.png';"></a>
    </td> dejo mi face para que me agregen y poder intercambiar codigos ;)

  • #33

    paola (miércoles, 04 diciembre 2013 11:16)

    No me funciona el codigo porfa ayuda.

  • #34

    Juan (sábado, 25 enero 2014 01:28)

    Gracias!! muy claro y funcionando, como anota miguel, solo tiene un problema de semantica en la segunda declaracion de objeto :D

  • #35

    Ernesto (martes, 28 enero 2014 14:40)

    El error es una doble comilla donde supone ser comillas simple

    <img src="URL de tu primer imagen" onmouseover="this.src='URL de tu segunda imagen';"
    onmouseout="this.src='URL de tu primer imagen';" alt="" />

    A mi me funciona wn chrome y en firefox, en Internet Explorer se guinda y muestra un error...

  • #36

    proofs (jueves, 20 febrero 2014 22:50)

    Es posible combinar ese codigo con el codigo para que la imagen sea fija?
    Ejemplo, una imagen fija en la esquina superior derecha que al pasar el cursor muestra otra imagen.

    Se podrá?

  • #37

    Daniela (miércoles, 26 febrero 2014 09:27)

    Excelente! Me funcionó :)

  • #38

    Jose (miércoles, 14 mayo 2014 19:25)

    Hola no se si me podrían ayudar, como puedo hacer que al seleccionar solo una parte de una imagen me cambie toda? me explico bien? hice con mapeo de imagenes y quiero que el area que este hipervinculada al poner el mouse encima cambie de color o imagen

  • #39

    Roger (lunes, 23 febrero 2015 18:03)

    Gracias por el tip, me ha servido bastante, gracias :)

  • #40

    Romina Alexandra Sequeiros Aabrca (miércoles, 25 febrero 2015 14:35)

    Gracias! buen aporte! ;)
    Vi otra manera de cambiar imágenes en esta web, Cómo puedo hacer eso por favor? Gracias!
    http://publimetro.pe/entretenimiento/noticia-lima-antes-y-despues-nuestra-capital-ii-29144/2#foto-gal

  • #41

    google (domingo, 31 enero 2016 15:48)

    hola

  • #42

    Alejandro (lunes, 04 abril 2016 16:30)

    Hola! Me gustaria saber como poder aplicar el script de onmouse a diferentes imagenes de una GALERIA que introduzco en una pagina. Llevo buscandolo y no lo he encontrado. Muchas gracias por la ayuda! Un saludo