Rollover Image CSS

Trik Sederhana Membuat Image Rollover Berbasis CSS

---

Pada awalnya penerapan image rollover memakai dua atau lebih file gambar yang berbeda, satu file gambar diperuntukkan untuk default dan yang satu lagi akan 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 image yang kedua (rollover) perlu di load oleh browser ketika mouse diarahkan pada object link gambar. Masalah ini bisa diatasi dengan cara traditional menggunakan kode javascript yang umumnya digunakan oleh kebanyakan web design software. 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.

more...