在 Usemap/area 情况下，光标未更改为指针

Posted 2023-02-14

【中文标题】在 Usemap/area 情况下，光标未更改为指针

【英文标题】：Cursor not changing to pointer in Usemap/area case

【发布时间】：2011-09-29 04:57:05

【问题描述】：

我有以下 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 中不起作用。

任何帮助将不胜感激。

【参考方案1】：

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

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

【参考方案2】：

所有这些解决方案都是无法正常工作的技巧（对我来说，它们根本不起作用）。经过多次谷歌搜索和更多思考，我确定问题在于浏览器不知道如何呈现区域元素，因此无法设置样式。如果您使用的是 HTML5 元素，您应该熟悉这个挑战。那是灯泡熄灭的时候..

要解决这个问题，只需将 area 标签设置为块级元素。然后，您可以根据需要对其进行样式设置。对我来说效果很好：

area 
  display: block;
  cursor: pointer;

【讨论】：

Welp，这在 IE 中不起作用（看图）。当我可以回到我们的老朋友 IE 时，我会更新我的解决方案。

不错 - 没有 JS 的 Webkit 排序 - IE，谁在乎呢？

对我来说，Safari 似乎需要显示指针光标，它确实需要显示：块

刚刚在 IE (8) 中尝试过，似乎也可以在那里工作。还有 Firefox 23 + chrome 33。很好的解决方案。哪个版本的 IE 不支持？

如果没有 href 属性和只有 onclick 事件，这在 IE8 或 10 中将不起作用。不过我尝试过的只有这 2 个...

【参考方案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>

【讨论】：

在 IE 中运行良好。在 chrome 中-您需要使用 @elDuderino 答案。我正在使用 twise

这应该是公认的答案，在最新版本的 chrome 中工作正常

【参考方案4】：

IE 不支持更改区域标签中的光标。

你要做的就是用 JS 来欺骗它。

<img id="someimage" scr="images/image.jpg" usemap="#myareamap" />

<map name="myareamap">
   <area shape="poly"  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";
    

这将做两件事：

将允许您根据他们滚动的图像地图轻松更改图像。 会让您产生一种错觉，即只有区域图的滑过部分会改变光标。

【讨论】：

但它只想在区域而不是整个图像上更改光标。

这对我来说是最好的答案。当鼠标离开区域时，光标不再是指针，而当鼠标悬停时，它就是。这是一个非常简单和聪明的解决方案，我没有任何错误。

【参考方案5】：

我遇到了类似的问题。解决方案是将属性 href="#" 添加到该区域，而不是进行 CSS hack。

【参考方案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');
)