Ví dụ đơn giản về Image Sprites
Thay vì sử dụng ba hình ảnh riêng biệt, chúng tôi sử dụng hình ảnh duy nhất này ("img_navsprites.gif"):
Với CSS, chúng ta chỉ có thể hiển thị phần hình ảnh mà chúng ta cần.
Trong ví dụ sau, CSS chỉ định phần nào của hình ảnh "img_navsprites.gif" sẽ hiển thị:
#home { width: 46px; height: 44px; background: url(img_navsprites.gif) 0 0; }Giải thích ví dụ:
<img id="home" src="img_trans.gif">- Chỉ xác định một hình ảnh nhỏ trong suốt vì thuộc tính src không được để trống. Hình ảnh hiển thị sẽ là hình nền mà chúng tôi chỉ định trong CSSwidth: 46px; height: 44px;- Xác định phần hình ảnh mà chúng tôi muốn lấybackground: url(img_navsprites.gif) 0 0;- Xác định hình nền và vị trí của nó (left 0px, top 0px)
Image Sprites - Tạo một Navigation List
Chúng tôi muốn sử dụng image sprite ("img_navsprites.gif") để tạo navigation list.
Chúng tôi sẽ sử dụng HTML list, vì nó có thể là một link và cũng hỗ trợ hình nền:
#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; }Giải thích ví dụ:
- #navlist {position:relative;} - position có giá trị là relative để sử dụng position absolute bên trong nó
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin và padding được set về 0, list-style bị xoá, và tất cả list item đều có position absolute
- #navlist li, #navlist a {height:44px;display:block;} - chiều cao của hình ảnh là 44px
Bây giờ hãy bắt đầu định vị và tạo kiểu cho từng phần cụ thể:
- #home {left:0px;width:46px;} - đẩy vị trí qua bên trái, và chiều cao hình ảnh là 46px
- #home {background:url(img_navsprites.gif) 0 0;} - khai báo background image và vị trí (left 0px, top 0px)
- #prev {left:63px;width:43px;} - vị trí là 63px bên phải (#home rộng 46px + không gian thừa), và rộng 43px
- #prev {background:url('img_navsprites.gif') -47px 0;} - khai báo background image 47px bên phải (#home rộng 46px + 1px đường chia)
- #next {left:129px;width:43px;} - vị trí 129px bên phải (bắt đầu của #prev là 63px + #prev rộng 43px + không gian thừa), và rộng là 43px
- #next {background:url('img_navsprites.gif') -91px 0;} - khai báo background image 91px bên phải (#home rộng 46px + 1px đường chia + #prev rộng 43px + 1px đường chia)
Image Sprites - Hover Effect
Bây giờ chúng tôi muốn thêm hiệu ứng di chuột vào naviagation list của chúng tôi.
Bởi vì đây là một hình ảnh duy nhất, không phải sáu tệp riêng biệt, sẽ không có độ trễ khi tải khi người dùng di chuột qua hình ảnh.
Chúng tôi chỉ thêm ba dòng code để thêm hiệu ứng di chuột:
#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; }Giải thích ví dụ:
- #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - Đối với cả ba hình ảnh, chúng tôi chỉ định cùng một vị trí nền, chỉ xuống 45px nữa