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'); } |
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