Ánh xạ hình ảnh (Image Map) trong HTML

Image Map (ánh xạ hình ảnh) cho phép tạo các vùng clickable (hotspot) trên một hình ảnh, mỗi vùng dẫn đến một liên kết khác nhau. Sử dụng cặp thẻ <map> và <area> liên kết với <img> qua thuộc tính usemap.

Cú pháp

<img src="" alt="" usemap="#ten_map">
<map name="ten_map">
  <area shape="" coords="" href="" alt="">
  <area shape="" coords="" href="" alt="">
</map>

Các giá trị shape phổ biến:

• rect (hình chữ nhật): coords="x1,y1,x2,y2" (góc trên trái, góc dưới phải)
• circle (hình tròn): coords="x,y,r" (tâm x,y, bán kính r)
• poly (đa giác): coords="x1,y1,x2,y2,x3,y3..." (các đỉnh)
• default: toàn bộ hình ảnh còn lại

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; height: 100vh; background-color: #FBAB7E; background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); text-align: center; }
  img { width: 300px; height: auto; border: 2px solid #fff; border-radius: 8px; }
</style>
</head>
<body>
<h1>HTML Image Map Demo</h1>
<img src="https://www.tutorialspoint.com/html/images/html5.gif" alt="HTML5 Logo" usemap="#html5map">
<map name="html5map">
  <area shape="rect" coords="0,0,150,150" alt="HTML5 Logo trái" href="https://www.w3.org/html/">
  <area shape="circle" coords="225,75,75" alt="HTML5 Logo phải" href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5">
</map>
<p>Click vào các vùng khác nhau trên logo HTML5</p>
</body>
</html>

Kết quả

Click vào nửa trái hình ảnh → mở trang W3C HTML. Click vào vùng tròn bên phải → mở MDN HTML5 Guide.

Công cụ hữu ích: image-map.net để tạo tọa độ area dễ dàng.