webpage protection - images

revision: February 25, 2024

Content

pointer-events

The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.

Pointer events are a modern way to handle input from a variety of pointing devices, such as a mouse, a pen/stylus, a touchscreen, and so on.

        img {
            pointer-events: none;
        }
    

This makes all img elements non-reactive to any mouse events such as dragging, hovering, clicking etc.

Syntax: {pointer-events = auto | bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none;}

values:

auto : the element behaves as it would if the pointer-events property were not specified. In SVG content, this value and the value visiblePainted have the same effect.
none : the element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

SVG only values (experimental):

visiblePainted : SVG only (experimental for HTML). The element can only be the target of a pointer event when the visibility property is set to visible and e.g. when a mouse cursor is over the interior (i.e., 'fill') of the element and the fill property is set to a value other than none, or when a mouse cursor is over the perimeter (i.e., 'stroke') of the element and the stroke property is set to a value other than none.
visibleFill : SVG only. The element can only be the target of a pointer event when the visibility property is set to visible and when e.g. a mouse cursor is over the interior (i.e., fill) of the element. The value of the fill property does not affect event processing.
visibleStroke : SVG only. The element can only be the target of a pointer event when the visibility property is set to visible and e.g. when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the stroke property does not affect event processing.
visible : SVG only (experimental for HTML). The element can be the target of a pointer event when the visibility property is set to visible and e.g. the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill and stroke do not affect event processing.
painted : SVG only (experimental for HTML). The element can only be the target of a pointer event when e.g. the mouse cursor is over the interior (i.e., 'fill') of the element and the fill property is set to a value other than none, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the stroke property is set to a value other than none. The value of the visibility property does not affect event processing.
fill : SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) of the element. The values of the fill and visibility properties do not affect event processing.
stroke : SVG only. The element can only be the target of a pointer event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the stroke and visibility properties do not affect event processing.
all : SVG only (experimental for HTML). The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill, stroke, and visibility properties do not affect event processing.

"pointer-events: none": using this CSS rule on image elements prevents them from responding to click events: right clicking the image will still show a page context menu, but without "save image" or "copy image location" options.

"pointer-events: none" won't stop downloading images using standard browser tools (such as "page info" in Firefox), but should deter visitors with poorer technical skills from downloading images.

A potential downside of this method is that images that don't respond to pointer events can't be used within <a> tags for page navigation: clicking them is ignored. Using the image as the background image of an (inline) block element provides one alternative.

examples

examples

code:

                    <div>
                        <img src="../images/1.jpg" id="one" width="300" height="300">
                        <img src="../images/2.jpg" id="two" width="300" height="300">
                        </ul>
                    </div>
                    <style>
                        #two{pointer-events: none;}
                    </style>
                

contextmenu

The contextmenu event fires when the user attempts to open a context menu.

This event is typically triggered by clicking the right mouse button, or by pressing the context menu key. In the latter case, the context menu is displayed at the bottom left of the focused element, unless the element is a tree, in which case the context menu is displayed at the bottom left of the current row.

