css 不使用图像Map软件就能得到图像Map的坐标吗？

xvw2m8pv 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(87)

我正在学习html/css，有一件事让我感到困惑的是图像Map的想法，我怎么能在不使用像gimp这样的图像Map软件的情况下获得图像的一部分的坐标并将其插入到我的区域标签中。使用gimp的图像Map工具是非常有用的，但我担心，我将需要知道如何做到这一点没有gimp在未来的一些特殊情况下，我不能想到，有没有一种方法来获得坐标没有图像Map软件？我应该担心依赖图像Map软件吗？
提前感谢！

css

来源：https://stackoverflow.com/questions/28623149/is-it-possible-to-get-coordinates-for-image-mapping-without-using-image-mapping

1条答案

按热度按时间

vcirk6k61#

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

Demo：http://jsfiddle.net/LQqGS/223/

赞(0）回复(0）举报 2023-05-19

我来回答

css 不使用图像Map软件就能得到图像Map的坐标吗？

1条答案

相关问题

热门标签

最新问答