Vô hiệu hóa nhấp chuột hình ảnh bằng hai cách

posted in: Thủ thuật Blogspot | 0

Vô hiệu hóa nhấp chuột phải hoặc menu ngữ cảnh là một trong những cách phổ biến nhất để ngăn chặn các hình ảnh bị đánh cắp từ một blog.

Trong khi nó có hiệu quả đến mức độ nào trong việc ngăn chặn hành vi trộm cắp hình ảnh giản dị, nó cũng sẽ ngăn cản độc giả trung thực bằng cách từ chối quyền truy cập vào nhiều chức năng hữu ích liên quan đến việc kích chuột phải như đi lại, trang Reload, Bookmark và Mở liên kết trong cửa sổ mới.

Việc vô hiệu hóa nhấp chuột hình ảnh được chia làm hai kiểu: hoặc là khi nhấp chuột phải hiện ra thông báo không thể coppy hoặc là không hiện thông báo. Sau đây là từng trường hợp áp dụng riêng cho từng kiểu.

Trường hợp 1: Có thông báo

Khi độc giả bấm chuột phải vào hình ảnh nó sẽ hiện lên thông báo như bên dưới không cho họ click chuột phải vào hình ảnh đó.

Để làm được như vậy các bạn làm như sau:

1- Đăng nhập vào Blogger.

2- Chọn mẫu (Template).

3- Sao lưu mẫu của bạn để đề phòng sảy ra lỗi khi áp dụng thủ thuật này.

4- Nhấp chọn vào Chỉnh sửa HTML (Edit HTML).

5- Thêm đoạn code bên dưới vào trước thẻ đóng </head>

<script type=”text/javascript”>

//<![CDATA[

    function nocontext(e) {

        var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;

        if (clickedTag == “IMG”) {

            alert(alertMsg);

            return false;

        }

    }

    var alertMsg = “Image context menu is disabled“;

 document.oncontextmenu = nocontext;

//]]>

</script>

Trong đó:

Bạn có thể thay thế tin nhắn trong hộp thông báo dạng popup thành bất cứ câu từ nào bạn muốn. Chỉnh sửa bằng cách chỉnh đoạn màu đỏ.

Nếu bạn không muốn hiển thị bảng thông báo đó thì hãy xóa đoạn code :

var alertMsg = “Image context menu is disabled”;

Để vô hiệu hóa trên một hình ảnh cố định bạn phải thêm đoạn code bên dưới vào trong thẻ img của hình ảnh

oncontextmenu=’alert(“Image context menu is disabled”);return false;’

- Mở trình soạn thảo của bài viết vào chuyển đỏ  chế độ HTML của bài viết, Xác định vị trí các thẻ img của hình ảnh, Sau đó chèn các mã bên trên vào bên trong thẻ ví dụ

<img border=”0″ src=”http://4.bp.blogspot.com/-g3F1n-WhX64/UR-hPEi-LKI/AAAAAAAAI6k/4Wx_79knSpc/s1600/banner-namkna-blogspot-com.png” />

Sau khi thêm đoạn code vào nó sẽ có dạng như sau:

<img oncontextmenu=’alert(“Image context menu is disabled”);return false;’ border=”0″ src=”http://4.bp.blogspot.com/-g3F1n-WhX64/UR-hPEi-LKI/AAAAAAAAI6k/4Wx_79knSpc/s1600/banner-namkna-blogspot-com.png” />

6- Lưu mẫu lại và xem kết quả.

Trường hợp 2: Không có thông báo

1- Đăng nhập vào Blogger.

2- Chọn mẫu (Template).

3- Sao lưu mẫu của bạn để đề phòng xảy ra lỗi khi áp dụng thủ thuật này.

4- Nhấp chọn vào Chỉnh sửa HTML (Edit HTML).

5- Thêm đoạn code bên dưới vào trước thẻ đóng </head>

<script>

$(function() {

$(‘img’).bind(“contextmenu”, function(event_click) {

event_click.preventDefault();

});

});

</script>

<!– http://namkna.blogspot.com/2013/10/chong-click-chuot-phai-len-hinh-anh.html –>

6- Lưu mẫu lại và cùng test lại kết quả nhé.

Bình luận