.jpg)
Mouse over dengan css ini sebenarnya menggunakan prinsip rollover.Jadi gambar di bawah bukanlah sebuah sulap atau animasi gif tetapi merupakan gambar dengan dua obyek yang yang berdampingan. Melalui serangkaian css, maka ketika cursor berada di atas gambar, gambar akan bergeser secara cepat untuk menampilkan gambar di sisi kanan. Untuk mendapatkan effect yang sempurna atau dengan ukuran gambar berbeda hanya perlu dilakukan perubahan lebar (width) dan tinggi (height) pada KODE CSS dan obyek yang ditampilkan. Untul lebik jelasnya anda bisa mendownload gambar di bawah beserta KODE CSSnya.
Cara menggunakan KODE css mouseover effect
Simpan KODE CSS berikut di dalam template pada bagian head atara di antara <head> dan </head>
Kode CSS :
#mouseover a{
text-decoration : none;
display:block; height:167px;
width:179px; overflow:hidden;
opacity:0.5;
filter:alpha(opacity=50);
}
#mouseover a:hover{
text-decoration : none;
display:block;
text-indent:-179px;
opacity:1.0;
filter:alpha(opacity=100);
}2. Gunakan KODE berikut di bagian body atau saat melakukan posting.
<div id="mouseover" align="center"><a href="http://..../image.jpg"><img title="mouse rollover" src="http://..../image.jpg"/></a></div>
Keterangan :
- KODE untuk transparansi gambar (opacity) disertakan hanyalah supaya hasil akhir yang didapatkan sama persis dengan contoh di atas. Apabila tidak di kehendaki maka KODE opacity bisa di hilangkan.
- Apabila menginginkan gambar dengan ukuran berbeda perlu dilakukan penyesuaian pada height:167px; width:179px;dan text-indent:-179px;
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Posting » Rabo KLIWON, Maret, 07, 2012 » Happy Blogging - gubhugreyot «
aslamualikumm.....BOS...
BalasHapusKalo efek tanpa border pada contoh recent Visitor pake Efeknya yang mana ..BOS..Klo bloeh tau....
terimaksh sebelumnya...
salam blogerr....