Foros del Web » Creando para Internet » HTML »

Popover sobre mapa de imágen

Estas en el tema de Popover sobre mapa de imágen en el foro de HTML en Foros del Web. Hola, me han pedido un diseño en el que debo transformar un ppt en una web. Ya he realizado todo lo necesario para la web, ...
  #1 (permalink)  
Antiguo 15/10/2014, 07:32
dankko
Invitado
 
Mensajes: n/a
Puntos:
Busqueda Popover sobre mapa de imágen

Hola, me han pedido un diseño en el que debo transformar un ppt en una web.

Ya he realizado todo lo necesario para la web, pero claro, al tener que utilizar imágenes en lugar de maquetar, algunas imágenes no se ven muy bien.

Estas imágenes deben estar mapeadas con enlaces, lo cual es tarea engorrosa, pero sencilla.

El problema real viene ahora, necesito utilizar un efecto popover (tipo Twitter Bootstrap) sobre un enlace generado por un mapa de imágenes.

Os dejo un ejemplo:

Código HTML:
Ver original
  1. <img src="./img/articulos.png" width="720" height="540" border="0" usemap="#articulos" />
  2. <map name="articulos" id="articulos">
  3.   <area shape="rect" coords="11,107,147,150" href="article1" target="_blank" />
  4. </map>

Y sobre el área mapeada tendría que aparecer este tooltip al pasar el ratón, es decir, en lugar de que enlace a un link, que haga el efecto del popover.

Código HTML:
Ver original
  1. <a id="example" data-content="texto" rel="popover" href="#" data-original-title="Title"></a>

Aquí está la función en js del popover:

Código Javascript:
Ver original
  1. $(function () {
  2. var $popoverInbox = $('#example').popover({
  3. title: 'Test',
  4. placement: 'bottom',
  5. trigger:'manual',
  6. template: '<div class="popover-all"><div class="popover-arrow"></div><div class="popover-inner"><h3 class="popover-title">Example</h3><div class="popover-content"></div></div></div>'
  7. });
  8.  
  9. var timerPopover, popover_parent;
  10.  
  11. function hidePopover(elem) {
  12. $(elem).popover('hide');
  13. }
  14.  
  15. $('#example').hover(
  16. function() {
  17. var self = this;
  18. clearTimeout(timerPopover);
  19. $('.popover-all').hide(); //Hide any open popovers on other elements.
  20. popover_parent = self;
  21. $(self).popover('show');
  22. },
  23. function() {
  24. var self = this;
  25. timerPopover = setTimeout(function(){hidePopover(self);},300);
  26. }
  27. );
  28.  
  29. $(document).on({
  30. mouseenter: function() {
  31. clearTimeout(timerPopover);
  32. },
  33. mouseleave: function() {
  34. var self = this;
  35. timerPopover = setTimeout(function(){hidePopover(popover_parent);},300);
  36. }
  37. }, '.popover-all');
  38.  
  39.  
  40. });

Para que funcione se deben incluir las librerías de js de bootstrap y jquery en el header de la web:

Código HTML:
Ver original
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  2. <!-- <script src="./js/zoomy.min.js"></script> -->
  3. <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

Alguien sabría solucionar el problema? Llevo varios días intentándolo pero no consigo dar con la clave.

Saludos.

Etiquetas: bootstrap, jquery, map
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:27.