Gambar Sprite
Sebuah sprite gambar, koleksi gambar dimasukkan ke dalam satu gambar.
Sebuah halaman web dengan banyak gambar dapat mengambil waktu yang lama untuk memuat dan menghasilkan beberapa permintaan server.
Gambar Sprite - Wikipedia Contoh
Alih-alih menggunakan tiga gambar terpisah, kami menggunakan gambar ini tunggal ("img_navsprites.gif"):
Dengan CSS, kita dapat menunjukkan hanya bagian dari gambar yang kita butuhkan.
Pada contoh berikut CSS menentukan bagian dari mana "img_navsprites.gif" gambar untuk ditampilkan di browser:
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Contoh penjelasan:
- <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 belakang yang kita tentukan di CSS
- width: 46px; height: 44px; - Mendefinisikan bagian dari gambar yang kita ingin gunakan
- background: url (img_navsprites.gif) 0 0; - Mendefinisikan gambar latar belakang dan posisinya (0px kiri, atas 0px)
Ini adalah cara termudah untuk menggunakan sprite gambar, sekarang kita ingin memperluas dengan menggunakan link dan membawa efek.
Gambar Sprite - Buat Daftar Navigasi
Kami ingin menggunakan gambar sprite ("img_navsprites.gif") untuk membuat daftar menu.
Kami akan menggunakan daftar HTML, karena link dapat dan juga mendukung gambar latar belakang/background:
#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;
}
Contoh menjelaskan:
- #navlist {position: relative;} - posisi diatur untuk relatif untuk memungkinkan posisi mutlak di dalamnya
- #navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - margin dan padding diatur ke 0, list-style dihapus, dan semua item daftar yang mutlak diposisikan
- #navlist li, #navlist a {height: 44px; display: block;} - ketinggian semua gambar yang 44px
Sekarang mulai posisi dan gaya untuk setiap bagian tertentu:
- #home {kiri: 0px; width: 46px;} - Diposisikan semua jalan ke kiri, dan lebar gambar adalah 46px
- #home {background: url (img_navsprites.gif) 0 0;} - Menentukan gambar latar belakang dan posisinya (0px kiri, atas 0px)
- #prev {kiri: 63px; width: 43px;} - Diposisikan 63px ke kanan (#home lebar 46px + beberapa ruang ekstra antara item), dan lebarnya adalah 43px.
- #prev {background: url ('img_navsprites.gif') -47px 0;} - Menentukan 47px gambar latar belakang ke kanan (#home lebar 46px + 1px baris pembagi)
- #next {kiri: 129px; width: 43px;} - Diposisikan 129px ke kanan (awal #prev adalah 63px + lebar #prev 43px + ruang tambahan), dan lebarnya adalah 43px.
- #next {background: url ('img_navsprites.gif') -91px 0;} - Menentukan 91px gambar latar belakang ke kanan (#home lebar 46px + 1px baris pembagi + lebar #prev 43px + 1px baris pembagi)
Gambar Sprite - Hover Efek
Sekarang kita ingin menambahkan efek hover ke daftar navigasi kami.
hover pemilih digunakan untuk memilih elemen ketika Anda mengarahkan mouse atas mereka.
Image baru kami ("img_navsprites_hover.gif") berisi tiga gambar navigasi dan tiga gambar yang akan digunakan untuk efek melayang-layang:
Karena ini adalah salah satu gambar tunggal, dan tidak enam file terpisah, tidak akan ada penundaan pemuatanketika pengguna melayang di atas gambar.
Kami hanya menambahkan tiga baris kode untuk menambahkan efek hover:
#home a:hover {
background: url('img_navsprites.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites.gif') -47px 0;
}
#next a:hover {
background: url('img_navsprites.gif') -91px 0;
}
0 komentar:
Posting Komentar