Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «

Bila tak pegal di tangan
silahkan tulis sebuah komentar!

gubhug reyot

 
GR | Edited by | gubhug reyot