Здравствуйте! Фото товара на сайте делаю сам, как многие сталкивались, их часто воруют. Водяной знак есть, но это ж никого не останавливает:)
Вот и возникла идея нанести на фото прозрачную картинку, что будет скачиваться вместо моего изображения. Да, я знаю, что для более-менее разумного человека это не защита, но как минимум, для поиска по изображению или для скачивания менее понятливых людей - это поможет.
Есть скрипт, который выполняет эту функцию.
<script type="text/javascript">
$(function() {
var pixelSource = 'http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif';
var useOnAllImages = true;
// Preload the pixel
var preload = new Image();
preload.src = pixelSource;
$('img').live('mouseenter touchstart', function(e) {
var img = $(this);
if (img.hasClass('protectionOverlay')) return;
if (!useOnAllImages && !img.hasClass('protectMe')) return;
var pos = img.offset();
var overlay = $('<img class="protectionOverlay" src="' + pixelSource + '" width="' + img.width() + '" height="' + img.height() + '" />').css({position: 'absolute', zIndex: 9999999, left: pos.left, top: pos.top}).appendTo('body').bind('mouseleave', function() {
setTimeout(function(){ overlay.remove(); }, 0, $(this));
});
if ('ontouchstart' in window) $(document).one('touchend', function(){ setTimeout(function(){ overlay.remove(); }, 0, overlay); });
});
});
</script>
НО! Если его вставить в хеадер, то на моем шаблоне он перекрывает изображения в категориях, а там стоит фишка, что сбоку выводит дополнительные изображения + нельзя открыть страницу, кликнув на изображение. Можно ли как-то его привязать к увеличеному изображению или, к примеру, ограничить область работы размером фото. Допустим 1000х1000?