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

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 2

All of these solutions are hacks that don't work well (for me they didn't work at all). After much googling, 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; }