Bản đồ hình ảnh HTML

” và áp dụng các thuộc tính CSS sau:

.image-map {

bề rộng : 700px;

lề: xe hơi;

}

Dưới đây là mô tả về các thuộc tính CSS được đề cập:

• Các ' bề rộng ” đặt chiều rộng của phần tử div.
• Các ' lề ” thuộc tính thêm nhiều chỗ hơn xung quanh phần tử.

Phần tử kiểu “img”

.image-map img {

bề rộng : 100 %;

}

Xem, tọa độ khu vực được chỉ định trong “ tọa độ ” thuộc tính hiện có thể nhấp được:

Trong phần tiếp theo, chúng ta sẽ tìm hiểu cách liên kết bản đồ hình ảnh với một nguồn khác.

Làm cách nào để tạo một bản đồ hình ảnh được liên kết với trang khác?

Tạo một trang HTML khác với phần mở rộng “ .html ” bằng cách làm theo các bước được đề cập dưới đây:

• Trong trường hợp của chúng tôi, chúng tôi đặt tên cho nó là “ máy tính xách tay.html ”.
• Thêm một phần tử div và gán cho nó một lớp “ máy tính xách tay-img ”.
• Sau đó, đặt một hình ảnh bằng cách sử dụng “ ” phần tử và liên kết phần tử “ src ' và ' bề rộng ' thuộc tính.
• Tiếp theo, chỉ định một đoạn bằng cách sử dụng “

  ' yếu tố:

< div tầng lớp = 'máy tính xách tay-img' >

< hình ảnh src = '/images/laptop.jpg' bề rộng = '400px' >

< P >Máy tính xách tay là một máy tính xách tay có thể di chuyển và sử dụng trong nhiều môi trường khác nhau.< / P >

< / div >

Trong CSS, chỉ định các thuộc tính CSS sau cho “ máy tính xách tay-img ' tầng lớp:

.laptop-img {

bề rộng : 500px;

lề: xe hơi;

}

đầu ra

Bây giờ, chúng tôi sẽ liên kết “ máy tính xách tay.html ” trang thành hình ảnh “ ” phần tử của trang đầu tiên. Để làm như vậy, chỉ định URL của trang vào “ href ” thuộc tính của phần tử “ ” như hình bên dưới:

< diện tích hình dạng = 'trực tràng' tọa độ = '310,57,590,470' href = 'máy tính xách tay.html' >

đầu ra

Chúng tôi đã học thành công bản đồ hình ảnh là gì và cách chúng được liên kết với các nguồn khác.

Phần kết luận

HTML “ ” phần tử được sử dụng để tạo bản đồ hình ảnh hoặc hình ảnh có các vùng có thể nhấp được. Để xác định các khu vực có thể nhấp vào của hình ảnh, một hoặc nhiều “ ” các thẻ được thêm vào trong phần tử “