Using JQuery hover with HTML image map

Question

I have a complicated background image with a lot of small regions that need rollover illustration highlights  along with additional text display and associated links for each one  The final illustration stacks several static images with transparency using z-index  and the highlight rollover illustrations need to display in one of the in-between    sandwich    layers to achieve the desired effect   After some unsuccessful fiddling with blocks  I decided this might be done with an old-school image map  I made a schematic test map with four geometric shape outlines and    filled    them using with png rollovers  The idea is to associate the image map with the bottom background layer  initialize all the rollovers with css  visibility  hidden  and use Jquery   s hover method to make them visible as well as reveal associated text in a separate div  The separate text function is why I   m not trying to this with the  hover pseudoclass instead of jQuery hover  Because I was using the image map  I made all the rollover pngs  which have transparent backgrounds  sized to the full container for exact placement so everything lines up precisely   What I got works    not really  The image map is correctly mapped to activate only the geometric areas  But the href from each rollover area works only intermittently  and using Jquery hover with css visibility is messed up  Desired behavior is that rolling into the area simply would make the shape solid  What actually happens is any motion inside the shape makes rapid toggling between visible and hidden  when the cursor stops within the shape  it might be visible or it might not  Any ideas appreciated   sample hover setup  I   ll ultimately use arrays for real rollovers  associated links and text        triangle   hover      function                 ID triangle   css   visibility     visible                function                 ID triangle   css   visibility     hidden               image map    lt div id  container  gt       lt img src  images testMap w png  width  800  height  220  alt  TestMap W  usemap   testMap  gt       lt map name  testMap  gt           lt area shape  polygon  coords  20 20 106 20 106 106 20 106  href  http   www stackoverflow com  id  box    gt           lt area shape  polygon  coords  216 50 339 50 277 156  href  http   www google com  id  triangle    gt           lt area shape  polygon  coords  460 0 574 0 460 220  href  http   www cnn com  id  bordertriangle    gt           lt area shape  polygon  coords  704 65 769 115 744 196 665 196 640 115  href  http   slashdot org  id  pentagon    gt       lt  map gt       lt img src  images testMap box png  width  800  height  220  alt  TestMap Box  id  ID box  gt       lt img src  images testMap triangle png  width  800  height  220  alt  TestMap Triangle  id  ID triangle  gt       lt img src  images testMap border triangle png  width  800  height  220  alt  TestMap Border Triangle  id  ID bordertriangle  gt       lt img src  images testMap pentagon png  width  800  height  220  alt  TestMap Pentagon  id  ID pentagon  gt   lt  div gt

User · Answer

I found this wonderful mapping script  mapper js  that I have used in the past  What s different about it is you can hover over the map or a link on your page to make the map area highlight  Sadly it s written in javascript and requires a lot of in-line coding in the HTML - I would love to see this script ported over to jQuery  P  Also  check out all the demos  I think this example could almost be made into a simple online game  without using flash  - make sure you click on the different camera angles

User · Answer

You should check out this plugin   https   github com kemayo maphilight  and the demo   http   davidlynch org js maphilight docs demo usa html  if anything  you might be able to borrow some code from it to fix yours

User · Answer

Although jQuery Maphilight plugin does the job  it relies on the outdated verbose imagemap in your html  I would prefer to keep the mapcoordinates external  This could be as JS with the jquery imagemap plugin but it lacks hover states  A nice solution is googles geomap visualisation in flash and JS  But the opensource future for this kind of vectordata however is svg  considering svg support accross all modern browsers  and googles svgweb for a flash convert for IE  why not a jquery plugin to add links and hoverstates to a svg map  like the JS demo here  That way you also avoid the complex step of transforming a vectormap to a imagemap coordinates

User · Answer

This question is old but I wanted to add an alternative to the accepted answer which didn t exist at the time    Image Mapster is a jQuery plugin that I wrote to solve some of the shortcomings of Map Hilight  and it was initially an extension of that plugin  though it s since been almost completely rewritten   Initially  this was just the ability to maintain selection state for areas  fix browser compatibility problems  Since its initial release a few months ago  though  I have added a lot of features including the ability to use an alternate image as the source for the highlights   It also has the ability to identify areas as  masks   meaning you can create areas with  holes   and additionally create complex groupings of areas  For example  area A could cause another area B to be highlighted  but area B itself would not respond to mouse events   There are a few examples on the web site that show most of the features   The github repository also has more examples and complete documentation

[javascript] Using JQuery hover with HTML image map

Examples related to javascript

Examples related to jquery

Examples related to hover

Examples related to imagemap