作者konkonchou (易而普科技)
看板Web_Design
標題Re: [問題] 網站地圖變化該區域圖片
時間Tue Aug 13 03:31:48 2019
※ 引述《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://webptt.com/m.aspx?n=bbs/Web_Design/M.1565638313.A.BE5.html
1F：推 ymcheung: 好久沒看到 image map，還以為已經 deprecated 08/13 19:30
2F：推 hubertwu: 別小看這些老古董啊! 最近接手處理net的站~裡面各種.... 08/14 11:16
3F：→ konkonchou: 十年後也是一堆網站還在用asp... 08/14 14:15
4F：→ Rplus: 特殊情境下其實挺好用的~ 因為它的不規則形狀 08/15 00:42