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:
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
Jadi karena kita menampilkan background 31px yang paling atas, maka yang tampil adalah tombol yang atas.
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...
Tidak ada komentar:
Posting Komentar