更改光标单击以获取与css的图像映射链接

Question

我正在尝试在单击图像映射中的链接时尝试更改光标。如果可能的话，我想用css来做这件事。我已经看到很多关于如何使用JavaScript的东西，但我尽量使用尽可能少的脚本。我使它工作，以便在您悬停地图区域时光标会发生变化，但在单击链接时无法再次更改光标。我尝试过.class：active，它适用于单词链接但不适用于图像映射区域。有谁知道这个问题的css解决方案？

这是HTML：

    <p>
        Test this <a href="#" class="changeCursor">link</a>
    </p>
    <!--Image -->
    <img src="http://cdn.morguefile.com/imageData/public/files/j/jmiltenburg/10/l/1382316372iut0z.jpg" alt="" usemap="#apple" />

    <!-- ImageMap with a class applied to the area -->
    <map name="apple" id='appleID'>
        <area alt="" title="" href="#" shape="circle" coords="225,182,80" style="outline:none;" class="changeCursor" />
    </map>

这是CSS：

.changeCursor {
    cursor: crosshair;
}
.changeCursor:active {
    cursor: progress;
}

这是jsfiddle： http://jsfiddle.net/awkkahcc/1/

Answer 1

不是问题的答案，但是，如链接Q / A，关于使用锚点而不是地图等概念的粗略示例演示。

可以使用@user3920458的技巧设置光标 - 但光标只会在Chrome中更改，而不会在点击时在Firefox（可能还有其他浏览器）中更改。

在图像映射上测试了一个JavaScript解决方案，但这也变得非常hackish - 因为Firefox似乎希望在更换光标之前需要光标移动，有时它根本不会改变等等。猜猜一个可以让它更多地工作调整和黑客，但不确定。同样适用于Opera。

作为替代方案，使用锚和绝对定位。作为一个粗略的演示，这里有一些边界技巧，但可能是一个“正方形”解决方案 - 取决于需要多大的浏览器支持。

仅在Chrome，Firefox和Opera中测试过。对于锚点，Opera 不更改:active上的光标。也就是说：在点击/鼠标按下黑客攻击时，它有一些与Firefox相同的问题 - 一个人必须拖动鼠标（同时按住按钮）才能让游标发生变化 - 并且非常错误。

唯一的最终解决方案AFAIK将在JavaScript中完成所有操作，并在图像或div等上定位MouseDown / Up事件等。

---

Example Fiddle using JavaScript solution.

行。至少在Chrome，Firefox和Opera中。

<强> HTML：

<div id="wrap"></div>

<强> CSS：

#wrap {
    position: absolute;
    left    : 0;
    top     : 0;
    width   : 620px;
    height  : 414px;
    margin  : 0;
    padding : 0;
    cursor  : crosshair;    
    background: url(http://i.stack.imgur.com/ntEJ4.jpg);
}

<强> JavaScript的：

// Check if px/py is inside polygon vx/vy.
function inpoly(vx, vy, px, py) {
    var i, j, c = 0, n = vx.length;
    for (i = 0, j = n - 1; i < n; j = i++) {
        if ( ((vy[i] > py) != (vy[j] > py)) &&
             (px < (vx[j] - vx[i]) * (py - vy[i]) / 
                   (vy[j] - vy[i]) + vx[i]) ) {
                c = !c;
        }
    }
    return c;
}

// The box.
var box = document.getElementById('wrap');

// X and Y Vectors for polygon around apple.
var vx = [169, 196, 226, 260, 280, 288, 277, 266, 247, 225, 208, 183, 170, 165];
var vy = [142, 122, 118, 122, 136, 173, 209, 229, 238, 242, 241, 223, 195, 169];

box.addEventListener('mousedown', function(ev) {
    if (inpoly(vx, vy, ev.clientX, ev.clientY))
        box.style.cursor = 'progress';
});

box.addEventListener('mouseup', function(ev) {
    box.style.cursor = 'crosshair';
});

---

Example Fiddle using CSS with absolute positioned anchor.

行。至少在Chrome和Firefox中; Opera中的不。

HTML：

<div id="wrap">
<img src="http://i.stack.imgur.com/ntEJ4.jpg" />
<a href="#" id="target01">&nbsp;</a>
</div>

CSS：

#wrap {
    position: absolute;
}
img {
    position : relative;
    top      : 0;
    left     : 0;
}
#target01 {
    position        : absolute;
    top             : 118px;
    left            : 164px;
    width           : 125px;
    height          : 127px;
   /*-webkit-border-radius: .... */
    border-radius   : 50% 40% 70% 68% / 50% 48% 85% 95%;

    text-decoration : none;
    outline         : none;    
    cursor          : crosshair;

    /* Only for demo purpose to show area. */
    background      : rgba(122,50,222,.5);
}

#target01:hover {
    background: none;
}
#target01:active {
    cursor: progress;
}

Answer 2

是的，没有javascript可以。你可以像在链接上那样做。只需将display block设置为area元素，默认浏览器将其设置为none。

area {
    display: block;
}

以下是示例：http://jsfiddle.net/brunomuller/awkkahcc/5/