Question

我正试图在球赛中创造一个位置。用户可以点击图像来显示他们认为球的位置。我已经有了它的工作，但是如果你想点击两个相对接近的点你不能选择上一个图像..

有没有办法实现这一目标，我正在考虑在它们上面放置一个透明图像，这样它们就不可选了，但是我无法让它工作。

这是我到目前为止所拥有的

Answer 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>

单击时重叠图像

1 个答案: