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!
<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.
Posted in: EFEK IMAGE.jpg)
