CSS中存在一個非常有用的功能，可以在圖片上添加熱點（hotspots）來實現交互。通過在圖片上定義鼠標交互事件，可以創造出令人驚嘆的效果。本文將介紹如何使用CSS在圖片上添加熱點。

先看一個例子。我們將在一張圖片上添加三個熱點，每個熱點都鏈接到不同的網站。

<div class="container">
<img src="example.jpg" alt="example" usemap="#example">
<map name="example">
<area shape="circle" coords="50,50,30" >
<area shape="poly" coords="100,100,150,50,200,100" >
<area shape="rect" coords="250,50,350,150" >
</map>
</div>

上面的代碼通過HTML的<map>標簽定義了一個名為“example”的熱點區域，然后在<img>標簽中使用了它。熱點區域定義了三個不同形狀的區域（圓形，多邊形，矩形），每個區域都有不同的坐標和鏈接。這些區域是使用<area>標簽定義的。

為了讓熱點生效，必須使用CSS設置相應的鼠標事件。下面是CSS代碼：

.container area {
cursor: pointer;
}
.container area:hover {
opacity: 0.5;
}

第一行代碼設置所有熱點區域的光標為“指針”，這樣鼠標滑過時就是可點擊的。第二行代碼設置當鼠標指向熱點區域時，容器的透明度為50%（這里的.container是上面代碼中包含<img>和<map>標簽的容器）。

現在你已經掌握了如何在CSS中添加圖片熱點。使用這種方法，你可以創建出許多很酷的效果，如懸停提示、圖像地圖、彈出框等等。在實踐中嘗試使用，你可能會發現一些更加有趣的方法。