Oke, setelah lama tidak menulis tutorial baru (lagi buat website baru :D) sekarang saya akan menulis artikel lagi.
Kali ini kita akan mempelajari bagaimana membuat efek mouse hover pada images. Membuat gambar yang berubah, sebenarnya
cukup mudah apabila kita menggunakan Javascript, tapi kali ini saya akan mengajarkannya menggunakan CSS saja, tanpa
Javascript sama sekali.
Mengubah Posisi Background
Cara yang akan kita gunakan disini adalah mengubah posisi background. Jadi kita memiliki gambar tombol ketika berada
dalam posisi normal dan ketika mouse hover dalam 1 gambar. Nah nanti kita tinggal mengubah posisi background pada CSS nya saja sehingga terkesan tombol kita berubah. Bingung? lihat dulu contohnya seperti ini.
Oke pertama-tama anda save tombol dibawah ini, simpanlah dengan nama tombolhover.jpg
Setelah itu buatlah file index.html dan isilah dengan kode berikut ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mouse Hover hanya dengan CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="Mouse Hover, CSS" />
<meta name="Description" content="Mouse Hover hanya dengan CSS" />
<style type="text/css" media="all">
a.tombol {
border:0;
display: block;
width: 107px;
height: 31px;
background: url(tombolhover.jpg) no-repeat;
text-decoration: none;
}
a.tombol:hover {
background-position: 0 -31px;
}
</style>
</head>
<body>
<a href="http://www.dhimasronggobramantyo.com" class="tombol"></a>
</body>
</html>
Silahkan dicoba file index.htmlnya, mudah kan? oke sekarang saya jelaskan kenapa bisa begitu.
Fungsi CSS background-position
Jika anda perhatikan pada CSS pada class tombol a.tombol, kita mengatur width:107px dan height:31px, padahal width
dan height gambar kita ukurannya 107px x 62px. Sehingga pada background: url(tombolhover.jpg) yang ditampilkan hanya
selebar 107 px dan setinggi 31px, dimana kita akan dapatkan gambar yang paling atas saja. Lebih jelasnya silahkan lihat
ukuran gambarnya dibawah ini.
Jadi karena kita menampilkan background 31px yang paling atas, maka yang tampil adalah tombol yang atas.
Berikutnya untuk mouse hovernya a.tombol:hover kita menggunakan background-position: 0 -31px. Maksudnya ini kita mengubah
tampilan background pada koordinat y sebesar -31px. Jadi gambar yang ditampilkan berkurang 31px sehingga yang tampil
adalah tombol yang bawah.
Bagaimana? mudah kan, ini hanya dasarnya saja, anda dapat mengembangkannya sendiri. Selamat mencoba...
