Incluir tooltip en mapa de imagenes jquery

por | Mar 16, 2009 | AJAX, CSS | 6 Comentarios

Usando un plugin para jquery voy a explicar como colocar tooltips en un mapa de imagen.

HTML del mapa de imagenes

Es practicamente igual que cualquier mapa de imagenes, title es la descripcion

1
2
3
4
5
6
7
8
9
10
11
12
<p align="center">
    <img src="mapa.gif" border="0" usemap="#mimapa" id="map" width="480" height="269" />
<map name="mimapa" id="mimapa">
  <area shape="circle" coords="199,51,9" href="http://www.koblenz.de/" alt="" title="Toboganes" />
  <area shape="circle" coords="169,53,9" href="http://www.wiesbaden.de/" alt="" title="Mamut" />
  <area shape="circle" coords="137,28,9" href="http://www.mainz.de/" alt="" title="Pistas Blandas" />
  <area shape="circle" coords="123,60,9" href="http://www.frankfurt.de/" alt="" title="Super Tobogan Gigante" />
  <area shape="circle" coords="88,24,9" href="http://www.mannheim.de/" alt="" title="Black Hole" />
  <area shape="circle" coords="89,76,9" href="http://www.heidelberg.de/" alt="Heidelberg" title="Piscina Cadetes" />
  <area shape="circle" coords="83,97,9" href="http://www.stuttgart.de/" alt="" title="Piscina Infantes" />
</map>
</p>

Agregar el plugin

Para agregar jquery y e plugin bastan un par de lineas de codigo

1
2
<script language="javascript" src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript" src="jquery.tooltip.min.js" type="text/javascript"></script>

Al plugin lo podemos configurar con una sola linea de codigo, pero yo voy a agregarle algunos detalles adicionales

1
2
3
4
5
6
7
8
9
10
11
12
<script language="javascript" type="text/javascript">
$(function() {
    $("map *").tooltip({
        positionLeft: true,
        delay: 0,
        fade: 250,
        extraClass: "pretty",
        fixPNG: true,
        opacity: 0.95,
     });
});  
</script>

Estilos para el tooltip

Estos varian segun lo que querramos hacer, lo mas importante es la position absolute y el z-index

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#tooltip {
    position: absolute;
    z-index: 3000;
    border: 1px solid #111;
    background-color: #eee;
    padding: 5px;
    opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }
#tooltip.pretty {
    border: none;
    width: 210px;
    padding:20px;
    height: 135px;
    opacity: 0.8;
    background: url('shadow.png');
}






6 Comentarios

  1. usuario
    usuario el septiembre 26, 2009 a las 10:38 pm

    Hola, esta padre el pluggin, pero que crees, por mas que le he movido al css no funciona sobre IE, lo he probado en el IE 7, tienes alguna sugerencia?

  2. Miguel Manchego
    Miguel Manchego el septiembre 27, 2009 a las 9:46 pm

    Hola te recomiendo darle una ojeada a esta página parece que el problema es con el uso de PNG transparente y otras incompatiblidades de IE

  3. usuario
    usuario el agosto 31, 2010 a las 5:31 pm

    Hola! cómo hago para que no aparesca el link del vínculo y sólo el atributo title??? super urgenteeeee

  4. usuario
    usuario el marzo 6, 2011 a las 11:04 pm

    muy buen aporte

  5. usuario
    usuario el agosto 2, 2011 a las 4:15 pm

    Hola alguien me puede decir como cambiar los textos para que en vez de textos aparezca otra imagen

  6. usuario
    usuario el septiembre 11, 2011 a las 6:13 pm

    Excelente…
    Gracias !!