我有以下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中使用。
任何帮助将不胜感激。
答案 0 :(得分:37)
Chrome和Safari不支持更改地图或区域元素的CSS。在区域上获取鼠标指针的唯一直接方法是:
<area ... href="javascript:void(0);" />
答案 1 :(得分:21)
所有这些解决方案都是效果不好的黑客(对我而言根本不起作用)。经过大量的谷歌搜索,更多的思考我确定问题是浏览器只是不知道如何渲染区域元素,因此它无法设置样式。如果您使用的是HTML5元素,那么您应该熟悉这一挑战。那是灯泡熄灭的时候..
要解决此问题,只需将区域标记设置为块级元素即可。然后你可以根据需要设置样式。为我工作很好:
area {
display: block;
cursor: pointer;
}
答案 2 :(得分:10)
这适用于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>
答案 3 :(得分:4)
IE不支持更改区域标记中的光标。
你需要做的就是用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";
}
}
这将做两件事:
答案 4 :(得分:2)
我有类似的问题。解决方案是将属性href="#"
添加到该区域,而不是执行CSS hack。
答案 5 :(得分:1)
我使用Jquery找到了一个很棒的解决方案!
$('area').hover(function(){
//Set your cursor to whatever
$('body').css('cursor', 'help');
}, function() {
//set your cursor back to default
$('body').css('cursor', 'initial');
})