Jquery 自动将透明gif覆盖在Fancybox框架内的真实图像上

我发现这个jQuery解决方案可以自动将透明gif覆盖在真实图像上

（“欺骗下载者”）

它在我的Wordpress站点（3.5.1版）和FancyBox插件（1.3.4版）上运行良好

但现在我所有与图像相关的链接都消失了…

有没有办法保持与图像相关的活动链接

我还尝试将叠加gif仅用于fancybox框架内的图像，但没有成功

---

>编辑发布相关代码在图像上放置水印是一种选择吗？ 在图像上放置gif时，可以使用鼠标右键阻止保存图像。 但使用Firefox，您可以右键单击任意位置并选择“查看页面信息”，然后在媒体选项卡上仍然可以下载图像

附言：

---

或者禁用JS的人也可以下载该图像。

试试这个：{请注意，任何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;
    //live is deprecated, use 'on' instead
    $(document).on('mouseenter touchstart','img', function(e) {
        // Only execute if this is not an overlay or skipped
        var img = $(this);
        if (img.hasClass('protectionOverlay')) return;
        if (!useOnAllImages && !img.hasClass('protectMe')) return;
        // Get the real image's position, add an overlay
        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));
        }).click(function(){
           if(img.parent('a').length)//assuming your image is embeded in a link tag
              window.location.replace(img.parent('a').attr('href'));
        });
        if ('ontouchstart' in window) $(document).one('touchend', function(){ setTimeout(function(){ overlay.remove(); }, 0, overlay); });
    });
});

$（函数（）{
var pixelSourcehttp://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif';
var useOnAllImages=真；
//预加载像素
var preload=新图像（）；
preload.src=像素源；
//live已弃用，请改用“on”
$（文档）.on（'mouseenter touchstart'，'img'，函数（e）{
//仅当这不是覆盖或跳过时执行
var img=$（本）；
if（img.hasClass（'protectionOverlay'））返回；
如果（！useOnAllImages&&！img.hasClass（'protectMe'）返回；
//获取真实图像的位置，添加覆盖
var pos=img.offset（）；
var overlay=$（''）.css（{position:'absolute'，zIndex:9999999，left:pos.left，top:pos.top}）.appendTo（'body'）.bind（'mouseleave'，function（）{
setTimeout（函数（）{overlay.remove（）；}，0，$（this））；
})。单击（函数（）{
if（img.parent（'a'）.length）//假设您的图像嵌入到链接标记中
window.location.replace（img.parent（'a'）.attr（'href'））；
});
if（'ontouchstart'在窗口中）$（document）.one（'touchend'，function（）{setTimeout（function（）{overlay.remove（）；}，0，overlay）；}）；
});
});

你好，谢谢你的回答。我想在我的图像中添加一个透明层，以防止下载（我知道安全级别相当低）。出于纯粹的审美原因，我也会避免使用带有水印的解决方案。我感谢你的善意帮助。不幸的是，你提出的版本似乎与原来的版本完全一样：与图像相关的链接保持不活动状态…你应该发布图像的html代码，我的意思是你如何设置图像链接？我用传统的方式：非常感谢，但它仍然不起作用。。。也许您知道另一种解决方案，其中透明图像（gif）仅添加到带边框的fancybox完整图像中？这样我们就避免了相关链接的问题…编辑：对不起，它实际上可以工作，但只是部分工作。让我解释一下：光标不会改变状态（仍然是一个箭头），但如果我点击图像，我会立即指向完整的图像，但在Fancybox框架之外，没有透明的保护……你可以尝试阻止潜在的小偷，但不幸的是，javascript没有真正的保护（我可以从你的网站下载任何图片，不管你怎么欺骗我。）如果您不想手动添加水印，最好是找到一个服务器端解决方案，在运行中为您的图像添加水印。潜在的窃贼仍然可以下载您的水印图像。有关添加水印和禁用右键单击的代码示例，请参阅第4条，如果这有助于您安心；）

$(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;
    //live is deprecated, use 'on' instead
    $(document).on('mouseenter touchstart','img', function(e) {
        // Only execute if this is not an overlay or skipped
        var img = $(this);
        if (img.hasClass('protectionOverlay')) return;
        if (!useOnAllImages && !img.hasClass('protectMe')) return;
        // Get the real image's position, add an overlay
        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));
        }).click(function(){
           if(img.parent('a').length)//assuming your image is embeded in a link tag
              window.location.replace(img.parent('a').attr('href'));
        });
        if ('ontouchstart' in window) $(document).one('touchend', function(){ setTimeout(function(){ overlay.remove(); }, 0, overlay); });
    });
});