Cambiar imagen al pasar el mouse

24 de septiembre de 2009 248 comentarios ,
Anteriormente vimos cómo cambiar una imagen por otra al pasar el mouse utilizando un script. Pero para quienes al igual que yo les gustan las cosas sin tantas complicaciones, veremos una forma simplificada de tener el mismo efecto, sin scripts, usando un sólo código.
Este es un ejemplo, pasa el cursor sobre la imagen para que cambie.



Sólo basta que pongas este código en una entrada o un elemento HTML/Javascript:
<img src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/>

Cambia lo que está en rojo por la URL de la imagen que tendrás inicialmente, y lo que está en verde por la URL de la imagen que cambiará al pasar el mouse. Trata que las dos imágenes tengan el mismo tamaño para conseguir un mejor resultado.

Puedes usarlo para hacer algún menú o para mostrar fotos de "antes y después".


248 comentarios en:

" Cambiar imagen al pasar el mouse "

  1. si esta muy bueno este script, aparte que es mucho mas simple.
    Saludos.

    ResponderEliminar
  2. si señor muy bueno el truco y además muy sencillo
    sobre todo me encanta por la sencillez.a proposito se podría hacer algo parecido que cambie la imagen sin necesidad de tener que pasar el mouse.Saludos

    ResponderEliminar
  3. Hola pepe, seguro será de mucha utilidad =)
    Saludos.

    Hola Guti, en ese caso podrías usar un banner cambiante, ahí puedes poner las imágenes que quieras y cambian automáticamente:
    http://ciudadblogger.com/2009/04/banner-cambiante.html
    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola como estas de ante mano gracias,... queria preguntarte algo... quiero que cuando se cargue mi blog ya sea en una entrada particular o en la pagina principal.. al mover el mouse cargue por ejemplo adf.ly y luego de los 5 segundos se redireccione a mi blog nuevamente!!!... bueno lo ultimo es solo recortar el link de mi blog... pero la parte de mover el mouse para que cargue adf.ly no se como hacerla... te agradeceria mucho si me puedes ayudar

      Eliminar
  4. Hey potro, esta muy buena la ciudad para el mobile.
    Saludos.

    ResponderEliminar
  5. Hola pepe,

    Gracias, apenas hoy lo hice. El fin de semana publico cómo hacerlo.

    Saludos.

    ResponderEliminar
  6. Hola por aca. . . . que linda ha quedado, tu casa, jajja, me gustan mucho tus cambios.-
    Lo del ratón. . . . lo voy a intentar. . .
    La verdad, tu haces ver facil, todo.-

    Muchos cariños

    Anne

    ResponderEliminar
  7. Hola ARMANDOKUN, igual a mí me gustaron las imágenes =)
    Saludos!


    Hola Anne, qué bueno que te gustó cómo quedó la nueva plantilla. Lo de las imágenes es muy simple, así que espero que no se le complique a nadie.
    Cariños!

    Hola Emanuel, gracias por comentar =)
    Saludos!

    ResponderEliminar
  8. Te quiero agradecer todo, todo todo lo que haces por gente como yo, que sabiendo poco, se cree que sabe mucho. He aprendido mucho aquí y espero seguir aprendiendo. Tanto sé, que me doy el lujo de sugerirte que la primera foto, debería haber sido de una persona encendiendo para luego ver el esqueleto. De todas maneras solo es una opinión. Este blog es el mejor que hay en toda la blogófera y no exagero, me estoy armando varios blogs y estoy "recorriendo" mucho. En el blog de trucos que estoy preparando, colocaré un banner destacado de ustedes a modo de agradecimiento. Un saludo gran y de nuevo, muchas gracias!

    ResponderEliminar
  9. Hola Amelio Luna,

    En algún momento todos nos damos cuenta de que sabemos muy poco y que aún hay mucho por aprender, lo importante es saber que siempre se puede aprender más.

    Las fotos no son mías, la verdad es que no sabía qué imágenes poner de ejemplo y de casualidad me encontré la segunda y luego buscando más fotos me encontré en otro sitio la primera, pero ya no pude saber si las dos están hechas por casualidad o son una serie de varias fotos =S

    Mucha suerte y éxito con tus blogs y gracias por el banner y por tus comentarios.
    Cualquier cosa estoy a tus órdenes.
    Saludos!

    ResponderEliminar
  10. gracias!!!!
    yo necesito hacer una especie de menu con este codigo que tu das, pero a su vez, lo meto dentro de este que permite abrirlo en otra ventana lo hago con lo que me dan aqui:http://soporte.miarroba.com/1368/6772545-como-hago-para-que-se-habra-otra-ventana/

    por seperado me salen los 2 y juntos no. solo sustitullo donde dice imagen por el codigo que tu das y logicamente tendria que salir!!!
    sabes la solucion!!!???

    ResponderEliminar
  11. Hola Disniruña,

    Tendrías que usar este código:

    <a href="URL del enlace" target="_blank"><img src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/></a>

    Saludos.

    ResponderEliminar
    Respuestas
    1. muchísimas gracias por esta información! por esta y por todas, lo haces todo tan sencillo... de veras, gracias!!!

      Eliminar
  12. siento no haberte podido dejar el codigo que usaba, pero esto no me dejaba.
    ese es es codigo que utilizo, es de logica pensé que el codigo de lo de las 2 fotos vaya en el lugar de la foto del codigo 2.
    pero no me funciona. por separado me van bien.
    lo has probado? es que ya no entiendo por que me pasa. tendría que funcionar.

    ResponderEliminar
  13. Hola Disniruña,

    Con el código que te di funciona, dime qué imágenes deseas usar en un ejemplo y a dónde debe enlazar para que te dé el código y con ese te bases para hacer los otros.

    Saludos.

    ResponderEliminar
  14. por ejemplo:
    http://img41.xooimage.com/files/3/8/3/tematicos-agua-151fd5c.jpg
    y
    http://img45.xooimage.com/files/5/d/7/tematicos-agua2-151fd70.jpg

    ResponderEliminar
  15. y por cierto muuuuchas gracias por la atención si no lo habia dicho antes
    soy disniruña desde otra cuenta.
    gracias gracias gracias

    ResponderEliminar
  16. Hola de nuevo =)
    No me dijiste a dónde debe enlazar así que puse como ejemplo a CiudadBlogger, el código sería este:

    <a href="http://ciudadblogger.com" target="_blank"><img src="http://img41.xooimage.com/files/3/8/3/tematicos-agua-151fd5c.jpg" onmouseover="this.src='http://img45.xooimage.com/files/5/d/7/tematicos-agua2-151fd70.jpg';" onmouseout="this.src='http://img41.xooimage.com/files/3/8/3/tematicos-agua-151fd5c.jpg';"/></a>

    De esta forma la imagen cambia por otra al pasar el mouse y la URL del enlace abre en otra ventana al hacer click.

    Saludos.

    ResponderEliminar
  17. por fin me funciona!!! gracias!!!!
    aun a riesgo de parecer inutil, esta es la que ponia yo:

    http://img41.xooimage.com/files/a/4/b/sin-t-tulo-1-152c4c3.jpg
    (no me deja ponerlo en el comentario, os mando la imagen)

    y yo la veo igual por más que la miro, hay algun detallle que se me escapa y no lo consigo ver. he sido muy malo siempre en esto de las 10 diferencias!

    ResponderEliminar
  18. Jajajaja, yo también era malo buscando las 10 diferencias.

    El problema (y que es muy común) es que no ponías un espacio entre la URL del enlace y el target="blank" por eso es que no funcionaba. Tienes que dejar ese espacio en blanco para que funcione apropiadamente.

    Saludos!

    ResponderEliminar
  19. Hola Nosotros mismos,

    Qué gusto que te haya sido útil.
    Bienvenido!

    ResponderEliminar
  20. Estimado Potro, gracias por poder compartir con nosotros tus conocimientos, tengo una pregunta yo soy un novanto en esto y disculpa mi ignorancia, en este post cuando decis que cambie la url de la imagen, tengo que subir mi imagen a un servidor o la imagen la extraigo de mi compu, podes hacer el favor de aclararme eso.

    Saludos
    Benjamín

    ResponderEliminar
  21. Hola José,

    Puede ser cualquiera de las dos opciones, si ya tienes una imagen en un servidor usa esa imagen, si aun la tienes en tu compu súbela a un servidor y obtén su URL.

    Saludos.

    ResponderEliminar
  22. una pregunta..
    si esta alojada en mi servidor (images/...)
    porque no me funciona¿?

    ResponderEliminar
  23. Eso sólo serviría si tu servidor fuera así:
    http://tublog.com/images

    Pero en Blogger eso no se puede, pues el servidor es blogspot y la única forma que se suben fotos desde ahí es con Picasa.

    ResponderEliminar
  24. ¿Como hago esto y que tenga un enlace que se abra en una nueva pestaña?

    ResponderEliminar
  25. Sólo encierra el código de la imagen así:

    <a href="URL del enlace" target="_blank">
    ...código de la imagen...
    </a>

    ResponderEliminar
  26. Hola Potro,
    ante todo, mil gracias por la tarea que realizas de ayudar a los más novatos... Incluido un servidor! :)

    Llevo unas semanas arreglando mi blog y no hay manera de conseguir que la plantilla de blogger que uso me permita hacer esta acción de cambiar la imagen al pasar por encima. Com este método que comentas tampoco me sale!!! Eso si, creando un gadget con un html y metiendo ahí el codigo no hay problema! Necesito poder incluirlo en la plantilla... Se te ocurre algo de lo que le pueda pasar a mi plantilla!!!!

    Un fuerte saludo des de Barcelona!

    ResponderEliminar
  27. Por cierto, el bloc en cuestión está oculto, por eso no he mandado la dirección.. Si hace falta cualquier cosa te la mandaré sin problema!!!

    ResponderEliminar
  28. Hola Sant Gaudenci,

    Entra a esta página:
    http://www.blogcrowds.com/resources/parse_html.php
    Ahí pon el código para cambiar la imagen incluyendo las URLs de las imágenes, dale click en Parse y copia el código que saldrá, ese código úsalo directo en la plantilla, de esa forma sí funcionará.

    Saludos.

    ResponderEliminar
  29. Hola Potro!
    Muchissimississimas gracias por el consejo!!! Lo he seguido y me ha ido de maravilla.... Com Mozilla Firefox. En Explorer no hay manera! Sabrias decirme porque??

    Saludos y gracias de nuevo!!!

    ResponderEliminar
  30. No lo sé, debería funcionar también en Internet Explorer :(

    ResponderEliminar
  31. Debería.. pero no lo hace!!!! Mira que es complicado el mundo del código, eh???? :D
    Gracias por tu atención y supongo que hasta muy pronto!!!!

    ResponderEliminar
  32. Hola Potro,

    Vuelvo a ti cada vez que necesito ayuda con mi bitácora. Mi cuestión es la siguiente:

    Quiero poner una lista de nombres de personas y que al pasar el ratón sobre cada uno de los nombres aparezca una imagen flotante al lado derecho con la foto del individuo en cuestión.

    ¿Cómo lo hago?

    Gracias de antemano.

    ResponderEliminar
  33. Ricardo Baena, quizá puedas usar este método que es para agrandar una imagen, sólo que en tu caso usarías un texto (el nombre de la persona) y la imagen que se agrandará será la foto de esa persona.

    ResponderEliminar
  34. Muchas Gracias. Había buscado en el blog a ver si encontraba algo pero no daba con la tecla. El método funciona a la perfección.

    No se que haría sin ti. :P

    ResponderEliminar
  35. Perfecto Ricardo, me imaginé que ese te sería útil ;)

    ResponderEliminar
  36. Hola Potroa,
    Me leido tu entrada para ver si en ella podria encontrar alguna idea que me aclarara respecto a lo que quiero lograr.
    Por favor, necesito una ayuda en:
    Quiero lograr mostrar/ocultar una imagen al marcar/desmarmar una casilla de verificacion. Llevo varios dias en esto y no he podido solucionarlo. He intentado muchas cosas, pero hasta ahora solo he logrado presentar la imagen oculta pero al marcar la casilla no se habilita la imagen.
    En terminos de programacion escrita, te diria, que necesito:
    evento 1: mostrar casilla verificacion + texto + imagen ("hidden", sin href);(esto lo he logrado).
    evento 2: si la casilla de verificacion es "true" mostrar evento 3 y si es "false" mostrar evento 1.
    evento 3: mostrar imagen "visible" + href
    Muchas gracias

    ResponderEliminar
  37. Supongo que eso puede hacerse con un script pero desconozco cómo sería la programación de dicho script.
    En forosdelweb.com seguro podrán orientarte mejor.

    ResponderEliminar
  38. Hola Potro,

    Muchas gracias por tu respuesta.
    Por favor, tengo un gran problema: me registré gratis en 250free.com y alojé allí todas mis imagenes y archivos, y desde ayer esta fuera de servicio y no me dan explicaciones. Podrías recomendarme algun alojamiento (gratis, de momento) que pueda registrarme y redireccionar mis enlaces hacia allí.
    Lo otro es, deseo ocultar los titulos de las paginas estaticas al ser cargadas, es decir cuando pinchas la pagina estatica, y te sale, aparece el titulo en la "entrada", eso no quiero mostrarlo. Si esto no es posible, cómo se puede enlazar una pagina estatica con una entrada, de manera que cuando pinchas la pagina estatica te salga dicha entrada.
    Muchas gracias por todo.

    ResponderEliminar
  39. Hola DaycareWeb,

    Pues hay varios servicios de alojamiento gratuito, en lo personal uso Dropbox y me ha salido bien, pero igual puedes probar otros como Google Sites.

    Acerca del título en las páginas estáticas deja que entre hoy y mañana lo publique porque igual varios lectores me lo han estado pidiendo.

    ¡Saludos!

    ResponderEliminar
  40. Hola Potro,

    Gracias por este truco!

    Lo he utilizado para hacer un menú pero, aunque lo tengo dentro de un gadget, le tengo esta característica para que quede fijo al lado izquierdo del blog:

    style="display:scroll;position:fixed;top:310px;left:0px"

    En los navegadores y iPhones va de lujo. El problema que tengo es que cuando lo visualizo en un Blackberry, en el momento de hacer zoom in, los botones desaparecen y queda en reemplazo el texto "Click here"

    Sabes de alguna solución para esto? Me serviría mucho porque lo BBs son muy importantes para mi blog.

    Muchas gracias de antemano,

    ResponderEliminar
  41. No tengo idea, en el caso de los navegadores de telefonía móvil así como sus sistemas operativos no tengo conocimiento :(

    ResponderEliminar
  42. Hola Potro.
    Me pregunto si se puede hacer el efecto en la imagen "leer más" que tengo y en los botones de categorías en el title de las entradas, de poderse, ya me dirás cómo y dónde poner lo que sea... ya sabes de mi ignorancia.
    Un saludo y gracias.

    ResponderEliminar
  43. Hola ,

    Con este método no, pero en esta entrada de Leer más se menciona cómo hacer para que el enlace de Leer más tenga estilos distintos en forma normal y al pasar el cursor. Lo único que tendrías que hacer es que en lugar de darle un color de fondo pongas la URL de una imagen, tanto para el estado normal del enlace como al pasar el cursor.

    Saludos.

    ResponderEliminar
  44. Hola Potro.
    La imagen de "leer más" la puse siguiendo tus pasos: (http://ciudadblogger.com/2009/11/personalizar-enlace-de-leer-mas.html)
    Lo que no sé es que parte del código tengo que pegar, ni donde, para que al pasar el cursor cambie por otra imagen.
    No sé si me hago entender, ya perdonarás.
    Un saludo.

    ResponderEliminar
  45. Sólo tienes que cambiar:
    background: #04B4AE; /* Color de fondo */

    Por:
    background: url(URL de la imagen);

    Lo mismo con:
    background: #045FB4; /* Color de fondo al pasar el cursor */

    Pero ese enlace es para el Leer más de Blogger, si es el Leer más automático entonces es lo mismo pero con las indicaciones que vienen en el enlace que te refería en el otro comentario.

    Saludos.

    ResponderEliminar
  46. Hola Potro.
    Como comentas, es el "leer más" de blogger.
    He copiado el código donde indicas y he cambiado los background, el resultado es que me lo ha cambiado de sitio desbarajustando los enlaces, los botones y el "publicado por..."
    Me pregunto si es necesario todo el código, ya que me pide color de texto, bordes y márgenes cuando lo que quiero es que cambie una imagen:
    .jump-link a {
    color: #FFF; /* Color del texto */
    text-decoration: none;
    font-weight: bold;
    Y es que sólo tuve que poner esto para cambiar el texto por la imagen:

    Seguramente en algún sitio meto la pata y deba cesar en mis propósitos.
    Ya me dirás maestro...
    Un saludo.

    ResponderEliminar
  47. ... Y es que sólo tuve que poner esto para cambiar el texto por la imagen:
    imagensrc="URL de la imagen"/
    No me ha dejado publicarlo antes, ya perdonarás.

    ResponderEliminar
  48. A ver, va de nuevo.
    Pon este código:

    .jump-link {
    float:right;
    background: url(URL de la imagen);
    width:90px;
    height:25px;
    padding: 1px 2px;
    margin-left:20px;
    }
    .jump-link:hover {
    background:url(URL de la imagen al pasar el mouse);
    width:90px;
    height:25px;
    text-decoration:none;
    }

    En donde se indica debes agregar las URLs de las imágenes tanto en modo normal como al pasar el cursor.
    NO cambies el texto Leer más por una imagen, déjalo como está.

    Luego entra en Diseño > Elementos de la página, click en Editar sobre Entradas del blog, y en 'Texto del enlace de la página de entrada' escribe esto:
    &nbsp;

    Con eso bastará. Saludos.

    ResponderEliminar
  49. Hola Potro.
    ¿Soy duro,eh?.
    Muchas gracias por tu atención. De momento me lo guardo en la lista de asuntos pendientes, para cuando me pille con más ganas de complicarme/te la vida :)
    Lo dicho, gracias y hasta la próxima.
    Un saludo.

    ResponderEliminar
  50. No te preocupes, ya sabes que si se te ofrece algo y está en mis manos ayudarte con mucho gusto lo haré ;)

    Un saludo.

    ResponderEliminar
  51. Gracias Potro.
    Lo mismo digo, cuando necesites un tapicero ya sabes donde estoy ;)
    Un saludo.

    ResponderEliminar
  52. potro como esta puedes pasarme tu email
    para poder plantearte un problema acerca a de este codigo .... eh revisado los comentarios y no hay nada sobre esto espero me puedas ayudar

    ResponderEliminar
  53. Hola Pornsynth!,

    Todas las preguntas referentes a un tema de una entrada se hacen en la misma entrada para darle el seguimiento adecuado y para que pueda servir a otros quienes tengan el mismo problema.
    Sólo dime cuál es el problema exacto que tienes con el código y en cua´l blog lo estás tratando de poner.

    Saludos.

    ResponderEliminar
  54. Hola Potro,
    Como estas?..
    Tengo una pregunta. No es exactamente este post, pero esta relacionada con la imagen del perfil que quiero que cambie..
    Yo tengo 2 blogs entrelazados y en ambos tengo la misma foto. Es posible cambiar la foto del perfil de uno de los blogs sin que cambie la de la otra?>
    Lo he intentado y no me deja. A lo mejor es que no se puede y tengo que crear un nuevo blog con un password diferente.
    Un saludo y muchas gracias..
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  55. Hola Jose,

    Ya te he respondido esa pregunta en la otra entrada ;)
    Saludos.

    ResponderEliminar
  56. Buenos dias Potro,
    Ay, perdona!. En alguna ocasion me dio un error y lo envie por duplicado.
    Perfecto!.. Si no se puede, un problema menos!.
    Muchas gracias.
    Jose

    ResponderEliminar
  57. hola amigo Potro .. me gustaria saber qual es el codigo para hacer esto de camciar la imagen pero que tenga un link para la misma pagina y NO para otra ventana si no en la misma

    ResponderEliminar
  58. Mira el comentario #13, ahí está el código para que la imagen tenga un enlace, sólo elimina de ese código esto para que no abra en otra ventana:
    target="_blank"

    ResponderEliminar
  59. muchas gracias (H) sige asi

    ResponderEliminar
  60. Lo que tambien se puede hacer es cambiar el mouse aqui: http://www.totallyfreecursors.com/

    ResponderEliminar
  61. a mi que me gusta tener muchas imagenes, ahora no se veran tan simples..!! Sencillo pero Muy Vistoso.
    Saludos..!

    ResponderEliminar
  62. A veces lo sencillo puede dar resultados sorprendentes :)

    ResponderEliminar
  63. Hola, Potro. Me gustaría saber si este truco puede ser aplicado a una imagen que tengo para expandir y contraer entradas cuando muestra sólo los títulos de los post. También quiero aplicar esto para la imagen que tengo en "Leer más", pero no me da resultados. ¿Por qué crees que pase esto?

    ResponderEliminar
  64. Porque son áreas distintas y por lo tanto requieren procedimientos distintos. Para que la imagen de 'Leer más' cambie por otra al pasar el cursor primero quita el texto 'Leer más...'
    Luego antes de ]]></b:skin> agrega esto:

    .rmlink {
    float:right;
    background: url(URL de la imagen normal);
    width:80px;
    height:20px;
    padding: 1px 2px;
    margin-left:20px;
    }

    .rmlink:hover {
    background: url(URL de la imagen al pasar el mouse);
    width:80px;
    height:20px;
    }

    Ahí pon las URLs de las imágenes que quieres y cambia el ancho y alto (width y height) de la imagen.

    Saludos.

    ResponderEliminar
  65. Quité, como me dijiste, el "Leer más" y luego en /b:skin agregué lo demás, pero no mostró nada. Me gustaría saber también cómo cambiar de imagen al pasar el cursor sobre la imagen de expandir/contraer (aquella que sólo muestra los títulos de los post en una búsqueda). Disculpa tanta molestia, Potro. Eres muy amable. (:

    ResponderEliminar
  66. Hola Daniel ...,

    Necesito saber en qué blog lo has aplicado para poder ver dónde puede estar el error.
    En la de expandir y contraer no lo he hecho, pero supongo que sólo debes cambiar la imagen por la del código de esta entrada.

    Saludos.

    ResponderEliminar
  67. He intentado cambiar la imagen por el código de esta entrada, pero no funciona. Por ahora he dejado el "Leer más" automático sólo con una imagen y con opacidad. Gracias, Potro. Saludos

    www.lasnoticiasdetulum.com

    ResponderEliminar
  68. Pues yo veo que el de Leer más funciona perfectamente, al pasar el cursor cambia por otro tono de verde.
    En lo otro no mencionas detalles, ¿marca algún error al ponerlo? ¿o sólo no hace nada cuando lo pones?
    Si no te marca error entonces déjalo puesto para que pueda verlo. Si te marca error dime qué te marca.

    Saludos.

    ResponderEliminar
  69. Lo que pasa es que le había aplicado una opacidad a la imagen de "Leer más", por eso se veía así. Ahora he colocado el código que me has dicho, pero no se muestra. Y respecto a la imagen de expandir/contraer que te decía, no marca error, pero sólo se muestra la primera imagen y al pasar el puntero no muestra la segunda.

    Lo he dejado puesto para que veas, Potro.

    Disculpa tanta pregunta de mi parte. Eres muy amable. Gracias. (:

    ResponderEliminar
  70. Hola Daniel,

    Ahora no veo el link de Leer más por ningún lado, pero sí he podido ver que el problema al menos de que no funcionaba el código que te di es que los has colocado erróneamente. Mira esta entrada para que veas los dos errores que hay:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

    Lo de la otra imagen veo que al guardarlo se agregan unos caracteres (diagonales invertidas) que causan que no surja efecto, quizá primero tengas que convertir a texto plano el código de la imagen y ese código convertido ponerlo ahí en su lugar.
    Prueba con eso y dime si lo resuelve.

    Saludos.

    ResponderEliminar
  71. Eres un genio, Potro. Efectivamente, se me había olvidado cerrar la llave de un código anterior, además de que había puesto mal unas anotaciones; y respecto a la otra imagen, bastó con que convirtiera a texto plano el código para cambiar la imagen al pasar el cursor.

    Muchas gracias por tu ayuda, Potro. ¡Eres bárbaro!

    Gracias, gracias. (:

    ResponderEliminar
  72. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  73. Wow!! Esta maginifico este truquillo!!! Es lo que buscaba! Ademas tiene poco coidog, entonces no sobre carga la plantilla.

    Solo una cosilla, no sabes por que en el navegador Firefox me sale un enorme espacio arriba de este efecto?

    (Son los dos enormes botones al lado del buscador: http://ganardinerotrabajandoadistancia.blogspot.com/)

    Si puedas echarle un ojo! Estaria genial! También te dejo la tabla por si fuera eso lo que falla:



    <table width="432" height="83" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="208" height="83" align="left" valign="top"><a href="http://ganardinerotrabajandoadistancia.blogspot.com/p/inscribirse.html"><img src="http://2.bp.blogspot.com/-UlEbQFU5rx0/TrFvn-nWvCI/AAAAAAAAFEY/7PrHrq-Ocjk/s1600/Tiendas-Anunciate1.png " hspace="0" vspace="0" border="0" onmouseover="this.src='http://1.bp.blogspot.com/-SCzNrjvuc90/TrFvoRy2_hI/AAAAAAAAFEc/iCt5_zRoT8c/s1600/Tiendas-Anunciate2.png';" onmouseout="this.src='http://2.bp.blogspot.com/-UlEbQFU5rx0/TrFvn-nWvCI/AAAAAAAAFEY/7PrHrq-Ocjk/s1600/Tiendas-Anunciate1.png ';"/></a></td>
    <td width="11" height="83"> </td>
    <td width="208" height="83" align="right" valign="top"><a href="http://ganardinerotrabajandoadistancia.blogspot.com/p/inscribirse.html"><img src="http://3.bp.blogspot.com/-ajdHQc2NxbA/TrFvpNewdDI/AAAAAAAAFEo/e70ySxBdtbY/s1600/Tiendas-trabaja1.png" hspace="0" vspace="0" border="0" onmouseover="this.src='http://4.bp.blogspot.com/-9L0xs8Eu9jQ/TrFvp4kbSkI/AAAAAAAAFEs/peK3cxPrkbA/s1600/Tiendas-trabaja2.png';" onmouseout="this.src='http://3.bp.blogspot.com/-ajdHQc2NxbA/TrFvpNewdDI/AAAAAAAAFEo/e70ySxBdtbY/s1600/Tiendas-trabaja1.png';"/></a></td>
    </tr>
    </table>


    Si tienes cosas mejores que hacer, porfavor no te molestes!

    ResponderEliminar
  74. Las tablas suelen generar espacios aunque no sé si este sea el caso, de cualquier forma pon los códigos de la tabla todos juntos, es decir, uno detrás del otro para evitar estos espacios.

    <table width="432" height="83" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="208" height="83" align="left" valign="top"><a href="http://ganardinerotrabajandoadistancia.blogspot.com/p/inscribirse.html"><img src="http://2.bp.blogspot.com/-UlEbQFU5rx0/TrFvn-nWvCI/AAAAAAAAFEY/7PrHrq-Ocjk/s1600/Tiendas-Anunciate1.png " hspace="0" vspace="0" border="0" onmouseover="this.src='http://1.bp.blogspot.com/-SCzNrjvuc90/TrFvoRy2_hI/AAAAAAAAFEc/iCt5_zRoT8c/s1600/Tiendas-Anunciate2.png';" onmouseout="this.src='http://2.bp.blogspot.com/-UlEbQFU5rx0/TrFvn-nWvCI/AAAAAAAAFEY/7PrHrq-Ocjk/s1600/Tiendas-Anunciate1.png ';"/></a></td><td width="11" height="83"></td><td width="208" height="83" align="right" valign="top"><a href="http://ganardinerotrabajandoadistancia.blogspot.com/p/inscribirse.html"><img src="http://3.bp.blogspot.com/-ajdHQc2NxbA/TrFvpNewdDI/AAAAAAAAFEo/e70ySxBdtbY/s1600/Tiendas-trabaja1.png" hspace="0" vspace="0" border="0" onmouseover="this.src='http://4.bp.blogspot.com/-9L0xs8Eu9jQ/TrFvp4kbSkI/AAAAAAAAFEs/peK3cxPrkbA/s1600/Tiendas-trabaja2.png';" onmouseout="this.src='http://3.bp.blogspot.com/-ajdHQc2NxbA/TrFvpNewdDI/AAAAAAAAFEo/e70ySxBdtbY/s1600/Tiendas-trabaja1.png';"/></a></td></tr></table>

    ResponderEliminar
  75. No.. igual se ve con espacios! Bueno lo bueno es que me distes la idea de hacer sin tabla! simplemente con espacios!

    Gracias potro! Siempre de gran ayuda!

    ResponderEliminar
  76. Ok, pero si no usas la tabla y quieres que queden alineados horizontalmente entonces igual que la tabla pon los códigos de las imágenes uno detrás del otro, así se ordenarán en una sola línea.

    ResponderEliminar
  77. Gracias el Potro! Despues de varios intentos, me di cuenta que era el script que hacia ese espacio tan raro.. entonces pondre botones sin el efecto y listo!

    También te queria comentar algo fuera de este tema! xD

    Pense mas en tu caso.. de que no te dan tantas donaciones como se quisiera, y real-mente tus ayudas son de enorme ayuda ya que casi todos hacemos mejoras para en un futuro recibir algun tipo de beneficio.

    Bueno el caso es que encontre una web (www.amigos.com) donde paga 0,50$ por cada hombre que se registre y 1,50$ por cada mujer.

    No hay reglas.. ya que puedes ir diciendo que se registren y nadie te penaliza.. y el regitro es muy simple y pequeño.

    Entonces poner un enlace nuevemente en los comentarios con un mensaje agradable con el enlace de afiliado, pidiendo que se registren como mujer para agradecer o dejar propina... pero a ellos nos le va a costar nada.. ademas poner que los datos pueden ser falzos menos el email.. por que se tiene que validar.

    Bueno yo lo probe, y ya llevo 26$ sin apenas hacer nada..

    Tambiém me informe y la empresa paga, y ademas es seria y lleva mucho tiempo trabajando...


    Bueno me aria ilucion que lo hicieras! Y ganaras con donaciones sin depender si el visitante tiene dinero o no.

    Te dejo el registro: https://secure.amigos.com/p/partners/main.cgi

    Saludos Potro! Éxitos!! Y ya ire frenando con los comentarios xdd eso era lo ultimo ;)

    ResponderEliminar
  78. Muchas gracias por el tip. Aquí no creo ponerlo, pero podría probar en alguno de los otros dos blogs que tengo, con suerte y me hago de un dinerito extra :)
    Por los comentarios ni te preocupes, eso es lo que mantiene con vida a un blog, así que síguele dando oxígeno :D

    ResponderEliminar
  79. disculpa no me funciona tu codigo en crhome me podrias decir porque?¿

    ResponderEliminar
  80. este es el codigo que menciono porfavor si me pudiese ayudar seria magnifico de antemano muchas gracias:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="Equipo5" name="author">
    <title>Dise&ntilde;os Verona</title>
    <link rel="stylesheet" href="Temas/GrisHome.css" type="text/css" media="all" />
    </head>
    <body>
    <div id="panel_contenedor" name="div_contenedor" class="div_principal">
    <div id="panel_superior" name="div_superior" class="div_sup">
    <div id="panel_logo" class="div_logo">
    <img id="img_logo" alt="" src="Imagenes/Textura1.png" class="img_logo">
    </div>
    <div id="menu" class="div_menu">
    <a href="catalogo.html" target="_blank"><img src="Imagenes/quien.png" onmouseover="this.src='Imagenes/quien1.png';" onmouseout="this.src='Imagenes/quien.png';"/></a>

    <!--
    <img id="boton_Inicio" alt="" src="Imagenes/inicio.png" class="botonInicio"></a>
    <img id="boton_Catalogo" alt="" src="Imagenes/recortr.png" class="botonCatalogo">
    <img id="boton_Quienes" alt="" src="Imagenes/quien.png" class="botonQuienes">
    <img id="boton_Contacto" alt="" src="Imagenes/contct.png" class="botonContacto">-->
    </div>

    ResponderEliminar
  81. El código está bien. En la primera y tercera URL que dice Imagenes/quien.png debe ir la imagen que se verá por defecto en su estado normal. Y en la segunda URL que también dice Imagenes/quien.png debe ir la imagen que se mostrará al pasar el cursor.

    ResponderEliminar
  82. OOOhhh!!! tienes toda la razón, el acomodo de las imágenes y el nombramiento por mi parte estuvo mal muchas gracias y tu blog sigue asombrándome

    ResponderEliminar
  83. Hola Potro Puse una corona en mi blog me puedes decir por que no cambia del segundo nuevamente al primero?saludos y buen dia...quetal mis cambios?

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

    ResponderEliminar
  85. Pon el código así Ady:

    <img src="http://www.yodibujo.es/_uploads/_tiny_galerie/200811/corona-navidad5-source_4db.gif" onmouseover="this.src='http://imagenes.gifmania.com.pr/Gifs-Animados-Navidad/Animaciones-Coronas-Navidad/corona-navidad104.gif';" onmouseout="this.src='http://www.yodibujo.es/_uploads/_tiny_galerie/200811/corona-navidad5-source_4db.gif';" oncontextmenu="alert('desactivado');return false" oncopy= "alert('desactivado');return false"/>

    ResponderEliminar
  86. GRACIAS MIL POTROOOO ERES GENIAL..!!!!Y GRACIAS POR TOMARTE TU TIEMPO.. BESOS..

    ResponderEliminar
  87. CONTACTO ESTA DESACTIVADO? PUES NO PUEDO ENTRAR POTRO QUERIDO...

    ResponderEliminar
  88. Está activado, lo desactivo a veces cuando se satura de correos pero ya está de vuelta ;)

    ResponderEliminar
  89. ok ya recibí tu respuesta, no quedó como me decías pero me dió una ayudadota .. muchas gracias..!!!Una pregunta porque mis animaciones flash de repente quedan en blanco y luego regresan o de plano se quedan unos en blanco y ya no se ven..O será que sólo yo los veo así? saludos

    ResponderEliminar
  90. Puede ser tu navegador, el hosting donde estén alojados, o quizá cuando los ves al mismo tiempo tienes abiertas otras páginas o programas que consumen recursos del ordenador.
    Tendrías que probar verlos cuando no tengas nada más abierto, y de ser posible desde otro navegador para mirar si ahí sucede lo mismo con las animaciones.

    ResponderEliminar
  91. ok .. ya le pegunté a mis contactos y todos lo ven igual osea en blanco total, los tengo en el sitio de google.. eso tendrá que ver?? en cualquier otro navegador los veo igual osea en blanco..

    ResponderEliminar
  92. Entonces podría ser el código que estás usando. ¿Cuál es el blog donde tienes el problema y cuál es el gadget que aparece en blanco?

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

    ResponderEliminar
  94. http://ady-migranespacio.blogspot.com/2011/11/bailarina-de-la-3a.html

    ResponderEliminar
  95. Lo primero es que tus archivos en Google Sites están como privados, así que sólo tú podrás verlos, el resto de la gente no podremos verlos hasta que cambies los permisos a Público.
    Lo segundo es que el código que estás usando está un tanto incompleto, mira aquí cómo sería el código que utilizarías para un archivo flash:
    http://ciudadblogger.com/2009/06/insertar-banners-en-flash.html

    ResponderEliminar
    Respuestas
    1. Gracias Potro andaba perdido tu comentario.. apenas lo vi..!! un abrazo...:P

      Eliminar
  96. hola! te vengo molestandoo de nuevo...

    es que quiero que esa imagen cuando aparesca la otra tenga un desvanecimiento. como se hace?¡?

    ResponderEliminar
  97. Supongo que habría que usar un script más complejo, aunque por ahora no se me ocurre alguno :(

    ResponderEliminar
  98. QUE TAL POTRO, MIRA COMO SERIA EL CODIGO PARA OCULTAR Y MOSTRAR UN BOTON DE AYUDA AL PASAR EL RATON, ESPERO ME PUEDAS AYUDAR TENGO YA EL BOTON PERO ESTATICO

    ResponderEliminar
  99. Hola Potro! quiero agradecerte este genial truco, lo he utilizado en mi blog para poner distintas imagenes retocadas de antes y depues de ser editadas, y me ha funcionado a la primera, cosa extraña en mi, queda muy efectivo visualmente y es lo que precisamente andaba buscando.
    Mil gracias por tu labor.
    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Tesa, qué gusto que hayas tenido los resultado que esperabas ¡y a la primera! :)
      Gracias por tu visita.
      Saludos!

      Eliminar
  100. Osea me refiero a que quiero tener un Boton e ayuda al lado izquierdo de mi pagina pero quiero que ese boton se esconda y al pasar el raton aparesca no se si me explique bien, en mi pagina puedes ver ese botoncito de ayuda en el lado derecho de del blog, es esta www.variedadespalencia.tk te cuento que esta hecha en un 90% con tus trucos gracias de verdad que ayudas muchisimo sigue asi hermano es muy valiosa tu ayuda

    ResponderEliminar
    Respuestas
    1. Gracias por los detalles extra :)
      Te había dejado un comentario haciendo referencia a otra entrada para que consigas lo que deseas, pero no me había fijado que ya estabas allá :P
      Pues eso, el botón puedes hacerlo con el menú de pestañas que se esconde :)

      Eliminar
  101. Ola potro ayudarme quiero esto pero con un efecto de cambio de color si quieres un ejemplo mira a donde dice download en este link http://www.pixeden.com/psd-web-elements/retro-web-ribbons-vintage-psd-pack
    ayudame lo mas tronto ¡potro! sos el mejor!

    ResponderEliminar
    Respuestas
    1. Ese es un DIV normal, sólo que le han aplicado un color de fondo distinto al pasar el cursor. Por ejemplo:
      <div class="caja1">Descargar</div>

      Y luego en los estilos especificas cómo se verá en su estado normal:
      .caja1 {
      background:#ccc;
      width:150px;
      height:80px;
      }

      Y luego el color de fondo que tendrá al pasar el cursor:
      .caja1:hover {
      background:#000;
      }

      Eliminar
  102. me podéis hacer una entrada? Gracias!
    PORTRO !
    lo siento si te molesto!

    ResponderEliminar
    Respuestas
    1. No es ninguna molestia, sólo que tomará algo de tiempo porque aun tengo otras entradas pendientes :/
      Saludos!

      Eliminar
  103. GRandiosooo *o* tengo una duda saliendome de este tema ´pero como puedo hacer "invisible" una aplicación para blogger , por ejemplo hay paginas en las que puedes poner cursores o lluvia de nieve pero tienen su respectivo logo mi duda es como puedo hacerlo invisible sin que desaparesca su funcion ,para ahorrar espacio :s

    ResponderEliminar
    Respuestas
    1. Depende de cada código, no hay una regla general ya que cada uno agrega su publicidad de distintas formas. Usualmente sólo es quitar una parte del código, pero puedes probar, ir quitando partes del código que te han dado hasta que te dé resultado :)

      Eliminar
  104. Hola!
    Disculpa, esto funciona si las imágenes son .gif?
    Porque ya lo he puesto y no cambia a la imagen Dos, se queda en la uno y no entiendo cual es el problema..
    Me ayuda usted?

    ResponderEliminar
    Respuestas
    1. Funciona para cualquier imagen. Necesitaría ver el código que has puesto, quizá en la colocación está el error. ¿En cuál blog has puesto el código y en qué parte está exactamente?

      Eliminar
  105. Hola potro, muy bueno el post. Me preguntaba como se podia poner que de UNA imagen (ocultando otras cosas que tiene la imagen) cuando pases el cursor cambié por el otro pedazo que no se muestra en la imagen norma. Acá te mando un ejemplo de lo que mas o menos es a la imagen https://twimg0-a.akamaihd.net/a/1330626450/t1/img/twitter_web_sprite_icons.png. Pero de ahí cambian y se muestra solo algunos pedazos pero todo sigue siendo una imagen. Encontré unos códigos (http://cosasparaelblog.com.ar/2009/02/botones-con-imagenes-cambiar-imagen-al.html) para que (creo) que es lo que to quiero. Pero no sé utilizarlos :( Me explique bien? quiero que se muestren pedasos y que cambien por otros el pasar el cursor.

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Dante, esos se llaman "sprites". Por ahora no tengo alguna entrada sobre ese tema, pero busca en Oloblogger, ahí han abordado ese tema un par de veces. Saludos.

      Eliminar
  106. Gracias! Encontre justo lo que queria (http://www.oloblogger.com/2010/04/rollover-con-css-y-sprites.html)
    Saludos

    ResponderEliminar
  107. No me funciona, y eso que es sencillo ¿por qué? ¿Algún otro código le impide que funcione?

    ResponderEliminar
    Respuestas
    1. Quizá lo estás poniendo en la pestaña Redactar, o después de ponerlo has cambiado a esa pestaña. Asegúrate de ponerlo en la pestaña Edición de HTML del editor de entradas, y una vez que esté puesto no cambiar a la de Redactar.

      Eliminar
  108. No, no, lo quiero poner en un gadget de la sidebar, y lo hago directamente en edición HTML, sin pasar a Redactar, por lo que no entiendo qué pasa. Lo hago meticulosamente, una y otra vez, sin borrar nada que no se deba borrar, pero de momento, no da resultado. Se ve que no quiere aparecer por mi blog :) ¿Alguna idea Potro?

    ResponderEliminar
  109. Pues te informo. Está en este blog: http://filologabibliofila.blogspot.com/

    Está puesto el truco en el gadget de la sidebar titulado "Bibliofiliómetro, rating lecturas". A mi al menos no me funciona. Se ve la primera imagen, pero al pasar el mouse para que se vea la segunda imagen, todo se queda en blanco y desaparece. Por eso no entiendo qué ocurre, porque antes me funcionaba.

    A ver si puedes ayudarme Potro. Gracias.

    ResponderEliminar
    Respuestas
    1. Lo que pasa es que la URL del enlace que has puesto no funciona, si abres el link verás que la imagen no existe:
      https://lh3.googleusercontent.com/-b3gihvpjl64/t2zpwydh_ti/aaaaaaaaijk/gnqftcnvdfa/s381/puntuaciones.png

      Eliminar
  110. Ya lo veo. Pues entonces no entiendo por qué falla el enlace porque vuelvo a subirlo a Picasa con otro nombre y sigue igual. Gracias de igual modo por la ayuda Potro.

    ResponderEliminar
  111. Potro, finalmente funcionó, pero curiosamente no con tu truco. Si me permites informarte qué hice te paso el script que apliqué en mi blog para que funcionara este efecto con las imágenes:

    http://elbalcondejaime.blogspot.com/2008/11/imgenes-que-cambian-pasando-el-cursor.html

    Es del Balcón de Jaime. Te lo paso porque ya digo, tu truco no me funciona si aún cambiando la url de la 2ª imagen que dio problemas, y dado que puede pasarle esto a demás personas, puedes creer conveniente editar el código o algo. Lo dicho, gracias y salu2.

    ResponderEliminar
    Respuestas
    1. ¿Sabes cuál debió ser el problema? Que Blogger trae por ahí un bug desde hace tiempo, y a raíz de ese error cambia las URLs a minúsculas, cuando es así entonces las URLs como de las imágenes no funcionan:
      http://ciudadblogger.com/2010/12/las-mayusculas-y-las-minusculas-en-las.html

      Saludos.

      Eliminar
  112. Gracias por el dato de las mayúsculas y minúsculas, lo ignoraba, y es bueno tenerlo en cuenta en el futuro. Un saludo.

    ResponderEliminar
  113. Hola potro disculpa la molestia pero por favor ayudame con algo...Este código para cambiar una imagen al pasar el cursor me funciona perfectamente en las entradas pero como gadget no me funciona.. que tengo que hacer para que me funcione... cuando lo agrego como gadget al pasarle el cursor por encima se me pone la imagen minichiquita como un cuadrito y así se queda... "De lo peor" por favor ayudame... y muchisias gracias!

    ResponderEliminar
    Respuestas
    1. Se coloca de la misma forma. Si te aparece un cuadrito pequeño entonces es muy posible que lo que esté mal es la URL de la imagen que has puesto. Revisa ambas URLs, sino fuera eso dime en cuál blog lo has puesto, y en qué parte exactamente.

      Eliminar
    2. No es eso las URLS están perfectas y lo puse de la barra de al lado de gadget del lado derecho pero ya lo quité por que da mal aspecto que hago?... a un amigo mio le funciona y perfectamente pero a mi nop solamente en las entradas pero no como gadget!!!

      Eliminar
    3. Como te dije, sino es eso entonces necesito verlo puesto para poder ver el código que colocaste.

      Eliminar
    4. ok potro pero por favor que sea rápido ya que son muchas visitas al dia mas de 1400!!!!!, esta es la URL de la página: http://codigos-con-jim011.blogspot.com/ :( Y gracias po la ayuda que me puedas ofrecer!!

      Eliminar
    5. No tienes que apresurarme, respondo tan rápido como puedo pero el blog no es lo único que tengo que hacer.
      En efecto, la URL de la imagen está mal, y eso es fácil comprobarlo si tú directamente ingresas a la URL que pusiste:
      http://4.bp.blogspot.com/-whaxpl1u0my/t6rrsguarei/aaaaaaaacmu/j6jtm4p58bw/s1600/trackers.png

      Posiblemente Blogger te esté cambiando las mayúsculas de la URL por minúsculas y por eso deja de funcionar.
      Prueba cambiar todas las comillas simples ' (pero sólo las simples) por esto:
      &#039;

      Eliminar
    6. lo siento, perdón no quise apurarte!, y muchas gracias por todo lo que me has enseñado durante tanto :) veré si me funciona...

      Eliminar
  114. Hola potro, fíjese que a mi nada me ha funcionado de los consejos que le ha dado a Jim 011. Le dejo link a mi blog, talvez sabe qué pasa o es que blogger hizo cambos.

    El error que dá es el siguiente: cuando paso el mouse no cambia a la otra imágen y más bien se elimina por completo.

    http://otakunonikaarticulos.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola FUNK, ¿exactamente cuál gadget es?

      Eliminar
    2. Hola Potro. Ya resolví. Muchísimas gracias por contestar. La verdad es que de acá mismo saqué la solución, era eso de que la comilla simple me la pasaba a otra cosa. Pero, yo lo redactaba mal y tu solución no me daba por eso, hasta que la escribí bien resultó.

      Ya resolví. Gracias nuevamente.

      Eliminar
  115. Hola Potro. Gracias por compartir, me ha servido de mucho.
    Tengo el problema que la imagen desaparece cuando paso el cursor por arriba y desaparece todo. Lo puse en un gadget HTML/JavaScript. Blogger me convierte todo a minúscula, aúnque lo copié con mayúsculas. También probé desde Mozzilla, Chrome e IE, y en todos se cae.
    Ah, las imágenes las tengo en picassa 3. Y en lo demás anda todo bien.
    Qué podrá ser? Gracias de antemano. Te dejo mi blog: http://scsarquitecto.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Sebastian, cambia todas las comillas simples ' (sólo las simples) por esto:
      &#039;
      Luego pon de nuevo las URLs de tus imágenes.
      Saludos.

      Eliminar
  116. Gracias, me funcionó! La otra vez lo probé y no se qué error habré cometido. Ahora sí todo anda bien. Muchas gracias Potro!

    ResponderEliminar
  117. Olle potro ami me llevo 1:30, Buscando que me fallaba, lo que me paso es que subia mis imagenes a imgur.com o desde el blog pero el caso es que me daba 1 URL Con mayusculas y minusculas creo que por esto: ''
    Hasta que subi a tinypic mis imagenes me funciono ya que Tinypic me dio la URL con minusculas.

    Gracias Auque me tarde Jajajaja.☺

    Mi Blog: Pro Conexion

    ResponderEliminar
    Respuestas
    1. Es mejor si las subes a Picasaweb, las imágenes del blog cargan más rápido ahí ;)

      Eliminar
  118. Gran truco. Me sirvió, aunque tuve que hacerle un pequeño apaño para adaptarla a mis propósitos. Muchas gracias.

    ResponderEliminar
  119. hola potro. Esto es lo que busco sólo que en vez de pasar el ratón quiero que sea al hacer clic. Es posible?

    ResponderEliminar
    Respuestas
    1. Hola JuanMa, el código sería así:
      <img src="URL de la imagen UNO" onclick="this.src='URL de la imagen DOS';" ondblClick="this.src='URL de la imagen UNO';"/>
      Con un click cambiaría a la segunda imagen, con doble click regresaría a la imagen original.

      Eliminar
  120. hola potro y como puedo hacer para que las imagen me mande a un link

    ResponderEliminar
    Respuestas
    1. Mira el comentario #30 pero quítale el target="_blank"

      Eliminar
  121. Hola potro=)
    Como usar una imagen como esta para el boton de "Leer Mas"???
    Thank!=)

    ResponderEliminar
    Respuestas
    1. Igual, sólo usa el código de esta entrada en lugar del texto "Leer más".

      Eliminar
  122. Hola!
    se podría hacer igual pero q al ser mouseHover fueran cambiando varias fotografias y con mouseOut que volviera a la original. Como una preview de videos :D

    ResponderEliminar
  123. Hola!

    Se podría hacer igual pero con más de una imagen? quiero decir que cuando pasas el ratón por encima pasen varias imagenes y cuando lo quitas vuelve a la que estaba. Como una preview de video.

    gracias!

    ResponderEliminar
    Respuestas
    1. No S·B, para eso necesitarías un script más complejo, esta función es demasiado simple y sólo admite una imagen sin efecto carrusel ni nada por el estilo.

      Eliminar
  124. Hola!
    me gustaria saber si agregandole algo a ese codigo (o con algun otro...) se puede hacer que paresca que la imagen da la vuelta (como lo de vistas dinamicas> flipcard de blogger)

    ResponderEliminar
    Respuestas
    1. Hola Zahira, con este método no, no sé si haya alguno que lo haga, supongo que necesitarías un script de jQuery para hacer algo parecido, aunque como te decía, no conozco alguno :(

      Eliminar
    2. umm ok, vale gracias :/ buscare por ahi entonces :P

      Eliminar
  125. Disculpa otra pregunta porque en una imagen no sale la mano al ponerse encima de ella con el raton. Sale la flecha?
    Que hay que hacer?

    ResponderEliminar
  126. Hola potro.

    ¿Se puede hacer esto en una imagen flotante fija?

    Muchas Gracias

    ResponderEliminar
    Respuestas
    1. Sí, aplícale al código de esta imagen los estilos para hacerla flotante:
      style="position:fixed; bottom:0px; right:0px"

      Eliminar
  127. Hola, quiero hacer un menu de aproximadamente 20 botones y alojaría cada imagen (en total 40) en Picassa y luego lo colocaría en un HTML/Javascript. Mi pregunta es: ¿se enlentecerá mucho la carga de la página, ya que tiene que llamar a 40 imágenes y 20 enlaces? Muchas gracias por tu atención, saludos cordiales =)

    ResponderEliminar
    Respuestas
    1. Sí, sobre todo si las imágenes son grandes. En esos casos es mejor usar sprites:
      http://www.ayuda-bloggers.info/2011/09/como-usar-css-sprites-para-acelerar-el.html

      Eliminar
  128. Hola Potro buenas tardes;
    Me gustaría conseguir el efecto que se puede ver en el footer de la siguiente web http://www.lenceria-sexy.net/, como se puede ver hay un cambio de color y una variación ya que cambia la "+i" por una flecha.
    ¿Cómo podría conseguirlo?.
    Gracias y un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Rubén, supongo que puedes hacer algo parecido usando sprites:
      http://www.oloblogger.com/2010/04/rollover-con-css-y-sprites.html

      Eliminar
  129. Potro, estoy usando el slider de imágenes (Easy Slider) en mi blog. Ahora acabo de aplicar este código para cambiar las imágenes al momento de pasar el mouse Y quiero que la imagen que se vea en el slider sea la que se muestra al pasar el cursor y no la que se ve. ¿Me dejo entender?. Por ejemplo, yo quiero que se vea en el slider la foto a color y no la de blanco y negro como puedes ver en las dos primeras entradas de mi blog. http://mano-cambiada.blogspot.com/

    Quiero saber si es esto posible y como. :S

    ResponderEliminar
    Respuestas
    1. Hola Diego, el problema con estos sliders automáticos es que toman por defecto la primera imagen que encuentren siempre, no la segunda ni las subsecuentes :/

      Eliminar
  130. saludos, interesante la forma de hacer la transición de imágenes con el maus, mi consulta es si es posible poner un tiempo para que cambie las imágenes, ya que es muy rápido el efecto

    ResponderEliminar
  131. saludos, una consulta , es posible poner tiempo al momento de cambiar las imágenes, ya que cambia muy rápido las imágenes

    ResponderEliminar
    Respuestas
    1. Nop, no se puede controlar el tiempo con el que cambia.

      Eliminar
  132. se puede que si le dan clic a la imagen los llebe a un link

    ResponderEliminar
  133. hola Potro, me parece excelente este y el efecto de que se agrande la imagen pero tengo un problema, de entrada tengo una imagen muy pequeña la cual tuve que reajustar desde corel exportandola para web, con esa opción se distorsiona mucho la imagen entonces al agrandarla pues tu imaginaras que pixeleada se ve, no se si me puedas recomendar que hacer, te has de preguntar por que no solo le ajusto el tamaño de forma manual?... lo hago desde corel por que debe tener ciertas dimensiones y con la opción de EXPORTAR PARA WEB me da la opción de poner el tamaño correcto, saludos y bastante bueno y explicito tu blog.

    ResponderEliminar
  134. Saludos Potro, antes que nada felicitarte por tu blog, muy explicito en todo, oye mi pregunta es... como hacer para que la imagen que se agrande no se distorcione, por desgracia la imagen que tengo en pequeño esta algo distorcionada pero por la que quiero que se vea en grande esta muy clara pero es de mayor tamaño, saludos y gracias

    ResponderEliminar
    Respuestas
    1. Tendrás que hacer la imagen más grande, al menos con mayor resolución y un formato como PNG. Te recomiendo que uses otro programa para las imágenes, tal vez Photoshop u otro similar.

      Saludos!

      Eliminar
  135. Hola, primero que nada darte las gracias por tu aportación, me ha sido muy util.Esta aplicación la tengo en botones de un menu. Mi duda es que me gustaria que se quedara en enonmouseover="this.src='img2/boton/productos_am.png';" cuando este en la pagina actual.
    Asi es como lo tengo en mi primera página que estoy creando claseshtml.com : src="img2/boton/productos_az.png" onmouseover="this.src='img2/boton/productos_am.png';" onmouseout="this.src='img2/boton/productos_az.png';"/>

    ResponderEliminar
  136. Hola, primero que nada darte las gracias por tu aportación, me ha sido muy util.Esta aplicación la tengo en botones de un menu. Mi duda es que me gustaria que se quedara en enonmouseover="this.src='img2/boton/productos_am.png';" cuando este en la pagina actual.
    Asi es como lo tengo en mi primera página que estoy creando claseshtml.com : src="img2/boton/productos_az.png" onmouseover="this.src='img2/boton/productos_am.png';" onmouseout="this.src='img2/boton/productos_az.png';"/>

    ResponderEliminar
  137. Hola, primero que nada darte las gracias por tu aportación. Tendo una duda que me gustaría resolver. He puesto tu aplicacion en mi menu principal. Pero me gustaria que se quedara marcado la segunda imagen a razon de la pagina en la que estes, sabrias la funcion?.
    Yo lo tengo puesto ahora mismo asi: Gracias de antemano.

    src="img2/boton/inicio_az.png" onmouseover="this.src='img2/boton/inicio_am.png';" onmouseout="this.src='img2/boton/inicio_az.png';"/>

    ResponderEliminar
  138. Hermano gracias por la generosidad.
    Lo hice y resulta, pero de modo muy lento...si la comparo con la imagen que tienes al inicio del articulo..la mia demora demasiado, un par de segundos y cambia..se muere el efecto...las imagenes las he alojado en google sites, sera por eso?...si es eso..me indicas otro hosting--o el q usaste para cargar tu imagen inicial...
    Desde ya , muchas gracias...
    PD: Lo hago en una pagina de jimdo

    ResponderEliminar
  139. Hermano, gracias por la generosidad
    Lo hice y me resulta, pero de modo muy lento... como trabado...las imagenes las aloje en google sites,,sera por eso?..si es eso me indicas otro hosting o el que usaste para tu imagen que abre el articulo, esa velocidad requiero, pero no es la q obtengo...
    Me puedes ayudar?
    Desde ya muchas gracias!

    ResponderEliminar
    Respuestas
    1. Puede ser por el hosting, o por el tamaño de la imagen, prueba con una imagen más pequeña (en kilobytes), si te sucede lo mismo entonces cambia de hosting, el de Picasaweb suele ser más rápido, y también es de Google.

      Eliminar
  140. Hola....no se porque al poner la segunda imagen no me sale!! hace como si no reconociera la segunda foto y copio tu ejemplo de nuevo para ver que me falta y pongo mi ruta de enlace y nada de nada.
    Gracias!

    ResponderEliminar
  141. Jajajajajajjaa buenisimo tal y como me gustan las cosas cuando tiene muchas más que hacer jejeje (y)

    ResponderEliminar
  142. Buenisimo jejejeje tal y como deben de ser las cosas cuando hay muchas más por hacer Gracias...

    ResponderEliminar
  143. Hey potro, muchisimas gracias!!! Me has ahorrado bastante tiempo!!

    ResponderEliminar
  144. Muchas gracias Mr. Potro!!... Me has ahorrado bastante tiempo!!

    ResponderEliminar
  145. eh Potro, como hago para que mientras el mouse este sobre la imagen me pasen de forma ciclica varias imagenes?

    ResponderEliminar
  146. eh Potro, como hago para que al dejar el cursor del mouse sobre la imagen me cambie automaticamente y ciclicamente varias imagenes

    ResponderEliminar
  147. eh Potro, como hago para que al dejar el cursor del mouse sobre la imagen me cambie automaticamente y ciclicamente varias imagenes

    ResponderEliminar
  148. Hola, te explico.

    Tengo un código HTML para mostrar un widget en mi web. Mi pregunta es si puedo hacer que, cuando un usuario de mi web pase el ratón por encima de tal widget, si puedo hacer que se muestre otra imagen, que este "oculta" encima del widget y que aparezca cuando pase el raton por encima, y que cuando clique los lleve a una pagina de mi web wordpress. Gracias

    ResponderEliminar
  149. Hola! Hace unos días vi en la pág de no recuerdo cual fotógrafo un efecto (ANTES Y DESPUÉS) muy bueno.
    Sucedía lo siguiente, en la interfaz, habían imágenes divididas en el medio por una linea vertical, la cual moviendola hacia los lados podías ver en el mismo mapa de bits la foto original y la foto final.
    Mi pregunta es, con que programa puedo lograrlo?
    Ojalá haya sido claro y agradezco cualquier info.
    Bien ahi el blog!

    ResponderEliminar
  150. Hola! Consulta... Hace días en no recuerdo cual pág de un fotógrafo vi un efecto (antes y después) muy bueno.
    Se trataba de lo siguiente. En la interfaz habían imágenes divididas al medio por una linea vertical que deslizándola a un lado veias la imagen original y moviendo dicha linea al otro lado dejaba ver la imagen editada. (en el mismo mapa de bits) Aunque dudo que fuera un mapa de bits.
    En fin, espero haber sido claro.
    Saludos y arriba este blog!

    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.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger