Cursor not changing to pointer in Usemap/area case

Question

I have the following HTML code which I cannot get to work quite right in all browsers:

<div id ="right_header">     
        <img id = "usemapsignin" src="/images/sign-in-panel-wo-FB.png" usemap = "#signin">
</div>      
        <map name = "signin" >
            <area shape = "rect" coords = "30,10, 150, 50" target = "_blank" alt = "signin" id="signin"
                    onMouseOver="document.images['usemapsignin'].style.cursor='pointer'"
            onMouseOut="document.images['usemapsignin'].style.cursor='auto'"/>
            <area shape = "rect" coords = "0,113, 172, 150" target = "_blank" alt = "restowner" id = "restowner"
                onclick = "alert('Hello Restaurant Owner!')"   />
        </map>

I am trying to change the cursor to pointer when moved over a part of the usemap. But its not working in Chrome/Safari.

Any help will be appreciated.

Answer 1

IE does not support changing cursor in the area tag.

What you have to do is trick it with JS.

<img id="someimage" scr="images/image.jpg" usemap="#myareamap" />

<map name="myareamap">
   <area shape="poly" alt="test" title="test" coords="0,0, 50,50, 50,100, 0,100, 0,0"  onmouseover="changeimage('someimage', 'newimagesrc')" />
</map>

this is in your javascript

function changeimage(id, imagesrc){
    document.getElementById(id).src = imagsrc;
    if (imagesrc = "images/image.jpg"){
       document.getElementById(id).style.cursor = "default";
    } else {
       document.getElementById(id).style.cursor = "pointer";
    }
}

This will do two things:

• Will allow you to easily change the image based on the imagemap they scroll over.
• Will give you the illusion that only the part of the areamap scolled over changes the cursor.

Answer 2

I found a great solution using Jquery!

$('area').hover(function(){
    //Set your cursor to whatever
    $('body').css('cursor', 'help');
}, function() {
    //set your cursor back to default
    $('body').css('cursor', 'initial');
})

Answer 3

Chrome and Safari don't support changing the CSS of map or area elements. The only straightforward way to get a mousepointer on an area is to have:

<area ... href="javascript:void(0);" />

Answer 4

I had a similar issue. The solution was add the attribute href="#" to the area instead of doing a CSS hack.

Answer 5

This should work on IE, Firefox, Chrome and Safari.

<img id="img_id" src="image.gif" border="0" usemap="#map4" />
<map id ="map4" name="map4">
    <area  shape ="poly" coords="5, 0, 100, 10, 94, 66, 0, 50" 
           href="javascript:void(0);"
           onmouseover="document.getElementById('img_id').style.cursor='pointer';" 
           onmouseout="document.getElementById('img_id').style.cursor='';"> 
</map>

Answer 6

All of these solutions are hacks that don't work well (for me they didn't work at all). After much goggling, and more pondering I determined the problem to be that the browser just does not know how to render the area element, therefore it cannot be styled. If you are using HTML5 elements you should be familiar with this challenge. That's when the light bulb went off..

To get around this simply set the area tag to be a block level element. Then you can style it as needed. Worked great for me:

area {
  display: block;
  cursor: pointer;
}