使用usemap 屬性將圖像與圖像映射關(guān)聯(lián)；2. 定義name 屬性與usemap 匹配的map 元素；3. 在map 內(nèi)使用area 標籤創(chuàng)建矩形、圓形或多邊形可點擊區(qū)域，並設置shape、coords、href 和alt 屬性；4. 坐標基於圖像左上角的像素位置，建議使用工具獲取並測試區(qū)域；5. 為每個area 添加alt 和title 屬性以提升可訪問性和用戶體驗；客戶端圖像映射無需JavaScript 或服務器處理，現(xiàn)代瀏覽器均支持，維護簡單且性能高效。

Creating a client-side image map in HTML allows you to define clickable areas on an image that link to different URLs. This is done entirely in the HTML using the <map></map> and <area> elements together with the usemap attribute on an <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175417884435291.jpeg" class="lazy" alt="如何在HTML中創(chuàng)建客戶端圖像映射" > . Here's how to do it step by step.

1. Use the <img src="/static/imghw/default1.png" data-src="floor-plan.png" class="lazy" alt="如何在HTML中創(chuàng)建客戶端圖像映射" > tag with the usemap attribute

Start by adding an image to your page and include the usemap attribute. The value should start with a # followed by the name of the map you'll define later.

 <img src="/static/imghw/default1.png"  data-src="floor-plan.png"  class="lazy" alt="Office Floor Plan" usemap="#officemap">

This tells the browser that this image is associated with a client-side image map named "officemap".

2. Define the <map> element

Below or near the image, define the <map> element with a name attribute that matches the value (without the # ) used in usemap .

 <map name="officemap">
  <!-- clickable areas go here -->
</map>

The name must exactly match the one referenced in usemap .

3. Add clickable areas with the <area> tag

Inside the <map> element, use one or more <area> tags to define clickable regions. Each area can be a rectangle, circle, or polygon.

Common shape types:

• rect (rectangle): defined by x1,y1,x2,y2
• circle : defined by center-x,center-y,radius
• poly (polygon): defined by a series of x,y coordinate pairs

Each <area> should include:

• shape : the type of shape
• coords : comma-separated coordinates
• href : the link destination
• alt : descriptive text (important for accessibility)

Example: Multiple clickable zones

 <map name="officemap">
  <!-- Reception desk (rectangle) -->
  <area shape="rect" coords="50,100,200,150" href="reception.html" alt="Go to Reception">

  <!-- Manager&#39;s office (circle) -->
  <area shape="circle" coords="300,200,50" href="manager.html" alt="Manager&#39;s Office">

  <!-- Conference room (polygon) -->
  <area shape="poly" coords="400,100,500,100,500,200,400,200" href="meeting.html" alt="Conference Room">
</map>

4. Coordinate tips

• Coordinates are based on pixel positions from the top-left corner of the image (0,0).
• You can use image editing software or online tools to find the coordinates of areas.
• Test your areas in the browser — make sure links work and don't overlap unintentionally.

5. Accessibility and usability

• Always include alt text for each <area> so screen readers can interpret the links.
• Consider adding title attributes for tooltips on hover:

   <area shape="rect" coords="50,100,200,150" href="reception.html" alt="Reception Desk" title="Reception">

  Final Notes

  Client-side image maps are supported in all modern browsers and are the preferred method over server-side maps because they're faster, don't require server processing, and are easier to maintain.

  Basically, just:

  • Use usemap="#mapname" on the <img alt="如何在HTML中創(chuàng)建客戶端圖像映射" >
  • Define a <map name="mapname"></map>
  • Add <area> tags with shapes, coordinates, links, and alt text

  That's it — no JavaScript or external files needed.

  以上是如何在HTML中創(chuàng)建客戶端圖像映射的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！