在使用map/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>

我试图在鼠标移动到使用映射的某个部分时将光标更改为指针。但在Chrome/Safari中无效。

任何帮助将不胜感激。

- nitin

Answer 1

Chrome和Safari不支持更改map或area元素的CSS。获取area上的鼠标指针的唯一直接方法是：

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

- Nico Westerdale

Answer 2

所有这些解决方案都是不太好的hack（对我来说根本没用）。经过大量搜索和思考后，我确定问题在于浏览器不知道如何呈现area元素，因此它无法进行样式设置。如果您正在使用HTML5元素，则应该熟悉这个挑战。那时候，灵光一闪..

要解决这个问题，只需将area标签设置为块级元素即可。然后您可以根据需要进行样式设置。对我起了很大的作用：

area {
  display: block;
  cursor: pointer;
}

- elDuderino

---

不错 - Webkit已经没有JS了 - IE，谁还在乎呢？ - T4NK3R

对我来说，似乎Safari需要display: block才能显示指针光标。 - dijipiji

刚在IE（8）中尝试了一下，似乎也可以工作。还有Firefox 23和Chrome 33。非常好的解决方案。它在哪个版本的IE上无法工作？ - werner

如果没有href属性，只有onclick事件，这在IE8或10中将无法工作。虽然我只尝试了这两个版本... - Mike_K

对我来说完美无缺！ - SMBiggs

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>

- Jirapong

---

在IE中工作良好。在Chrome中，您需要使用@elDuderino的答案。我正在使用twise。 - inon

这应该是被采纳的答案，在最新版的Chrome中正常工作。 - Kira

Answer 4

IE不支持在area标签中更改光标。

你需要使用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>

这是你的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";
    }
}

这将会有两个作用：

• 让你能够轻松地根据他们滚动过的 imagemap 更改图片。
• 给你一种错觉，即只有滚动过的区域图改变了光标。

- Webmaster

---

但它只想在区域内更改光标，而不是整个图像。 - Jirapong

这对我来说是最佳答案。当鼠标离开区域时，光标不再是指针，悬停时则变为指针。这是一个非常简单而聪明的解决方案，我没有遇到任何 bug。 - ivkremer

Answer 5

我曾经遇到过类似的问题。解决方法是在区域（area）中添加属性href="#"，而不是使用 CSS hack。

- aromerooca

Answer 6

我发现了一个使用 JQuery 的好方法！

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

- Davis