Senin, 25 Oktober 2010

Mixed Syntax for Image

Postingan kali ini mengenai trik a:hover pada image (gambar) yang apabila akan manghasilkan efek bila disorot oleh mouse :-bd Jika sobat penggila jQuery dalam hal efek mengefek untuk image, bisa lihat yg Beben si bloglang ganteng kalem tea ini Cloud Zoom. Karena perkembangan browsingan telah memasuki era CSS3, maka untuk urusan a:hover ini bisa lebih mudah lagi sob A Hover for Image ;)) Beben mau berbagi lagi penulisan link buat gambar dengan variasi javascript sedikit yg akan memberikan efek layaknya fungsi hover :D Secara default jika sobat mau memberikan efek a:hover menggunakan CSS3, tinggal membubuhkan kode berikut-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);
Dengan kode itu sobat sudah memiliki efek gaya punya ;;) Jika mau gambar berupa link, dan setelah diklik gambar tersebut akan muncul maka syntax yg diperlukan<img alt="your title will show" title="click to load image" onclick="src='http://your-link-image.jpg'" border='0' style="color:#FF0000;text-decoration:underline;cursor:pointer">Demo:

Prodigy of Head
Jika mau hovernya langsung berefek seperti ini, maka syntax yg dipakai [..]

<img onmouseover="height='75';" onmouseout="height='30';" src="http://your-link-image" border="0" height="30" title="your title" style="cursor:pointer">Supaya tidak dicuri gambar dengan klik kanan ;)) maka ada dua penulisan syntax for image...

<img oncontextmenu="return false;" src="http://your-link-image" border="0" height="30" title="your title" style="cursor:help">Tanpa alert windows!!!
<img oncontextmenu='alert("your title!!!"); return false;' src="http://your-link-iamge" border="0" height="30" title="your title" style="cursor:help">Dengan alert windows!!!
Semoga bermanfaat :)

Tidak ada komentar:

Posting Komentar