Pernah mencuri konten? Uh, copy & paste tulisan mungkin tidak pernah, tapi bagaimana dengan gambar?

Kita tahu, mengambil gambar dari sebuah halaman web sangat mudah. Yang perlu kita lakukan adalah klik kanan, kemudian pilih “save as”. Yeah, satu gambar tercuri. :D

OK, saya tidak ingin gambar di blog saya dicuri bagaimana caranya?

Sayang sekali tidak ada cara yang benar-benar bisa membuat konten kita aman. Sama halnya dengan kasus copy & paste pada tulisan. Tetapi paling tidak kita dapat “sedikit” mempersulit user untuk mengambil gambar tersebut.

Berikut ini adalah trik lawas yang saya gunakan untuk sekedar melindungi gambar dari klik kanan. Bukan dengan cara membunuh fungsi klik kanan dengan JavaScript tetapi hanya menggunakan CSS.

Triknya adalah, dengan menambahkan layer transparan di atas gambar dengan CSS positioning. Sehingga user tidak dapat melakukan klik kanan pada gambar dengan semestinya. Berikut ini adalah contoh kodenya:

CSS:

div.imgwrapper {
position:relative;

width:100%;
}

div.imgwrapper img {
width:100%;

}

div.protector {
position:absolute;
top:0;

left:0;
width:100%;
height:100%;

z-index:9;
}

HTML:

<div class="imgwrapper">

  <img src="images/contohgambar.jpg" alt="" />
  <div class="protector" />

</div>

Cukup mudah bukan? meskipun tidak benar-benar melindungi gambar, minimal dapat menghalangi proses-proses pencurian instan yang dapat dilakukan oleh user.

Demo dapat dilihat di halaman ini. Update, metode pelindung gambar murni menggunakan CSS dapat dilihat disini. :)

Comments

powered by Disqus