Kỹ thuật dùng chung ảnh
Là kỹ thuật gom nhiều ảnh vào trong 01 ảnh đơn.
01 trang web tải nhiều ảnh có thể mất nhiều thời gian và phải
gửi nhiều yêu cầu đến máy chủ.
Sử dụng kỹ thuật dùng chung ảnh sẽ tiết kiệm được băng thông
và lệnh gửi đến máy chủ.
Ví dụ dùng chung ảnh
Trong ví dụ sau thay vì dùng 03 ảnh, chúng ta sẽ chỉ dùng 01 ảnh
duy nhất “img_navsprites.gif”
Với CSS, chúng ta có thể hiển thị chỉ phần ảnh mà ta cần.
Ví dụ:
#home
{
width: 46px;
height: 44px;
background:
url(img_navsprites.gif) 0 0;
}
Giải thích ví dụ:
Đầu tiên ta chèn 01 thẻ <img> trong phần <body>
<img
id="home" src="img_trans.gif"> đoạn mã này chỉ để chèn 01 tấm
hình trong suốt vì thuộc tính src không thể bỏ trống. Hình ảnh hiển thị thật
sự sẽ là hình trong thuộc tính background khai báo trong css.
width:
46px; height: 44px;
xác định phần ảnh chúng ta muốn dùng.
background:
url(img_navsprites.gif) 0 0;
xác định ảnh nền và vị trí của nó trong ảnh chung (left 0px, top
0px)
Đây là cách dễ nhất để dùng ảnh chung, bây giờ chúng ta mở rộng
ra phần chèn liên kết và hiệu ứng hover.
Tạo 01 danh sách điều hướng
Chúng ta muốn dùng chung ảnh (“img_navsprites.gif”) để tạo
01 danh sách điều hướng.
Chúng ta sẽ dùng 01 danh sách HTML, vì nó có thể là 01 liên
kết và cũng có ảnh nền.
Ví dụ:
#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;} – thuộc tính position được
thiết lập relative để cho phép định tọa độ tuyệt đối bên trong nó.
#navlist
li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} – canh lề và thụt lề thiết
lập bằng 0, list-style bị gỡ bỏ, và tất cả mục trong danh sách được định vị trí
tuyệt đối.
#navlist
li, #navlist a { height: 44px; display: block;} – chiều cao tất cả hình là 44px
Bây giờ, chúng ta bắt đầu định vị và định dạng từng phần:
#home { left: 0px; width: 46px; } – định vị tất cả
canh lề trái, và bề rộng hình là 46px.
#home { background:
url('img_navsprites.gif') 0 0;} – khai báo hình nền và vị trí của nó(left 0px, top 0 px)
#prev
{ left: 63px; width: 43px; } – lùi về bên phải 63px(#home
bề rộng 46px + khoảng trống giữa các phần tử) và bề rộng là 43px.
#prev
{ background:
url('img_navsprites.gif') -47px 0;} khai báo hình nền lùi về bên phải 47px (#home width 46px
+ 1px đường chia cắt)
#next { left: 129px; width: 43px; } – vị trí 129px về bên phải (#prev bắt đầu ở 63px + bề rộng
#prev 43px + thêm khoảng cách), và bề rộng là 43px.
#next { background: url('img_navsprites.gif') -91px 0;} – khai báo hình nền lùi 91px về bên phải (#home bề rộng 46px + 1px đường chia cắt + #prev bề rộng 43px + 1px đường chia cắt)
Hiệu ứng HOVER
Bây giờ chúng ta sẽ thêm hiệu ứng hover cho danh sách định
hướng của chúng ta.
Mẹo: thuộc tính :hover có thể dùng cho tất cả phần tử, không
chỉ mỗi liên kết.
Ảnh mới của chúng ta (“img_navsprites_hover.gif”) chứa 03 ảnh
dùng cho hiệu ứng hover.
Bởi vì đây là ảnh đơn chứ không phải 06 ảnh lẻ, cho nên sẽ
không có việc tải ảnh trễ khi người dùng rê chuột lên liên kết (thao tác
hover).
Ví dụ:
#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 03 tấm ảnh hover,
chúng ta khai báo chung 01 vị trí background chỉ 45px phía dưới.
Nếu vẫn chưa rõ các bạn xem thêm video clip sau:
Xem SẢN PHẨM KHUYẾN MÃI ở đây
Xem MỤC LỤC BÀI VIẾT VỀ CSS
- Đăng ký kênh tại đây: https://www.youtube.com/channel/UCXjV9sLt3WgamL7vofLofow?sub_confirmation=1
- Trang fan page: https://www.facebook.com/lophocvitinhcom
- Trang web: http://lophocvitinh.com
Không có nhận xét nào:
Đăng nhận xét