Any right-click event that is not disabled (by calling the event's preventDefault() method) will result in a contextmenu event being fired at the targeted element.

syntax: in HTML : <element oncontextmenu="myScript"; in JavaScript : object.oncontextmenu = function(){myScript}; in JavaScript using the addEventListener method : addEventListener("contextmenu", (event) => {}); or : oncontextmenu = (event) => {};

Use the event name in methods like addEventListener(), or set an event handler property.

examples

code:

                    <img src="../images/1.jpg" alt="#" height="300" width="300" onContextMenu="return false;" /> 
                

            <script>
                let allImages = document.querySelectorAll("img");
                allImages.forEach((value)=>{
                    value.oncontextmenu = (e)=>{
                        e.preventDefault();
                    }
                })
            </script>
        

If you rewrite the <body> tag to <body oncontextmenu="return false;"> you can prevent the right click without using "real" JavasSript.

jQuery

.contextmenu()

This method is a shortcut for .on( "contextmenu", handler ) in the first two variations, and .trigger( "contextmenu" ) in the third.

The contextmenu event is sent to an element when the right button of the mouse is clicked on it, but before the context menu is displayed. In case the context menu key is pressed, the event is triggered on the html element or the currently focused element. Any HTML element can receive this event.

                    <div>
                        <div id="target">right-click here</div>
                    </div>
                    <style>
                        #target{width: 10vw; height: 2vw; background-color: skyblue;text-align: center; cursor:pointer;}
                    </style>
                    <script>
                        $("#target").contextmenu(function() {
                        alert("Handler for .contextmenu() called.");
                        });
                    </script>
                

                    <div>
                        <div id="target-2"></div>
                        <span>right click the block</span>
                    </div>
                    <style>
                        #target-2{background: blue; color: white; height: 10vw; width: 15vw;}
                        #target-2.contextmenu {background: yellow; color: black;}
                    </style>
                    <script>
                        var div = $("#target-2" ).first();
                        div.contextmenu(function() {
                            div.toggleClass( "contextmenu" );
                        });
                    </script>
                

            $('img').mousedown(function(e){
                if(e.button == 2){// right-click
                    return false //do nothing
                }
            });
        

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

use background-image property

The background-image property is used to set one or more background images for an element.

By default, it places the image on the top left corner. To specify two or more images, we need to specify the separate URLs with a comma for both images.

The background images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them. How the images are drawn relative to the box and its borders is defined by the background-clip and background-origin CSS properties.

If a specified image cannot be drawn (for example, when the file denoted by the specified URI cannot be loaded), browsers handle it as they would a none value.

Syntax: background-image: url('url')|none|initial|inherit;

Property values:

url('url') : specifies the URL of the image. In order to specify the URL of more than one image,separate the URLs using a comma.
none : is the default case where no image can be displayed.
initial : is used to set the property to its default value.
inherit : is used to inherit the property from its parent element.

The background-image property can also be used with the following values:

linear-gradient() : is used to set the linear-gradient background-image that is defined by at least 2 color from top to bottom.
radial-gradient() : is used to set the radial-gradient background-image that is defined by at least 2 color from center to edge.

                    <div class="one"></div>
                    <style>
                        .one{width: 20vw; height: 10vw; background-image: url(2.jpg); background-size: cover;}       
                    </style>
                

                    <p class="one_one">You can specify background images<br>
                        for any visible HTML element.<br>
                        In this example, the background image<br>
                        is specified for a p element.<br>
                        By default, the background-image<br>
                        will repeat itself in the direction(s)<br>
                        where it is smaller than the element<br>
                        where it is specified. (Try resizing the<br>
                        browser window to see how the<br>
                        background image behaves
                    </p>
                    <style>
                        .one_one{width: 20vw; height: 20vw; background-image: url(3.jpg); background-size: cover;}       
                    </style>
                

data URI scheme

The data URI scheme is a uniform resource identifier (URI) scheme that provides a way to include data in-line in Web pages as if they were external resources.

It is a form of file literal or here document.
This technique allows normally separate elements - such as images and style sheets - to be fetched in a single Hypertext Transfer Protocol (HTTP) request, which may be more efficient than multiple HTTP requests, and used by several browser extensions to package images as well as other multimedia contents in a single HTML file for page saving.
As of 2022, data URIs are fully supported by most major browsers, and partially supported in Internet Explorer.

Syntax: data:[<media type>][;base64],<data></data>

the scheme, data : it is followed by a colon (:).
an optional media type : this part may include one or more parameters, in the format "attribute=value", separated by semicolons (;) . A common media type parameter is charset, specifying the character set of the media type, where the value is from the IANA list of character set names. If one is not specified, the media type of the data URI is assumed to be text/plain;charset=US-ASCII.
an optional base64 extension base64, separated from the preceding part by a semicolon. When present, this indicates that the data content of the URI is binary data, encoded in ASCII format using the Base64 scheme for binary-to-text encoding. The base64 extension is distinguished from any media type parameters by virtue of not having a "=value component" and by coming after any media type parameters. Since Base64 encoded data is approximately 33% larger than original data, it is recommended to use Base64 data URIs only if the server supports HTTP compression or embedded files are smaller than 1KB.
the data, separated from the preceding part by a comma (,). The data is a sequence of zero or more octets represented as characters. The comma is required in a data URI, even when the data part has zero length. The characters permitted within the data part include ASCII upper and lowercase letters, digits, and many ASCII punctuation and special characters. Note that this may include characters, such as colon, semicolon, and comma which are delimiters in the URI components preceding the data part. Other octets must be percent-encoded. If the data is Base64-encoded, then the data part may contain only valid Base64 characters. Note that Base64-encoded data: URIs use the standard Base64 character set (with '+' and '/' as characters 62 and 63) rather than the so-called "URL-safe Base64" character set.