Rollover Image CSS - Hemat Space & Bandwidth

Umumnya rollover image (gambar rollover) CSS biasa menggunakan 2 gambar terpisah atau 2 gambar pada satu file image.

Jika menggunakan dua gambar terpisah, contohnya seperti berikut. Pertama harus ada dua gambar yang akan dijadikan objek rollover image (contoh: logo Facebook). Terdapat 2 gambar, pada gambar di bawah masing-masing gambar normal dan rollover / hover mouse.

Gambar Normal



Gambar Hover



CSS yang dipakai adalah seperti di bawah ini:

[css]
.fbDua {
width:125px;
height:125px;
margin:20px auto;
}

.fbDua a {
display: block;
width: 125px;
height: 125px;
background: url(http://linggihnote.blogspot.com/images/css/rollover-image-facebook-hover.jpg);
text-decoration: none
text-indent: -9000px;
}

.fbDua a:hover {
background:url(http://linggihnote.blogspot.com/images/css/rollover-image-facebook.jpg)
}

.fbDua a img {
border: none
}
[/css]

Code HTML yang dipakai pada CSS di atas adalah:

[html collapse="false"]
<div class="fbDua">
<a href="#" title="Rollover image hemat space &amp; Bandwidth">Keyword anda tulis di sini.</a>
</div>
[/html]

Maka hasilnya akan seperti ini:

Keyword anda tulis di sini.

Jika menggunakan dua gambar yang terdapat pada satu file image, pertama siapkan dahulu file gambar yang ingin dipakai. Contoh seperti gambar di bawah ini dengan dimensi ukuran lebar 125px dan tinggi 250px.



Kemudian buat properties CSS seperti di bawah

[css]
.fbDuasatu {
width:125px;
height:125px;
margin:20px auto;
}

.fbDuasatu a {
display: block;
width: 125px;
height: 125px;
background: url(http://linggihnote.blogspot.com/images/css/rollover-image-facebook-dua-satu.jpg) left top no-repeat;
text-decoration: none
text-indent: -9000px;
}

.fbDuasatu a:hover {
background-position: left bottom
}

.fbDuasatu a img {
border: none
}
[/css]

Code HTML yang dipakai pada properties CSS di atas:

[html collapse="false"]
<div class="fbDuasatu">
<a href="#" title="Rollover image hemat space &amp; Bandwidth">Keyword anda tulis di sini.</a>
</div>
[/html]

Hasilnya akan tampak seperti di bawah ini:

Keyword anda tulis di sini.

Nah yang terakhir menggunakan trik yang menjadi fokus utama artikel kali ini, adalah hanya dengan menggunakan satu gambar saja untuk membuat rollover image css yang irit space dan bandwidth. Pertama siapkan dahulu satu gambar yang ingin dibuat rollover. Contoh seperti logo facebook yang satu ini:



Kemudian buat properties CSS seperti di bawah ini:

[css]
.fbSave {
width:125px;
height:125px;
margin:20px auto;
}

.fbSave a {
background:url(http://linggihnote.blogspot.com/images/css/rollover-image-facebook.jpg);
margin:0;
opacity: 0.5;
-moz-opacity:0.5;
display: block;
width: 125px;
height: 125px;
overflow: hidden;
float: left;
text-indent: -9000px;
margin-right: 7px;
clear:left
}

.fbSave a:hover {
opacity: 1;
-moz-opacity:1
}
[/css]

Code HTML sama seperti sebelumnya, namun sesuaikan dengan properties Class CSSnya

[html collapse="false"]
<div class="fbSave">
<a href="#" title="Rollover image hemat space &amp; Bandwidth">Keyword anda tulis di sini.</a>
</div>
[/html]

Hasilnya akan tampak seperti di bawah ini

Keyword anda tulis di sini.

Pada properties CSS di atas, untuk mengatur tingkat kecerahan gambar, edit "opacity" & "-moz-opacity". Semakin kecil nilainya, maka akan semakin pudar objek gambar.

Untuk "width" & "height" pada properties css, ganti dengan ukuran dimensi sesuai gambar yang anda pakai. Bagian text yang bertuliskan "Keyword anda tulis di sini." isikan dengan keyword (kata kunci) anda, tulisan keyword ini tidak akan muncul ketika dibuka pada halaman browser karena Selector text link disetting tidak munculkan oleh property (text-indent: -9000px;).