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:
boleh juga nih dim, macem punyanya danu, ahaha.. thanks
artikel yang bagus, macem punya danu yak? hehe thanks keep blogging dim
macem pnya dhanu gmna?ehmm mungkin. yg psti yg kya di blog ini yg di bgian header atas itu. thanks komennya
masangnya dimana??
Post a Comment
Kotak Komentar Klasik Klik Di sini