Gambar Sprite
Sebuah sprite gambar adalah koleksi gambar dimasukkan ke dalam satu gambar.
Sebuah halaman web dengan banyak gambar dapat mengambil waktu yang lama untuk memuat dan menghasilkan permintaan beberapa server.
Menggunakan gambar sprite akan mengurangi jumlah permintaan server dan menghemat bandwidth.
Gambar Sprite – Contoh Sederhana
Alih-alih menggunakan tiga gambar terpisah, kita menggunakan gambar tunggal
(“img_navsprites.gif”):
Dengan CSS, kita bisa menunjukkan hanya bagian dari gambar yang kita butuhkan.
Pada contoh berikut CSS menentukan bagian mana dari gambar “img_navsprites.gif” untuk menunjukkan:
img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
- <img class=”home” src=”img_trans.gif” /> – Hanya mendefinisikan sebuah gambar transparan kecil karena atribut src tidak boleh kosong. Gambar yang ditampilkan akan menjadi gambar latar belakang kita tentukan dalam CSS
- width: 46px; height: 44px; – Menentukan bagian gambar yang ingin kita gunakan
- background: url (img_navsprites.gif) 0 0; – Menentukan gambar latar belakang dan posisinya (kiri 0px, 0px atas)
Ini adalah cara termudah untuk menggunakan sprite gambar, sekarang kita ingin memperluas dengan menggunakan link dan efek hover.
Sprite Gambar – Buat Daftar Navigasi
Kami akan menggunakan daftar HTML, karena dapat link dan juga mendukung gambar latar belakang:
#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;}
#home{background:url(‘img_navsprites.gif’) 0 0;}#prev{left:63px;width:43px;}
#prev{background:url(‘img_navsprites.gif’) -47px 0;}#next{left:129px;width:43px;}
#next{background:url(‘img_navsprites.gif’) -91px 0;}
Contoh menjelaskan:
- # navlist {position: relative;} – posisi diatur untuk relatif untuk memungkinkan posisi mutlak di dalamnya
- # navlist li {margin: 0; padding: 0; daftar-style: none; position: absolute; top: 0;} – margin dan
- padding diatur ke 0, daftar-gaya dihapus, dan semua daftar item mutlak diposisikan
- # navlist li, # navlist suatu {height: 44px; display: block;} – ketinggian dari semua gambar 44px
Sekarang mulai untuk posisi dan gaya untuk setiap bagian tertentu:
- # rumah {left: 0px; width: 46px;} – Diposisikan semua jalan ke kiri, dan lebar gambar adalah 46px
- # rumah {background: url (img_navsprites.gif) 0 0;} – Menentukan gambar latar belakang dan posisinya
- (kiri 0px, 0px atas)
- # prev {left: 63px; width: 43px;} – Diposisikan 63px ke kanan (# rumah lebar 46px + beberapa ruang
- tambahan antara item), dan lebarnya adalah 43px.
- # prev {background: url (‘img_navsprites.gif’)-47px 0;} – Menentukan gambar latar belakang 47px
- ke kanan (# rumah lebar 46px + pembagi garis 1px)
- # selanjutnya {left: 129px; width: 43px;} – Diposisikan 129px ke kanan (mulai dari # prev adalah
- 63px + # prev lebar 43px + ruang tambahan), dan lebarnya adalah 43px.
- # selanjutnya {background: url (‘img_navsprites.gif’) no-repeat-91px 0;} – Menentukan gambar
- latar belakang 91px ke kanan (# rumah lebar 46px + garis pembatas 1px + # prev lebar 43px + pembagi garis 1px)
Gambar Sprite – Melayanglah Efek
Gambar baru kami (“img_navsprites_hover.gif”) berisi gambar navigasi tiga dan tiga gambar yang akan digunakan untuk hover efek:
Kami hanya menambahkan tiga baris kode untuk menambahkan efek hover:
#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;}
- Karena item daftar berisi link, kita dapat menggunakan: hover pseudo-class
- # rumah: hover {background: url transparan (img_navsprites_hover.gif) 0-45px;} – Untuk semua tiga gambar hover kita menentukan posisi latar belakang yang sama, hanya 45px lebih bawah