Bản đồ hình ảnh HTML

Ban Do Hinh Anh Html

Thông thường, bạn có thể đã truy cập các trang web nơi bạn có thể tìm thấy liên kết như sau: “ Truy cập liên kết để tìm hiểu thêm ”. Kết quả là, nếu bạn nhấp vào đây, bạn sẽ được đưa đến một trang web khác. Theo cách tương tự, chức năng ánh xạ hình ảnh của HTML cho phép chúng tôi thêm các liên kết có thể nhấp vào hình ảnh. Trang này sẽ hướng chúng tôi đến một nguồn khác khi bạn nhấp vào khu vực được chỉ định đó.

Bài đăng này sẽ dạy cho bạn:

Bản đồ hình ảnh HTML là gì?

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







cú pháp



Cú pháp để chỉ định bản đồ hình ảnh trong tài liệu HTML được đề cập dưới đây:



< hình ảnh src = 'hình ảnh/img1.jpg' mọi điều = 'máy tính xách tay' sử dụng bản đồ = '#clickspace' >

< bản đồ Tên = 'không gian nhấp chuột' >

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

< / bản đồ >

Các ' ” phần tử được xác định với các thuộc tính sau:





  • src ” chỉ định đường dẫn hình ảnh.
  • mọi điều ” hiển thị văn bản thay thế khi không thể tải hình ảnh.
  • sử dụng bản đồ ” được chỉ định để làm cho vùng hình ảnh có thể nhấp được. Để tạo một liên kết, giá trị của nó phải giống với lớp hoặc id của phần tử “”.

Các ' ” phần tử được thêm vào với các thuộc tính sau:

  • hình dạng ” chỉ định kích thước vùng của một HTML “ ' yếu tố.
  • tọa độ ” thuộc tính xác định tọa độ của khu vực có thể nhấp.
  • href ” thuộc tính đặt ra URL của nguồn.

Làm cách nào để tạo Bản đồ hình ảnh trong Tài liệu HTML?

Để tạo bản đồ hình ảnh trong tài liệu HTML, hãy xem các hướng dẫn đã cho:



  • Trong HTML, thêm một “
    ” phần tử và gán một lớp “ bản đồ hình ảnh ”.
  • Trong div này, thêm một “ ” để thêm một hình ảnh được liên kết với các thuộc tính đã thảo luận ở trên.
  • Sau đó, thêm một HTML “ ” phần tử và gán cho nó phần tử “ không gian nhấp chuột ' Tên.
  • Lưu ý rằng ' sử dụng bản đồ ” thuộc tính được gán tên “ #clickspace ” chỉ vào “ Tên ” thuộc tính của thẻ “”.
  • Bên trong nó, thêm “ ” với các thuộc tính nêu trên:
< div tầng lớp = 'hình ảnh bản đồ' >

< hình ảnh src = 'hình ảnh/img1.jpg' mọi điều = 'máy tính xách tay' sử dụng bản đồ = '#clickspace' >

< bản đồ Tên = 'không gian nhấp chuột' >

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

< / bản đồ >

< / div >

Hãy chuyển sang phần CSS để điều chỉnh kích thước của hình ảnh.

Tạo kiểu “
” trong CSS

Sử dụng “ .image-map ” lớp để truy cập vào “

” 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ử “”. Ngoài ra, các thuộc tính được liên kết với thẻ “ ” là “ hình dạng ”, “ tọa độ ', và ' href ”. Bài đăng này đã minh họa cách tạo bản đồ hình ảnh HTML bằng một ví dụ.