Incluir tooltip en mapa de imagenes jquery
Categories: AJAX, CSS - Tags: AJAX, jqueryUsando 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'); } |
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?
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
Hola! cómo hago para que no aparesca el link del vínculo y sólo el atributo title??? super urgenteeeee
muy buen aporte
Hola alguien me puede decir como cambiar los textos para que en vez de textos aparezca otra imagen
Excelente…
Gracias !!