Image Sprites
Sebuah sprite gambar koleksi gambar dimasukkan ke dalam satu gambar. ke dalam suatu halaman web dengan banyak gambar dapat mengambil waktu yang lama untuk memuat dan menghasilkan permintaan beberapa server yang menggunakan sprite gambar akan mengurangi jumlah permintaan server dan menghemat bandwidth.Image Sprites - Simple Example
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 mana dari "img_navsprites.gif" gambar untuk menunjukkan:
CONTOH:
<!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
#next {
width: 43px;
height: 44px;
background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>
<img id="home" src="img_trans.gif"><br><br>
<img id="next" src="img_trans.gif">
</body>
</html>
Contoh menjelaskan:
<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 kita tentukan dalam CSS
width: 46px; height: 44px; - Mendefinisikan bagian dari gambar yang ingin kita gunakan
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 ingin memperluas dengan menggunakan link dan efek hover.
Tidak ada komentar:
Posting Komentar