在Usemap/area情况下,光标不会更改为指针

Question

我有以下HTML代码,我无法在所有浏览器中正常工作:

<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>

移动到usemap的一部分时,我试图将光标更改为指针.但它不适用于Chrome/Safari.

任何帮助将不胜感激.

Answer 1

Chrome和Safari不支持更改地图或区域元素的CSS.在区域上获取鼠标指针的唯一直接方法是:

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

Answer 2

所有这些解决方案都是效果不好的黑客(对我而言,根本不起作用).经过多次调整和更多的思考后,我确定问题是浏览器只是不知道如何渲染区域元素,因此它无法进行样式化.如果您使用的是HTML5元素,那么您应该熟悉这一挑战.那是灯泡熄灭的时候..

要解决此问题,只需将区域标记设置为块级元素即可.然后你可以根据需要设置样式.为我工作很棒:

area {
  display: block;
  cursor: pointer;
}

Answer 3

这适用于IE,Firefox,Chrome和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>