Html 在 Usemap/area 情况下，光标不会更改为指针
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6589768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cursor not changing to pointer in Usemap/area case
提问by nitin
I have the following HTML code which I cannot get to work quite right in all browsers:
我有以下 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>
I am trying to change the cursor to pointer when moved over a part of the usemap. But its not working in Chrome/Safari.
我试图在移动到 usemap 的一部分上时将光标更改为指针。但它不适用于 Chrome/Safari。
Any help will be appreciated.
任何帮助将不胜感激。
回答by Nico Westerdale
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:
Chrome 和 Safari 不支持更改地图或区域元素的 CSS。在区域上获取鼠标指针的唯一直接方法是：
<area ... href="javascript:void(0);" />
回答by elDuderino
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..
所有这些解决方案都是效果不佳的黑客（对我来说它们根本不起作用）。经过多次谷歌搜索和更多思考，我确定问题在于浏览器不知道如何呈现区域元素，因此无法对其进行样式设置。如果您使用 HTML5 元素，您应该熟悉这个挑战。那个时候灯泡就灭了。。
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;
}
回答by Jirapong
This should work on IE, Firefox, Chrome and Safari.
这应该适用于 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>
回答by Webmaster
IE does not support changing cursor in the area tag.
IE 不支持在区域标签中更改光标。
What you have to do is trick it with JS.
你要做的就是用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>
this is in your javascript
这是在你的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";
}
}
This will do two things:
这将做两件事：
- Will allow you to easily change the image based on the imagemap they scroll over.
- Will give you the illusion that only the part of the areamap scolled over changes the cursor.
- 将允许您根据他们滚动的图像地图轻松更改图像。
- 会给您一种错觉，即只有区域地图的一部分会改变光标。
回答by aromerooca
I had a similar issue. The solution was add the attribute href="#"to the area instead of doing a CSS hack.
我有一个类似的问题。解决方案是将属性添加href="#"到该区域，而不是进行 CSS hack。
回答by Davis
I found a great solution using Jquery!
我使用 Jquery 找到了一个很好的解决方案！
$('area').hover(function(){
//Set your cursor to whatever
$('body').css('cursor', 'help');
}, function() {
//set your cursor back to default
$('body').css('cursor', 'initial');
})
