Đèn nền của các nút trong trang web thường được tổ chức bằng cách sử dụng hai hình ảnh. Khi bạn di con trỏ chuột qua phần tử tương ứng của tài liệu (liên kết hoặc nút), một sự kiện sẽ được tạo ra, theo hướng dẫn được viết bằng ngôn ngữ CSS, sẽ nhắc trình duyệt thay đổi hình ảnh này sang hình ảnh khác. Khi con trỏ chuột được di chuyển ra khỏi nút, sự thay thế ngược lại xảy ra.
Cần thiết
Kiến thức cơ bản về ngôn ngữ HTML và CSS
Hướng dẫn
Bước 1
Có một số tùy chọn để triển khai cơ chế đánh dấu như vậy. Đối với bất kỳ mã nào trong số chúng, bạn có thể sử dụng cùng một mã HTML, chỉ thay đổi mô tả kiểu tương ứng. Mã HTML của nút có thể trông giống như sau: văn bản trên nút Đây là mã định danh của phần tử trang này (id = "btnA") mà mô tả kiểu sẽ được đính kèm.
Bước 2
Để thực hiện một trong các tùy chọn, bạn cần chuẩn bị hai ảnh, một ảnh hiển thị nút ở trạng thái không hoạt động và ảnh thứ hai có đèn nền. Chúng sẽ được sử dụng làm hình nền của liên kết. Hướng dẫn CSS cho nút này có thể giống như sau:
a # btnA, a # btnA: đã thăm {
hiển thị: khối;
chiều rộng: 50px;
chiều cao: 20px;
background: url (btnA.gif) không lặp lại;
viền: 0;
}
a # btnA: di chuột vào {
background: url (btnA_hover.gif) không lặp lại;
viền: 0;
}
Ở đây, trong khối đầu tiên, kích thước của hình ảnh mô tả nút được chỉ định (chiều rộng: 50px; chiều cao: 20px;). Bạn cần thay thế chúng bằng các kích thước của bức tranh của bạn. Tên của các tệp hình ảnh nên được thay đổi theo cách tương tự: btnA.
Bước 3
Một thay thế là đặt cả hai hình ảnh vào một hình ảnh. Nó có thể là một bên trên cái kia, hoặc nó có thể nằm cạnh nhau. Nó cũng sẽ được sử dụng làm nền cho liên kết. Vì kích thước nút được chỉ định trong mô tả kiểu nút, bất kỳ thứ gì không vừa với chúng sẽ không hiển thị. Trong trường hợp này, các hướng dẫn được đặt trong mô tả CSS nên khi di con trỏ chuột, cuộn hình nền để vùng có hình ảnh của nút được tô sáng lọt vào khung. Đối với tùy chọn này, mã từ bước trước đó phải được thay đổi như sau:
a # btnA, a # btnA: đã ghé thăm {
hiển thị: khối;
chiều rộng: 50px;
chiều cao: 20px;
background: url (btnA.gif) không lặp lại;
viền: 0;
}
a # btnA: di chuột vào {
background: url (btnA.gif) không lặp lại 21px;
viền: 0;
}
Điều này giả định rằng bạn đã đặt các hình ảnh này lên trên hình ảnh kia (được đánh dấu ở dưới cùng) và lưu vào một tệp có tên btnA.gif. Chiều cao của các nút là 20px, chiều rộng là 50px - bạn cần thay thế các giá trị này bằng giá trị của riêng mình.
