我正在学习html/css,有一件事让我感到困惑的是图像Map的想法,我怎么能在不使用像gimp这样的图像Map软件的情况下获得图像的一部分的坐标并将其插入到我的区域标签中。使用gimp的图像Map工具是非常有用的,但我担心,我将需要知道如何做到这一点没有gimp在未来的一些特殊情况下,我不能想到,有没有一种方法来获得坐标没有图像Map软件?我应该担心依赖图像Map软件吗?提前感谢!
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/
1条答案
按热度按时间vcirk6k61#
您可以使用JavaScript获取图像中单击点的坐标:
Demo:http://jsfiddle.net/LQqGS/223/