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:

<div id="container">
    <img src="images/testMap_w.png" width="800" height="220" alt="TestMap W" usemap="#testMap">
    <map name="testMap">
        <area shape="polygon" coords="20,20,106,20,106,106,20,106" href="http://www.stackoverflow.com" id="box" />
        <area shape="polygon" coords="216,50,339,50,277,156" href="http://www.google.com" id="triangle" />
        <area shape="polygon" coords="460,0,574,0,460,220" href="http://www.cnn.com" id="bordertriangle" />
        <area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="http://slashdot.org" id="pentagon" />
    </map>
    <img src="images/testMap_box.png" width="800" height="220" alt="TestMap Box" id="ID_box">
    <img src="images/testMap_triangle.png" width="800" height="220" alt="TestMap Triangle" id="ID_triangle">
    <img src="images/testMap_border_triangle.png" width="800" height="220" alt="TestMap Border Triangle" id="ID_bordertriangle">
    <img src="images/testMap_pentagon.png" width="800" height="220" alt="TestMap Pentagon" id="ID_pentagon">
</div>

Helvellyn

This tutorial might help: Rollover effects using jQuery Maphilight plugin – Mena

Answer 1

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.

Ramification

Thanks for this. It just leverages the map's coordinates with a flat overlay. The rollovers I've got in the final banner use gradient transparency that aren't flat, but this is a nice fallback if I can't get that to work. – Helvellyn

It works both in my IE8 and on the external IE8 hosted here spoon.net/Browsers @digiguru: What do you mean by "doesn't work"? Can you provide specifics. – Rebekahrebekkah

This plugin is poorly documented, why does it have to be that any search for "jquery image map" returns this plugin, I hate when people assume a plugin is the answer to everything when it may be rather simple to do what is needed without the plugin (which usually uncessarily restricts what you can do, as if its not part of its API its more of a pain to use the plugin than code it yourself) – Tarpan

people probably assume that whatever is #1 on google, it is the best solution to the problem. – Ramification

Good news: the #1 result on Google is now this question. :-) – Nadenenader

It took me more than a week trying to figure out how I can get my project to fit in with these plugins (having multi-color, pre-existing highlights that won't count as "selected", etc.). I dropped it & it took me a few days to create my own that would fit perfectly to my project. I shouldn't have had wasted time with these plugins; well built and well documented as they are...everyone who intends to use plugins in general, should keep in mind that they don't always apply even though at first they may seem to. Then again, they gave me idea on how to do it...I'm still thankful that I tried them. – Origen

@Ramification Can you please look into my question and help me https://mcmap.net/q/302583/-jquery-maphighlight-for-changing-area-highlight-color-based-on-condition/2118383 – Kosey

sorry, dont have time – Ramification

Nice solution, it doesn't seem to work well with 'rwdImageMaps' for responsive maps ( github.com/stowball/jQuery-rwdImageMaps ) Any ideas? – Hardback

pull request or fork it :P it seems to have a ton of issues now-a-days so forking is probably the way to go – Ramification

Answer 2

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.

Wheeling

Answer 3

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.

Serena

Answer 4

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.

Ottoottoman