> Faqs > Crear botón con imagen que al dar clic o pasar por encima se abra un gif o video

Crear botón con imagen que al dar clic o pasar por encima se abra un gif o video

Buenas a todos, estoy tratando de crear una especie de botón con una imagen y que cuando alguien pase el cursor por encima o de clic, se abra una especie de cuadro donde se pueda ver un video o un gif en loop con audio. Y que cuando se quite el mouse por encima se pause el video y no reproduzca audio hasta que se vuelva a pasar por encima o dar clic.

Muchas gracias!

Respuestas

Buenas,

Esto lo puedes hacer con la función .hover de Jquery y dentro de esta función ya iniciarias el reproductor y lo pararias cuando no detecte la presencia del ratón. Como apunte, los gif no tienen audio.

saludos.

Cristian
125 6 13

No hay nada que sirva para hacer específicamente lo que quieres. Tu necesidad se soluciona mediante programación y para ello podrías aplicar diversas técnicas. Por ejemplo solamente con Javascript o con alguna librería.

Podrías usar diversos componentes que te puedan permitir acelerar el trabajo, como tooltips o cajas modales, pero tendrás que crear el código para activarlas cuando se hace clic o se pasa el ratón por encima con los correspondientes eventos de Javascript.

Te recomiendo estudiar el manual de Javascript en la sección de eventos. Pero una vez aprendas Javascript lo que te recomendaría es usar algún tipo de componente, que puedas reutilizar las veces que haga falta y que implemente todo ese comportamiento. Puedes usar un simple plugin de jQuery o un Web Component estándar con LitElement.

Santiago
556 18 43 21