推 ymcheung: 好久沒看到 image map，還以為已經 deprecated 08/13 19:30
推 hubertwu: 別小看這些老古董啊! 最近接手處理net的站~裡面各種.... 08/14 11:16
→ konkonchou: 十年後也是一堆網站還在用asp... 08/14 14:15
→ Rplus: 特殊情境下其實挺好用的~ 因為它的不規則形狀 08/15 00:42
※ 引述《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完全無關了
--
https://www.erptech.com.tw
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.160.4.148 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1565638313.A.BE5.html