※ 引述《one0one (台北么洞么)》之銘言:
: https://www.jqueryscript.net/demo/Simple-jQuery-Plugin-For-Highlighting-Image-Map-Maphilight/docs/demo_features.html
: 此DEMO按下星號區域後,顏色會變化。
: 是否有辦法改寫程式碼,按下星號區域後,星號區域內換成其他圖片?
首先要先了解什麼是 image map 跟 area
image map 簡單說就是一張可點擊多個不同連結的 image
area 是定義在這張圖片上的區域
<area> 必出現在 <map> 中間
回到網站上的星號
變色效果是 highlight id 為 star 的 area
所以要換掉 star 的話, remove 再另外 document.createElement("area")
看是要重新畫什麼形狀的區域(不是圖片)出來, 其實它是看不到的
要再加入 highlight 效果跟對應 className
若真的要放一張圖片的話, 外層包個 container
就計算座標把該張圖片z-index調高蓋在底圖上就可以了
這就跟原本的map area完全無關了