Mensaje de alerta al hacer click y pasar el cursor

13 de marzo de 2009 12 comentarios ,
Anteriormente les mostré cómo crear un mensaje de alerta que aparezca cuando alguien entra a su blog, ahora les diré cómo hacer que el mensaje de alerta aparezca cuando el cursor pasa por un texto específico de un post o bien haciendo click en él. Hay muchas funciones para este tipo de 'eventos del mouse' pero estos dos me parecen los más útiles.

Mensaje de alerta al pasar el cursor
<a href="#" onmouseOver="alert('Mensaje de alerta al pasar el cursor')">su texto aquí</a>

Ejemplo pasando el mouse aquí

Mensaje de alerta al hacer click
<a href="#" onClick="alert('Mensaje de alerta al hacer click')">su texto aquí</a>

Ejemplo haciendo click
aquí


Lo que está entre paréntesis es el texto que aparecerá en el mensaje de alerta, lo que está en rojo es el texto en su post.
También pueden hacerlo con una imágen, en ese caso el código queda así:

<a href="#" onClick="return false" onmouseOver="alert('Mensaje de alerta al pasar el mouse sobre una imagen')">
<img src="URL de la imagen">
</a>





Sólo deben cambiar la URL de la imágen y el width y height para que se ajusten al tamaño de su imagen.


12 comentarios en:

" Mensaje de alerta al hacer click y pasar el cursor "

  1. No hay el codigo despues de hacer clic en la imagen?

    ResponderEliminar
  2. Es el mismo procedimiento, usa el segundo código y donde dice "su texto aquí" cámbialo por el código de la imagen.

    ResponderEliminar
  3. En otro post explicas como hacer para que se habran las ventanas pop up con imágenes automáticamente...

    Y si lo que se quiere hacer es que al entrar al blog salga este pop up, tipo windows automáticamente, sin tener que poner el ratón sobre la imagen, que narices habría que hacer?

    P.D.: El post de las Shadowbox es una joya, para mostrar imágenes hechas por uno mismo de una manera elegante no hay nada mejor, y combinado con el que para que se vean mayores al al pasar el puntero por encima ya queda de lujo.

    Gracias por crear este blog. :)

    ResponderEliminar
  4. Justo al inicio de la entrada está el enlace que explica cómo hacer un mensaje de alerta de bienvenida.

    Concuerdo contigo acerca de Shadowbox, es una de las ventanas modales que más me gustan.

    ¡Saludos!

    ResponderEliminar
  5. ¿Y si quieres agregar más opciones que tan solo "Aceptar" como por ej, "si", "no", "cancelar",etc?

    ResponderEliminar
  6. Eso es un poco más complicado y depende de las instrucciones que quieras ponerle al mensaje de alerta.

    ResponderEliminar
  7. Lo hize!! *33* quedo hermoso!
    Thank!! >///<

    ResponderEliminar
  8. Hola Potro, en el blog http://revistastrucoslanas.blogspot.com/ necesito poner algo como un mensaje emergente para que pasen el mouse por la imagen aparezca un mensaje "Click para descargar" así puedo quitar el botón debajo de la imagen. Puedes ayudarme? Gracias

    ResponderEliminar
    Respuestas
    1. La verdad no sé si a estos mensajes de alerta se les pueda poner enlace, quizá te sirva mejor usar un tooltip sobre una imagen y que dentro del tooltip agregues el enlace de descarga.

      Eliminar
  9. Muchas gracias, justo lo que necesitaba, ya me salvaste varias veces, gracias por la ayuda!

    ResponderEliminar
  10. Muchas gracias, es justo lo que necesitaba. :D

    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.

 
Ir Arriba Ir Abajo
I Ciudad Blogger