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/

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

1 个答案: