» » » Cara Membuat Gambar Dengan Efek Hover Baru

Berbahasa Resmi
Dalam artikel kali ini, kita akan mempelajari bagaimana  cara membuat efek hover pada gambar. Cara ini memang sudah banyak diterapkan dan ditutorkan di berbagai blog dan situs. Tetapi kali ini kita akan membuat gambar hover yang lebih responsif dengan kode yang lebih merata, dan lebih berbobot.

Anda boleh pakai kode baru ini atau pun kode lama Anda untuk membuat efek hover pada gambar, dan Anda bisa bedakan mana yang lebih bagus. Kode ini berbasis HTML, jadi bisa digunakan pada pengguna web CMS seperti Platform WordPress dan Drupal, dan juga Platform Blogspot/Blogger, pada tahap-tahap versi yang lebih memadai juga dapat digunakan oleh Platform Joomla.

Kode HTML pembuat efek Hover pada gamabr tersebut ialah:
<img alt="" src="alamat-untuk-tombol-biasa.png" onMouseOut=" this.src='alamat-untuk-tombol-biasa.png' " onMouseOver=" this.src='alamat-untuk-tombol-hover.png' " />

HTML dengan tambahan link:
<a href="http://www.newsinfopedia.org"><img alt="" src="alamat-untuk-tombol-biasa.png" onMouseOut=" this.src='alamat-untuk-tombol-biasa.png' " onMouseOver=" this.src='alamat-untuk-tombol-hover.png' " /></a> 

Atau Menggunakan ini:

Kode untuk versi Javascript Preload Code :

<!-- JAVASCRIPT MUST BE PLACED IN THE HEAD TAG -->
<script type="text/javascript">
<!--

if (document.images)
{
mouseNormalImage = new Image();
mouseNormalImage.src = "alamat-untuk-tombol-biasa.png";

mouseOverImage = new Image();
mouseOverImage.src = "alamat-untuk-tombol-hover.png";
}

//-->
</script>

<img alt="" src="alamat-untuk-tombol-biasa.png" onMouseOut=" this.src='alamat-untuk-tombol-biasa.png' " onMouseOver=" this.src='alamat-untuk-tombol-hover.png' " />


Javascript Preload Code dengan tambahan Link:

<!-- JAVASCRIPT MUST BE PLACED IN THE HEAD TAG -->
<script type="text/javascript">
<!--

if (document.images)
{
mouseNormalImage = new Image();
mouseNormalImage.src = "alamat-untuk-tombol-biasa.png";

mouseOverImage = new Image();
mouseOverImage.src = "alamat-untuk-tombol-hover.png";
}

//-->
</script>

<a href="http://www.newsinfopedia.org"><img alt="" src="alamat-untuk-tombol-biasa.png" onMouseOut=" this.src='alamat-untuk-tombolbiasa.png' " onMouseOver=" this.src='alamat-untuk-tombol-hover.png' " /></a>


Hasil: sorot pointer menuju gambar



[+]Tambahan
Bagi Anda yang masih belum terlalu paham dengan Javascript Preload Code, silakan gunakan kode versi HTML saja untuk lebih mudahnya. Karena fungsinya sama saja.

Share: