Image Sprites di CSS: Cara Membuat dan Contoh Codenya

Gambar Sprites

Sebuah gambar sprite adalah kumpulan gambar yang dimasukkan ke dalam satu gambar.

Halaman web dengan banyak gambar membutuhkan waktu lama untuk dimuat dan menghasilkan banyak permintaan server.

Menggunakan image sprite akan mengurangi jumlah permintaan server dan menghemat bandwidth.

Gambar Sprite – Contoh Sederhana

Alih-alih menggunakan tiga gambar terpisah,kita bisa menggunakan gambar tunggal ini (“img_navsprites.gif”):

Dengan CSS, kita bisa menampilkan hanya sebagian dari gambar yang kita butuhkan.

Dalam contoh berikut, CSS menentukan bagian mana dari gambar “img_navsprites.gif” yang akan ditampilkan:

Contoh :

#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

Penjelasan Kode :

• <img id=”home” src=”img_trans.gif”> – Hanya mendefinisikan gambar transparan kecil karena atribut src tidak boleh kosong. Gambar yang ditampilkan akan menjadi gambar latar yang kita tentukan di CSS
• width: 46px; height: 44px; – Mendefinisikan porsi gambar yang ingin kita gunakan pada
  background: url (img_navsprites.gif) 0 0;
• background: url(img_navsprites.gif) 0 0; – Mendefinisikan gambar latar belakang dan posisinya (kiri 0px, atas 0px)

Ini adalah cara termudah untuk menggunakan sprite gambar, sekarang kita akan mengembangkannya dengan menggunakan tautan(link) dan efek hover.

Gambar Sprite – Buat Daftar Navigasi

Kita akan menggunakan gambar sprite (“img_navsprites.gif”) untuk membuat daftar navigasi.

Kita akan menggunakan daftar HTML, karena HTML berupa tautan dan juga mendukung gambar latar belakang:

Contoh :

#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

Penjelasan Kode :

• #navlist {position: relative;} – posisi disetel ke relatif untuk agar pemosisian absolut di dalamnya
• #navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} – margin dan padding disetel ke 0, list-style dihapus, dan semua item daftar diposisi absolut
• #navlist li, #navlist a {height: 44px; display: block;} – tinggi semua gambar adalah 44px

Sekarang kita mulai memposisikan dan memberi gaya untuk setiap bagian tertentu:

• #home {left: 0px; width: 46px;} – Diposisikan sepenuhnya ke kiri, dan lebar gambar adalah 46px
• #home {background: url (img_navsprites.gif) 0 0;} – Mendefinisikan gambar background dan posisinya (left 0px, top 0px)
• #prev {left: 63px; width: 43px;} – Diposisikan 63px ke kanan (#home width 46px + beberapa spasi ekstra di antara item), dan lebarnya 43px.
• #prev {background: url (‘img_navsprites.gif’) -47px 0;} – Mendefinisikan gambar latar belakang 47px ke kanan (#home width 46px + 1px line divider)
• #next {left: 129px; width: 43px;} – Diposisikan 129px ke kanan (awal #prev adalah 63px + #prev width 43px + spasi ekstra), dan lebarnya 43px.
• #next {background: url (‘img_navsprites.gif’) -91px 0;} – Mendefinisikan gambar latar belakang 91px ke kanan (#home width 46px + 1px line divider + #prev width 43px + 1px line divider)

Gambar Sprite – Efek Hover

Sekarang kita akan menambahkan efek hover ke daftar navigasi.

Tip: Selektor :hover dapat digunakan di semua elemen, tidak hanya di link.

Gambar berikut (“img_navsprites_hover.gif”) berisi tiga gambar navigasi dan tiga gambar yang digunakan untuk efek hover:

Karena ini adalah satu gambar tunggal, dan bukan enam file terpisah, tidak akan ada penundaan pemuatan saat pengguna mengarahkan kursor ke gambar.

Kita hanya akan menambahkan tiga baris kode untuk menambahkan efek hover, seperti di bawah ini:

Contoh :

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}

Penjelasan Kode :

• #home a: hover {background: transparent url (‘img_navsprites_hover.gif’) 0 -45px;} – Kita tetapkan ketiga gambar hover sama dengan posisi background, hanya gambarnya 45px ke bawah.