Question

I’m wondering how can I put a div over every image element on the page using jQuery? I want to make it where when you right click on the image, you’ll just be right clicking on a div and then it will be harder to save, and people that don’t know HTML and stuff wont be able to get the image since they wont even know about “View page source” option. Can someone help?

Thanks in advance.

Answer 1

You can drop a new DIV on top of the images using absolute positioning:

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

and this code:

$('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);
});

See http://jsfiddle.net/alnitak/KRgnK/ for a working demo

EDIT updated to copy the original image’s alt tag onto the overlay div.