Cursor not changing to pointer in Usemap/area case

html cursor area
nitin picture nitin · Jul 6, 2011 · Viewed 28.1k times · Source

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

Nico Westerdale picture Nico Westerdale · Aug 19, 2011

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);" />

Related questions

Change cursor to hand when mouse goes over a row in table

How do I change the cursor pointer to hand when my mouse goes over a <tr> in a <table> <table class="sortable" border-style:> <tr> <th class="tname">Name</th&…

Read More
how to set cursor style to pointer for links without hrefs

I have a lot of <a> html tags without the href attribute for making onclick javascript calls. These links do not have a pointer style of cursor. They have text style cursor. How can I set the cursor …

Read More
Using external images for CSS custom cursors

Is it possible to use external image URLs for CSS custom cursors? The following example doesn't work: HTML: <div class="test">TEST</div> CSS: .test { background:gray; width:200px; height:200px; cursor:url('http://upload.wikimedia.…

Read More