是否可以在不使用图像映射软件的情况下获取图像映射的坐标？

Question

我正在学习 html/css，令我困惑的一件事是图像映射的概念，我想如何在不使用 gimp 之类的图像映射软件的情况下获取图像一部分的坐标并将其插入我的区域标签.使用 gimp 的图像映射工具确实很有用，但我担心将来我需要知道如何在没有 gimp 的情况下针对某些我想不到的特殊情况执行此操作，有没有办法在没有图像映射软件的情况下获取坐标？我应该担心依赖图像映射软件吗？

提前致谢！

Answer 1

您可以使用 javascript 获取图像的坐标。

HTML

<div class='clickable'>
    <span class='display'></span>
</div>

CSS

.clickable {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Googleplex-Patio-Aug-2014.JPG/300px-Googleplex-Patio-Aug-2014.JPG");
    height: 150px; width: 150px;
    margin: 15px;
    position: absolute;
}
.display {
    display: block;
    height: 16px;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    top: 50%; margin-top: -8px;
    color:white;
}

和 Javascript 获取坐标

$('.clickable').bind('click', function (ev) {
    var $div = $(ev.target);
    var $display = $div.find('.display');

    var offset = $div.offset();
    var x = ev.clientX - offset.left;
    var y = ev.clientY - offset.top;

    $display.text('x: ' + x + ', y: ' + y);
});

演示： http://jsfiddle.net/LQqGS/223/