Membuat Image Rollover (hover)

Oke pada siang hari hari ini saya akan mengajarkan bagaimana cara membuat image Rollover. Ada yang yang sudah tau sebelumnya tentang rollover?bagus kalau sudah tau, tapi saya akan tetap mengajarkannya buat yang tidak tau. Image Rollover itu ada sebuah efek untuk image sebelum dan saat di arahkan mouse atau bahasa mudahnya hover. Memang sulit di mengerti ya kalau cuma teori. Untuk contoh coba lihat 3 gambar (FB,Twitter,Subscribe) yang ada di atas blog ini, sekarang arahkan mouse ke gambar itu, nah itu dia rollover.

Begini, saya punya 2 gambar yaitu
gambar 1
gambar 2
Nah dari 2 gambar itulah saya membuat image rollover tadi. Lalu bagaimana bentuk kodenya? seperti ini ....
<style type="text/css">
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}
</style>


<a class="pic" href="URL tujuan jika gambar di klik">
<img class="image1" src="URL gambar 1" />
<img class="image2" src="URL gambar 2" /></a>
Mudah bukan? sekarang giliran anda mencoba. silahkan....

4 komentar:

Kukuh Cakra D, 19 September 2010 at 21:41 | [Reply]

boleh juga nih dim, macem punyanya danu, ahaha.. thanks

Kukuh Cakra D, 19 September 2010 at 21:44 | [Reply]

artikel yang bagus, macem punya danu yak? hehe thanks keep blogging dim

Dimas Abi Galoga, 19 September 2010 at 21:52 | [Reply]

macem pnya dhanu gmna?ehmm mungkin. yg psti yg kya di blog ini yg di bgian header atas itu. thanks komennya

Seputar Duniabola, 10 October 2010 at 01:20 | [Reply]

masangnya dimana??

Post a comment

Kotak Komentar Klasik Klik Di sini

« Prev Next » Home