Hover Image dari Gambar berbeda Langsung Nongol

Hover yang dibuat untuk memperlihatkan gambar berbeda dari gambar/image yang ada dihalaman posting biasanya tidak akan langsung muncul begitu saja meskipun cursor sudah di letakkan di atasnya. Hal ini disebabkan image baru yang di tugaskan sebagai hover masih harus menunggu loading terlebih dahulu. Kejadian seperti ini tentunya akan membuat harapan akan hover yang muncul seketika begitu cursor diatas obyek menjadi sirna.Di bawah ini ada sebuah trik yang mampu membuat sebuah hover image dari obyek berbeda akan spontan muncul ketika cursor menyentuh obyek yang ditampilkan.

Demo : Arahkan cursor pada gambar di atas!

Contoh KODE yang digunakan hover image :

xHTML :

<a href onMouseOver="document.GR1.src='http://.../image.hover1.jpg';" onMouseOut="document.GR1.src='http://.../image1.jpg';"><img src="http://.../image1.jpg" name="GR1" /></a>
<img src="http://.../image.hover1.jpg" style="display:none;padding:0;box-shadow:0 0 0 #fff;border:0 solid;"/>

<a href onMouseOver="document.GR2.src='http://.../image.hover2.jpg';" onMouseOut= "document.GR2.src='http://.../image2.jpg';"><img src="http://.../image2.jpg" name="GR2" /></a>
<img src="http://.../image.hover2.jpg" style="display:none;padding:0;box-shadow:0 0 0 #fff;border:0 solid;"/>

<a href onMouseOver="document.GR3.src='http://.../image.hover3.jpg';" onMouseOut="document.GR3.src='http://.../image3.jpg';"><img src="http://.../image3.jpg" name="GR3" /></a>
<img src="http://.../image.hover3.jpg" style="display:none;padding:0;box-shadow:0 0 0 #fff;border:0 solid;"/>

<a href onMouseOver="document.GR4.src='http://.../image.hover4.jpg';" onMouseOut="document.GR4.src='http://.../image4.jpg';"><img src="http://.../image4.jpg" name="GR4" /></a>
<img src="http://.../image.hover4.jpg" style="display:none;padding:0;box-shadow:0 0 0 #fff;border:0 solid;"/>

Catatan/Keterangan :

• Setiap gambar diberi identitas yang berbeda seperti GR1 s/d GR4
• http://.../image1.jpg s/d http://.../image4.jpg = URL gambar yang ditampilkan/terlihat
• http://.../image.hover1.jpg s/d http://.../image.hover4.jpg = URL gambar yang akan digunakan sebagai hover
• <img src="http://.../image.hover1.jpg" style="display:none;padding:0;box-shadow:0 0 0 #fff;border:0 solid;"/>
  --> style="display:none;padding:0;box-shadow:0 0 0 #fff;border:0 solid;"
  --> berfungsi untuk membuat gambar hover agar terloading bersamaan dengan gambar utama/primer (yang ditampilkan/terlihat), sehingga ketika mouse bearada di atas image maka gambar sekunder langsung nongol tanpa harus loading terlebih dahulu.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - gubhugreyot «