國立高雄餐旅大學

image map的jquery寫法

2020年7月17日 16:41
前情提要
這是我之前發的文, 但最近幾天回頭看才發現已有好心人提供了寫法, 我也在原文回覆了, 在此先感謝那幾位的幫忙(鞠躬) 這幾天我找到了用jquery 的maphilight 的demo範例, 雖然我還是看不懂jquery的寫法, 但還是努力的把我要放的圖文換進去替代成功, 但又出現個問題, 因為我發現他在jquery的mouseon 事件, 僅單一指定那個headlink要出現效果, 但我可能需要弄出20個headlink(也就是20個名稱), 我沒學過Java和Jquery , 目前也是找資料找有沒有可以縮短程式碼的寫法, 但由於不熟悉J語言, 找資料有如大海撈針, 希望版上的專家們可以提供些方向讓我找資料(例如關鍵字), 或建議可以怎麼寫(厚顏無恥的討code) (我把參考demp範例的改寫的碼放在 codePen {
}上, 參考的demo網址也放在上面) 我還會有一個效果要呈現的是, 點選到 area A 或是 title A, 除了mouseon有對應的色塊呈現以外, 各自都可以透過mouseclick , 連結到對應的資訊內容(會以lightbox燈箱呈現), 在還沒找到上面提及的demo範例時, 我是用mouseon事件觸發圖片置換的方式, 然後只有title才可以連結, 但找到的這個demo 卻有在position那邊分層出來, 跟之前用的lightbox 的posution 有了衝突, 這部分目前苦惱中, 但還是沒寫出來的我大概就放棄area也能hyperlink這樣(覺得頭髮掉好多啊)
4
回應 5
文章資訊
Logo
每月有 14 則貼文
共 5 則留言
國立臺中教育大學
其實好像只要呼叫maphilight就全都有效果了(在同一張圖內),所以也不用寫一堆mouse over 點擊連結到相應的內容,我有試做...可以參考
國立政治大學
又是我 一個月看一次 Dcard 就剛好看到你回文,下面從上次的做延伸
還是不確定你要的效果 然後是 JavaScript 不是 Java,罰你罰寫一百遍(X 從你的 Code 做延伸的話,因為會是連結對應到區塊,可以善用 data attribute 的功能(上例也是這樣做)
在 jQuery 裡面是 $(element).data('target') 對 <a href="#" data-target="area-a">,取到的值會是 area-a 透過這樣,在每個 area 上 id(或 class),你就可以利用 $('a').each((idx, link) => { const targetArea = $(link).data('target') $(link).on('mouseenter', () => $('#' + targetArea).mouseover()) $(link).on('mouseleave', () => $('#' + targetArea).mouseout()) }) 達到了 點選的部分可以觀察一下 on('click') 的部份,我看不懂你想做的事情
高雄醫學大學 醫學系
jquery 是古董了 厲害的都去用 React 了
原 PO - 國立高雄餐旅大學
B3 恩...光Js 和Jquery就夠讓我頭大了XD 但google了react, 好像真的可以很直觀的寫出來 但好像要再搭配其他例如Babel 好像要學得更多了 暫時休兵!
通報 📢 好像有人對這篇文章有新想法唷,快來去看看!