0

この jQuery ソリューションは、実際の画像の上に透明な gif を自動的にオーバーレイすることがわかりました。

http://www.dwuser.com/education/content/stop-the-thieves-strategies-to-protect-your-images/

（「ダウンローダーをだます」）

FancyBox プラグイン (v. 1.3.4) を使用して、Wordpress サイト (v. 3.5.1) で正常に動作します。

しかし、今では画像に関連するすべてのリンクがなくなっています...

画像に関連するアクティブなリンクを保持するソリューションはありますか?

また、オーバーレイgifをファンシーボックスフレーム内の画像にのみ関連付けようとしましたが、成功しませんでした...

>>投稿関連コードを編集<<

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<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) {
        // 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));
        });
        if ('ontouchstart' in window) $(document).one('touchend', function(){ setTimeout(function(){ overlay.remove(); }, 0, overlay); });
    });
});
</script>

私の貧弱な英語に感謝し、申し訳ありません。d.

4

2 に答える 2

0

画像に透かしを入れるオプションはありますか? 画像の上に gif を配置すると、マウスの右ボタンで画像の保存をブロックできます。ただし、Firefox では、任意の場所を右クリックして [ページ情報を表示] を選択し、そこからタブ メディアを選択して、画像をダウンロードすることができます。

PS: または、JS が無効になっている人も画像をダウンロードできます。

于 2013-04-08T14:33:43.860 に答える
0

これを試してください: {経験豊富な開発者にとっては、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); });
    });
});
于 2013-04-08T14:37:29.313 に答える