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

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/

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

is it possible to get coordinates for image mapping without using image mapping software?

html

css

google-maps

image