Trik Sederhana Membuat Image Rollover CSS

Trik Sederhana Membuat Image Rollover CSSPada 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).

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)..rollnav { margin: 0px; padding: 0px; }

http://www.linggih.com | Trik Sederhana Membuat Image Rollover CSS

1

Trik Sederhana Membuat Image Rollover CSS.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; }

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 ]]> 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 sampai pada bagian Edit HTML:

Sekarang tinggal buat link navigasinya. Contoh kodenya:

Home

Contact About Us Support Sitemap

http://www.linggih.com | Trik Sederhana Membuat Image Rollover CSS

2

Trik Sederhana Membuat Image Rollover CSSGanti karakter # dengan alamat url anda. Test buka pada web browser dan lihat hasilnya. Article Source:

http://linggih.com/coding/css/trik-sederhana-membuat-image-rollover-css/

http://www.linggih.com | Trik Sederhana Membuat Image Rollover CSS

3