Question

我想知道如何使用jQuery在页面上的每个图像元素上添加div？我想让它在你右键点击图像的地方，你只需要点击一个div然后就会更难保存，而那些不知道HTML的东西也不会获取图像，因为他们甚至不知道“查看页面源”选项。有人可以帮忙吗？

提前致谢。

Answer 1

您可以使用绝对定位在图像上放置新的DIV：

.hider {
    z-index: 1000;
    position: absolute;
}

和这段代码：

$('img').each(function() {
    var pos = $(this).position();
    $('<div/>', {title: this.alt})
        .addClass('hider')
        .css({
            width: this.width, height: this.height,
            left: pos.left, top: pos.top,
        })
        .insertAfter(this);
});

请参阅http://jsfiddle.net/alnitak/KRgnK/了解正常工作

更新

修改以将原始图片的alt标记复制到叠加div上。

Answer 2

如果阻止右键单击图像很重要，我推荐一种简单的CSS方法，其中图像只是DIV的背景。无论使用何种JavaScript，都无法右键单击以下载这些图像。

如上所述，您将缺少alt图片属性，因此请继续操作。

HTML ...

<div id="myImage"></div>

CSS ......

<style>

#myImage {
    background-image: url(theGraphic.jpg);
    background-repeat: no-repeat;
    width: 100px;  /* theGraphic.jpg width */
    height: 100px;  /* theGraphic.jpg height */
}

</style>

Answer 3

要完全禁用右键单击，您可以像这样使用jquery：

$(document).ready(function(){
    $('img').bind("contextmenu",function(e){
        return false;
    });
});

Answer 4

试试这个：

 $('body img').wrap('<div />');

Click Here

如何使用jQuery在页面上的每个图像上放置一个div？

4 个答案: