Để tạo các vùng nhấp chuột trên hình ảnh, bạn cần tạo một image map (bản đồ hình ảnh) với các vùng có thể nhấp. Ví dụ: khi nhấp vào hình vuông, trang web A mở ra; khi nhấp vào hình tam giác trên cùng một hình ảnh, trang web B mở ra.
Thẻ <area> định nghĩa một vùng bên trong hình ảnh và được lồng bên trong thẻ <map>. Dưới đây là các thuộc tính chính:
| STT | Thuộc tính & Mô tả |
|---|---|
| 1 | alt Văn bản thay thế cho vùng |
| 2 | coords Tọa độ của vùng |
| 3 | download Mục tiêu sẽ được tải xuống khi nhấp vào liên kết |
| 4 | shape Hình dạng của vùng (rect, circle, poly) |
| 5 | target Nơi URL sẽ mở (_blank, _self, v.v.) |
Ví dụ
Chạy mã sau để tạo vùng nhấp chuột trên hình ảnh trong HTML:
<!DOCTYPE html> <html> <head> <title>HTML area Tag</title> </head> <body> <img src="/images/usemap.gif" alt="usemap" usemap="#lessons"/> <map name="lessons"> <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="/perl/index.htm" alt="Perl Tutorial" target="_blank" /> <area shape="rect" coords="22,83,126,125" alt="HTML Tutorial" href="/html/index.htm" target="_blank" /> <area shape="circle" coords="73,168,32" alt="PHP Tutorial" href="/php/index.htm" target="_blank" /> </map> </body> </html>
Kết quả
