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

Question

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

提前致谢!

Answer 1

您可以使用 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);
});

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='clickable'>
    <span class='display'></span>
</div>

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