Bản đồ hình ảnh html
Các hướng dẫn xây dựng Web được tổ chức tốt và dễ hiểu với rất nhiều ví dụ về cách sử dụng HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML và hơn thế nữa.
Bản đồ hình ảnh HTML
Với bản đồ hình ảnh HTML, bạn có thể tạo các vùng có thể nhấp trên hình ảnh.
Bản đồ hình ảnh
<map>
Thẻ HTML xác định một bản đồ hình ảnh. Bản đồ hình ảnh là một hình ảnh có các khu vực có thể nhấp được. Các khu vực được xác định bằng một hoặc nhiều <area>
thẻ.Hãy thử bấm vào máy tính, điện thoại hoặc tách cà phê trong hình dưới đây:
Thí dụ
Đây là mã nguồn HTML cho bản đồ hình ảnh ở trên:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
Làm thế nào nó hoạt động?
Ý tưởng đằng sau một bản đồ hình ảnh là bạn có thể thực hiện các hành động khác nhau tùy thuộc vào vị trí bạn nhấp vào trong hình ảnh.Để tạo bản đồ hình ảnh, bạn cần một hình ảnh và một số mã HTML mô tả các khu vực có thể nhấp.
Bức hình
Hình ảnh được chèn bằng<img>
thẻ. Sự khác biệt duy nhất so với các hình ảnh khác là bạn phải thêm usemap
thuộc tính:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
Các
usemap
giá trị bắt đầu với một thẻ băm #
theo sau là tên của bản đồ hình ảnh, và được sử dụng để tạo ra một mối quan hệ giữa hình ảnh và bản đồ hình ảnh.
Mẹo: Bạn có thể sử dụng bất kỳ hình ảnh nào làm bản đồ hình ảnh!
Tạo bản đồ hình ảnh
Sau đó, thêm một<map>
phần tử.Phần
<map>
tử được sử dụng để tạo bản đồ hình ảnh và được liên kết với hình ảnh bằng cách sử dụng name
thuộc tính bắt buộc :
<map name="workmap">
Các
name
thuộc tính phải có giá trị tương tự như <img>
của usemap
thuộc tính.
Các lĩnh vực
Sau đó, thêm các khu vực có thể nhấp vào.Một khu vực có thể nhấp được xác định bằng cách sử dụng một
<area>
phần tử.
Hình dạng
Bạn phải xác định hình dạng của vùng có thể nhấp và bạn có thể chọn một trong các giá trị sau:rect
- xác định một vùng hình chữ nhậtcircle
- xác định một vùng hình trònpoly
- xác định một vùng đa giácdefault
- xác định toàn bộ khu vực
Hình dạng = "Toạ độ"
Các tọa độ choshape="rect"
thành từng cặp, một cho trục x và một cho trục y.Vì vậy, tọa độ
34,44
nằm cách lề trái 34 pixel và cách trên cùng 44 pixel:
Tọa độ
270,350
nằm cách lề trái 270 pixel và cách trên cùng 350 pixel:
Bây giờ chúng ta có đủ dữ liệu để tạo một vùng hình chữ nhật có thể nhấp:
Thí dụ
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Shape = "vòng tròn"
Để thêm một khu vực hình tròn, trước tiên hãy xác định tọa độ của tâm hình tròn:337,300
Sau đó chỉ định bán kính của hình tròn:
44
điểm ảnh
Bây giờ bạn có đủ dữ liệu để tạo một khu vực hình tròn có thể nhấp:
Thí dụ
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Hình dạng = "poly"
Nóshape="poly"
chứa một số điểm tọa độ, tạo ra một hình dạng được tạo thành bằng các đường thẳng (một đa giác).Điều này có thể được sử dụng để tạo ra bất kỳ hình dạng nào.
Giống như có thể là một hình dạng bánh sừng bò!
Làm thế nào chúng ta có thể làm cho chiếc bánh sừng bò trong hình ảnh dưới đây trở thành một liên kết có thể nhấp được?
Chúng ta phải tìm tọa độ x và y cho tất cả các cạnh của bánh sừng bò:
Các tọa độ theo từng cặp, một cho trục x và một cho trục y:
Thí dụ
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
Bản đồ hình ảnh và JavaScript
Một khu vực có thể nhấp cũng có thể kích hoạt một hàm JavaScript.Thêm một
click
sự kiện vào <area>
phần tử để thực thi một hàm JavaScript:
Thí dụ
Ở đây, chúng tôi sử dụng thuộc tính onclick để thực thi một hàm JavaScript khi vùng được nhấp:
<map name="workmap">
<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("Hãy thưởng thức!");
}
</script>
Tóm tắt chương
- Sử dụng
<map>
phần tử HTML để xác định bản đồ hình ảnh - Sử dụng
<area>
phần tử HTML để xác định các khu vực có thể nhấp trong bản đồ hình ảnh - Sử dụng
usemap
thuộc tính HTML của<img>
phần tử để trỏ đến bản đồ hình ảnh
Thẻ hình ảnh HTML
Tag | Description |
---|---|
<img> | Xác định một hình ảnh |
<map> | Xác định một bản đồ hình ảnh |
<area> | Xác định khu vực có thể nhấp bên trong bản đồ hình ảnh |
<picture> | Xác định vùng chứa cho nhiều tài nguyên hình ảnh |
Chủ đề Tương tự
Không có đánh giá nào.
Viết một đánh giá.
Để bình luận vui lòng Đăng nhập tài khoản ! hoặcĐăng ký mới!