Uzun uğraşılar sonunda, bloğunuzda yada web sayfalarınızdaki yazılara, makalelere eklediğiniz resimlerin kolayca başkaları tarafından, özellikle izinsiz kopyalanmasını yada kullanılmasını kimse istemez. Resimlerin kolayca indirilmesini engellemek için çeşitli alternatifler var.
Sayfalarınıza resim eklerken aşağıdaki kodu kullandığınızda resim kopyalamayı engellemek için bir alternatif olacaktır. Sayfa farklı kaydet seçeneği ile kaydedilmek istendiğinde asıl resim yerine bloke resmi kaydedilecektir.
Sayfamızın </body> etiketinden önce jquery ve gerekli javascriptimizi ekleyelim;
<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://lokmanakkaya.com.tr/transparent.gif'; var useOnAllImages = true; 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>
ardından gösterilecek resimler için gerekli kodlarımız;
<span style="background-image:url('/resimler/Gösterilecek_Resim.jpg');position:relative;width:150px;height:150px;overflow:hidden;display:inline-block;pointer-events: none;pointer-events: none;-webkit-touch-callout: none;" > <img border="0" src="/resimler/Resim-indirme-engellendi-resmi.jpg" alt="" width="100%" height="100%" style="position:absolute;opacity:0;" class="protectMe" /> </span>Konu: Resimlerin indirilmesini engelleme