1

Tengo un botón en una web de un restaurant, y quisiera que cuando pasen el ratón por encima del botón saliera una mini ventanita donde aparezca esto: (https://es.theysay.me/ranking/111/) Creo que con un evento onmouseover quizás lo podría hacer, alguien sabe que código seria el mejor? necesito algo que sea con muy poco código a ser posible, por como tengo hecha la web. Gracias.

Aclaro que esta web está hecha en Adobe Muse. Por lo que la respuesta que necesito es un script o algo con poco código que pueda copiar como objeto html encima de la imagen.

introducir la descripción de la imagen aquí

Yo puedo insertar código HTML a la imagen que quiera. En este caso el botón Gastroranking es una imagen y yo quiero que salga ese popup pequeño cuando le pase el ratón por encima. No quiero que sea clicable ni nada de eso, solo que muestre el ranking verdadero. Ya que ahora el botón redondito que aparece soy yo que lo he puesto ahí, en realidad no muestra la verdad en tiempo real.

2
  • Espero esto pueda ayudarte amigo codegena.com/image-link-preview-on-hover saludos. Commented el 1 jun. 2016 a las 8:16
  • 1
    Estaría bien que pusieras algún ejemplo de qué te permite hacer y qué no tu entorno de desarrollo, para que podamos hacer una idea más aproximada. Commented el 1 jun. 2016 a las 8:47

2 respuestas 2

3

Mediante estilos css puedes mostrar el elemento al hacer hover sobre el botón como te pongo en el ejemplo.

También incluyo código javascript que permitiría cargar, utilizando jQuery, un contenido externo en el elemento popup. En el entorno de Stack Overflow no te va a funcionar porque no lo permiten por motivos de seguridad, pero deberías poder hacerlo en tu web.

$(function(){
  $('.popup').load('https://es.theysay.me/ranking/111/');
});
.popup{
  display: none;
  width: 150px;
  height: 100px;
  background-color: yellow;
}
.popup-button:hover .popup{
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup-button">
  <button>Mostrar</button>
  <div class="popup">Contenido del popup</div>
</div>
  

1
  • Esta web está hecha en adobe muse, por lo que la edición de código está reducida. Como hay varias personas que trabajan en esta web la única forma que tengo de hacer lo que quiero es dentro del proyecto no en el código directamente, por lo que lo único que puedo hacer es insertar un objeto html, es por eso que necesito lo mínimo de código posible. En este caso tu respuesta parece buena pero no puedo insertar todo eso en el código directamente. Porque al trabajar otros en el proyecto muse los cambios escritos directamente en el código se borrarían. Commented el 1 jun. 2016 a las 8:28
-1

¿No usas ya algun pack javascript tipo jquery ui o bootstrap?

con bootstrap tienes el popover con esta documentacion podrias lanzarlo al pasar el raton

Referencia popover con Bootstrap

espero te pueda ayudar.

2
  • todo eso va integrado en los paquetes de código que crea adobe muse en cada proyecto. Me bastaría con un código tipo iframe y algo mas de código que me pudiera hacer ese efecto, pero ya digo que tiene que ser muy poco para que lo pegue en la caja que muestro en la imagen y pueda funcionar con eso. Commented el 2 jun. 2016 a las 5:31
  • he provado con tu enlace de Bootsrap pegando todo el código en mi caja, retocando algunas cosas para que mostrara mi imagen, funcionaba en la función que tiene de mostrar el previo de lo que hace el código, pero en cuanto lo pego en mi caja en Muse ya deja de funcionar. Tendré que encontrar una solución más simplona. Gracias por tu respuesta. Commented el 2 jun. 2016 a las 5:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.