Huiihh, demen banget ya gue posting tutorial. Ahahahahaa, ya ga papa lah. Berbagi ilmu itu wajib hukumnya, ya.. daripada gue galau-galauan terus kan. Hmmmm
Sekarang ini gue mau ngasih tau gimana caranya bikin rollover image di HTML.
Rollover image itu semacam button yang kita kasih sentuhan animasi sedikit. Jadinya nanti kaya gambar gif gitu. Misalkan kaya button share di blog-blog atau button follow di blog-blog, kan kalo kita deketin mouse ke gambar itu ada semacam perpindahan warna. Jadi di postingan ini gue bakal ngasih tau bagaimana cara membuatnya. Sebenernya sih tanpa gue kasih tau juga mungkin kalian udah tau caranya. Ada sih cara gampangnya bikin rollover image pake software semacam Adobe Dreamweaver. Cuma nanti script yang kita dapetin bakal panjang lebar.
Sekarang ini gue bakal ngasih tau gimana caranya buat bikin rollover image dengan script yang minim.
Begini caranya :
- Siapin 2 gambar sama tapi beda warna. Misalkan kaya gambar ini...
Gambar 1 :
Gambar 2 :
- Terus kita kasih script ini :
Ini ditaro di bagian tag <head> :
<style type="text/css">
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}
</style>
Ini ditaro di bagian tag <body> :
<center><a class="pic" href="LINK TUJUAN JIKA GAMBAR DIKLIK">
<img class="image1" src="URL GAMBAR 1" />
<img class="image2" src="URL GAMBAR 2" /></a></center>
------------------------------------
Maka nanti yang akan kita dapatkan seperti ini :
Maka nanti yang akan kita dapatkan seperti ini :
Lucu khaannn... Emmmm... hahahahaahaa...
Udah yaaahh tutorial seputar rollover image.
Terimakasih sudah berkunjung...
No comments:
Post a Comment