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 ="http://lutfitv.blogspot.com/" 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="http://lutfitv.blogspot.com/" 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="http://lutfitv.blogspot.com/" 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="http://lutfitv.blogspot.com/" 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 :
Tulisan Warna Biru adalah link tujuan ketika diklik.
Tulisan Warna Pink adalah URL Gambar Yang Tampil.
Tulisan Warna Merah adalah URL Gambar 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.
Hover Image dari Gambar berbeda Langsung Nongol.