Apa itu CSS Sprite dan Contohnya

Apa itu CSS Sprite dan Contohnya

Istilah "sprite" muncul sebenarnya untuk istilah pemograman game zaman dulu, mereka meloading banyak image dalam 1 file, kemudian dengan memanfaatkan pengaturan background position gambar yang ditampilkan berubah-ubah, hal ini guna menghemat memori dan supaya tidak sering loading. Nah dalam teknik desain website kita juga bisa mengimplementasikan hal ini, namanya CSS sprite. Biasa CSS sprite dibuat untuk tombol atau gambar animasi yang jika mousenya berada di atas, maka gambar tombol akan berubah. Dengan teknik CSS biasa, biasanya kita membuat 2 buah file image, yang dengan bantuan javascript kita ubah source gambarnya jika pointer mouse berada di atas objek. Tapi dengan CSS sprite cukup 1 file image

Contoh CSS Sprite

Mungkin anda pernah melihat website menu atau tombol suatu website yang berubah jika kita taruh pointer mouse di atas, tetapi ketika kita save page as gambar-gambar tombolnya hanya berada dalam 1 file, seperti situs apple, facebook dan lainnya (contoh file image menu apple.com).

Untuk lebih mengerti perhatikan contoh sederharna CSS sprite berikut:

Jika anda taruh pointer mouse di atas, maka gambarnya akan berubah. Nah jika menggunakan teknik CSS sprite, kita cukup membutuhkan 1 file image seperti di bawah:

Kemudian dengan CSS kita atur supaya pas mouse di atas yang ditampilkan berubah. CSS yang digunakan adalah:

background-image: url(bg.gif);
background-position: [horizontal position] [vertical position];

Kode CSS Sprite

Berikut adalah kode untuk contoh kode CSS sprite di atas

<style>

#menu-desrizal{

    width:91px;

    height:25px;

    text-decoration:none;

    display:block;

    background-image:url(gambar/desrizal-css-sprite.jpg);

    background-position:0 0;

}

#menu-desrizal:hover{ background-position:0 -25; }

</style>

<a id="menu-desrizal" href="http://www.desrizal.com"></a>

Penjelasan:
Kita punya tombol menu link, kita atur tombolnya berukuran 91x 25 pixel, kemudian kita beri latar belakang gambar.
Jika hover (pointer mouse berada di atas) mala kita atur posisi backgroundnya untuk menampilkan tulisan desrizal bagian bawah.