javascript - 单击图像时将 div 显示为弹出窗口

Question

很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它， visit the help center 。

已关闭 10 年前。

我有一张图片。

当用户单击图像的特定区域时，我想将不同的 div 显示为弹出窗口。

我想使用 jquery 和 html 来做到这一点。

谁能帮我解决这个问题吗？

Answer 1

以下是示例解决方案的示例:http://jsfiddle.net/htEvT/2/

JavaScript

$('#rabbit').click(function (e) {
    var offset = $(this).offset(),
        left = e.pageX - offset.left,
        top = e.pageY - offset.top;
    if (top > $(this).height() / 2) {
        alertDiv('You\'ve cliked under the middle.', 'alert-white');
    } else {
        alertDiv('You\'ve cliked above the middle.', 'alert-gray');
    }
});

function alertDiv(text, cssClass) {
    var alrt = $('<div class="alert ' + cssClass + '">' + text + '</div>');
    $(document.body).append(alrt);
    alrt.click(function () {
        alrt.remove();
    });
}
​

CSS

.alert {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 300px;
    height: 200px;
    border: 1px solid black;
}
.alert-white {
    background: white;
}
.alert-gray {
    background: #ccc;
}
​

HTML

<img src="http://www.clermontanimal.net/images/lop_rabbit_easter.jpg" id="rabbit" alt="" />​

如果我的解决方案有任何问题，请告诉我。 :)