<div>圖片map是一種Web開發中常用的技術，它通過在圖片上定義多個可點擊區域從而實現在不同區域實現不同的交互效果。通過在<img>標簽中使用<map>和<area>標簽定義區域，再通過JavaScript來處理點擊事件。下面將通過幾個實例來詳細介紹div 圖片map的用法和實現方法。
第一個例子是一個簡單的熱點圖示例。我們將會在一張圖片上定義多個熱區，并且為每個熱區添加不同的鏈接。下面是相應的代碼：

<img src="image.jpg" usemap="#hotspots">
<map name="hotspots">
<area shape="rect" coords="0,0,100,100" >
<area shape="circle" coords="200,200,50" >
<area shape="poly" coords="300,300,400,400,350,450" >
</map>

在上面的代碼中，我們使用<img>標簽來加載圖片，然后使用<map>標簽定義一個名為"hotspots"的映射。接著，我們使用三個<area>標簽定義了三個不同形狀的熱區，并分別指定了不同的坐標和鏈接。最后，我們通過將<img>標簽的usemap屬性設置為"#hotspots"來關聯圖片和熱區。
第二個例子是一個動態熱點圖示例。在這個例子中，我們將通過JavaScript來動態地向圖片中添加更多的熱區，并在點擊時彈出相應的信息框。下面是相應的代碼：

<div id="image-container" style="position: relative;">
<img src="image.jpg" usemap="#hotspots">
<map name="hotspots">
</map>
</div>
<br>
    <script>
document.addEventListener("DOMContentLoaded", function() {
var imageContainer = document.getElementById("image-container");
var image = imageContainer.querySelector("img");
var map = imageContainer.querySelector("map");
<br>
      function addHotspot(coords, info) {
var area = document.createElement("area");
area.setAttribute("shape", "rect");
area.setAttribute("coords", coords);
area.addEventListener("click", function() {
alert(info);
});
map.appendChild(area);
}
<br>
      // 添加熱區
addHotspot("0,0,100,100", "This is hotspot 1");
addHotspot("200,200,300,300", "This is hotspot 2");
addHotspot("400,400,500,500", "This is hotspot 3");
});
</script>

在這個例子中，我們創建了一個包含圖片的<div>容器，并設置其position屬性為relative。然后，我們通過JavaScript來獲取<img>標簽和<map>標簽的引用。接下來，我們定義了一個addHotspot函數，該函數接受一個熱區的坐標和信息作為參數，并在點擊時彈出相應的信息框。最后，我們通過調用addHotspot函數動態地添加了三個熱區。
通過上述兩個例子，我們可以看到div 圖片map的強大之處。它不僅可以幫助我們在圖片上定義多個可點擊區域，實現各種交互效果，還可以通過JavaScript來動態地添加和處理熱區。在Web開發中，div 圖片map是一個非常有用的工具，可以幫助我們實現豐富多樣的交互功能。