I have an image map that is a literal map of the united states, with each state as a separate area element (and some states divided further). Rather than having a link, each area has an onclick event that calls a Javascript function. The problem is that removing the href attribute causes the cursor to remain an arrow when I hover over the map. I tried adding href="#", but it causes an unseemly jump when the area is clicked. Using the CSS area{ cursor: pointer; } works for Firefox but not IE. I tried using "hand" instead of "pointer," but it didn't work, either. How do I change the cursor to a hand in an image map area in IE?

4 answers

danwellman 5600
1
point

If the link doesn't have a href, it won't change cursor in IE.

Using href="#" will cause the change in the pointer, you can just use the following code to prevent the link being followed:

e.preventDefault();
e.stopPropagation();
window.event.returnValue = false;
window.returnValue = value;

To stop the unseemly jump when the link is clicked. You'll probably want to use some basic browser checking before using these properties, I usually find something like this works well:

if (window.ActiveXObject) {
    window.event.returnValue = false;
    window.returnValue = value;
} else {
    e.preventDefault();
    e.stopPropagation();
}

Your event handler function will automatcially receive the event object, you just need to specify it as an argument to use it:

function myClickHandler(e) {
  //rest of your code
}
Answered over 6 years ago by danwellman
  • Thank you! This method worked beautifully, in both browsers. Allen Boone over 6 years ago
Kau-Boy 110
1
point

You might use a href value like this:

href="void(0)"

This will do exatly nothing and it won't scroll the browser as href="#" would do.

Another solution would be to replace the onclick handler:

onlick="yourFunction"

with the href attribute and the "javascript" prefix:

href="javascript:yourFunction()"

That's not best style, but it should work for all browsers.

Answered over 6 years ago by Kau-Boy
0
points

"hand" is not a valid value for the cursor property.

Answered over 6 years ago by Nathan Duran
  • Indeed, but some browsers recognize "hand" over "pointer". I had read it somewhere as a workaround, but it mainly applies to IE5 and previous. Allen Boone over 6 years ago
0
points

IE doesn't like hover states for elements different from links. The simplest solution is to use some jQuery magic (you'll have to include jQuery in your site):

$('area').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover') });

And in your CSS define your cursor for the hover state and the new .hover class added by jQuery:

area:hover, .hover { cursor: pointer; }
Answered over 6 years ago by Mathias