Swardana Linggih Blog: Trik Sederhana Membuat Image Rollover CSS

Pada awalnya konsep image rollover memakai dua atau lebih file gambar yang berbeda, satu file gambar dibuat untuk default image dan satu lagi aktif jika mouse diarahkan ke object link gambar. Jika memakai dua atau lebih file source gambar yang berbeda untuk membuat image rollover, pernah saya coba memang bisa berfungsi namun sayangnya kurang responsif. Alasannya perlu waktu tambahan request load image yang kedua (rollover) oleh browser ketika mouse diarahkan pada object link gambar. Problem ini bisa diatasi dengan cara traditional menggunakan kode javascript yang umumnya digunakan oleh kebanyakan web designer lama. Kekurangan dengan menggunakan cara ini page loadingnya halamannya terasa sedikit lebih berat. Solusi yang lebih baik adalah menggunakan css, karena gambar yang dipakai hanya satu (normal, hover, active) sehingga browser cukup satu kali meload gambar, tinggal menentukan area lokasi untuk tiap-tiap efek rollover yang anda inginkan.

Contoh jika ingin membuat image rollover navigasi menu dengan asumsi link yang dipakai; "Home, Contact, About US, Support, Sitemap". Pertama yang harus dilakukan adalah buat dahulu tombol background gambar menggunakan software pengolah gambar seperti misalnya Adobe Photoshop. Contoh lihat gambar di bawah (lebar 75px, tinggi 75px).

Contoh gambar image rollover navigation menu

'Normal'. Gambar ini muncul sebagai background jika link tidak ada kontak dengan mouse.
'Hover'. Gambar muncul sebagai background ketika mouse diarahkan pada object.
'Klik'. Gambar ini muncul ketika objek link diklik.

Selanjutnya buatlah properties css untuk navigasi menu (Dengan ketentuan ukurun gambar 75px lebar, 75px tinggi yang dibagi menjadi tiga segmen masing-masing 25px seperti contoh gambar di atas).

[css]
.rollnav {
margin: 0px;
padding: 0px;
}

.rollnav ul {
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}

.rollnav li {
float: left;
}

.rollnav a {
display: block;
width: 75px;
height: 22px;
padding-left: 10px;
padding-top: 3px;
font: 13px Arial;
color: #000;
background: url("../images/nav1.jpg") left top no-repeat;
text-decoration: none;
}

.rollnav a:hover {
background-position: 0 -25px;
color: #FFF;
}

.rollnav a:active {
background-position: left bottom;
color: #333;
}
[/css]

Jika anda ingin menambahkan kode css di atas pada blogger ada dua cara yang dapat anda lakukan. Cara pertama copy dan pastekan di atas kode ]]></b:skin> pada tab 'LayOut' (Tata Letak) >> 'Edit HTML'. Cara yang kedua copy dan pastekan kode di atas pada teks editor, kemudian simpan dengan nama file seumpama 'rollnav.css'. Upload ke web server, attach ke blogger dengan cara menuliskan kode berikut ini diantara tag '<head>' sampai </head> pada bagian 'Edit HTML':

[html collapse="false"]
<link href="http://www.alamat-link-css-anda.com/rollnav.css" rel="stylesheet" type="text/css" />
[/html]

Sekarang tinggal buat link navigasinya. Contoh kodenya:

[html collapse="false"]
<div class="rollnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>
[/html]

Ganti karakter '#' dengan alamat url anda. Hasilnya akan seperti ini:

Home

Contact

About Us

Support

Sitemap

Berhasil kan!

Nah untuk membuat image rollover link cara yang biasa dipakai seperti ini:

Pertama buat dulu image yang mau anda pakai, contoh => image lebar 50px tinggi 150px seperti gambar di bawah ini:

Contoh image rollover link

Selanjutnya buat properties css nya untuk rollover image seperti di bawah ini:

[css]
.rollimage a {
display: block;
width: 50px;
height: 50px;
background: url("../images/top2.gif") left top no-repeat;
text-decoration: none;
}

.rollimage a:hover {
background-position: 0 -50px;
}

.rollimage a:active {
background-position: left bottom;
}
[/css]

Jika sudah buat link HTML nya. Contoh:

[html collapse="false"]
<div class="rollimage">
<a href="#top" title="Back To Top"></a>
</div>
[/html]

Hasilnya akan seperti ini:

Ganti link '#top' dengan alamat url anda.