单击时重叠图像答案

【问题标题】：Overlap images on click单击时重叠图像
【发布时间】：2010-11-29 02:02:38
【问题描述】：

我正在尝试为球赛创造一个现场。用户可以单击图像以显示他们认为球在哪里。我已经开始工作了，但是如果你想点击两个相对靠近的点，你不能选择上一张图片。

有没有办法实现这一点，我正在考虑在它们上方放置一个透明图像，这样它们就无法选择，但我无法让它工作。

这是我目前所拥有的

http://enjoythespace.com/sites/game/

【问题讨论】：

标签： jquery html image

【解决方案1】：

如果它们靠得太近，最好不要让它们捡起来。如果您为每次点击收费，我无法想象有人故意选择两个仅相距几个像素的点。

但是，可以在图像上放置一个透明 div，然后将十字准线图像放置在其下。这对我有用...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <div id="divSource" style="position:relative;width:500px;">
        <img src="http://chelseavets.org.uk/Gallery/090228vBBC/SpotTheBall.JPG" width="100%" />
        <div id="divTarget" style="position:absolute;left:0;top:0;width:100%;height:100%;border:solid 1px red;z-index:100;"></div>
    </div>
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#divTarget').click(function (e) {
            var target = $('<div></div>');
            target.css({
                position: 'absolute',
                backgroundImage: 'url(http://enjoythespace.com/sites/game/img/cross.png)',
                width: '29px',
                height: '27px',
                top: e.offsetY - 14 + 'px',
                left: e.offsetX - 15 + 'px',
                padding: 0,
                margin: 0,
                zIndex: 50
            });
            $('#divSource').append(target);
        });
    });
</script>
</body>
</html>

【讨论】：