NTM Solutions

Thứ Bảy, 25 tháng 6, 2022

Tự học CSS - Bài 30 - Kỹ thuật dùng chung ảnh

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

Sưu tầm bởi #drM

Không có nhận xét nào:

Đăng nhận xét

Facebook Youtube RSS