導(dǎo)航欄
一：點(diǎn)擊圖片然后進(jìn)行映射進(jìn)行你想要的操作
二：如何知道你點(diǎn)擊位置圖片的XY坐標(biāo)拙徽？
一：點(diǎn)擊圖片然后進(jìn)行映射進(jìn)行你想要的操作
比如現(xiàn)在UI同事給了你一張圖【如下】刨沦，讓你在點(diǎn)擊這個(gè)圖的每一個(gè)行星的時(shí)候進(jìn)行頁(yè)面跳轉(zhuǎn)。
那么首先我們先引入這個(gè)圖片：
<img src="planets.png" alt="Planets" usemap="#planetmap">
1
請(qǐng)注意一個(gè)特殊的屬性：usemap膘怕。翻譯成中文就是使用地圖想诅。其實(shí)map在html當(dāng)中也是一個(gè)標(biāo)簽。我們想要在點(diǎn)擊圖片的某個(gè)區(qū)域進(jìn)行跳轉(zhuǎn)或者其他操作的時(shí)候就會(huì)關(guān)聯(lián)到這個(gè)上面【你用js去計(jì)算不閑麻煩的話(huà)也可以】岛心。
接下來(lái)我們來(lái)看這個(gè)map標(biāo)簽是怎么被img標(biāo)簽usemap關(guān)聯(lián)上的来破。
<map name="planetmap">
? <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
? <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
? <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
1
2
3
4
5
根據(jù)上面代碼我們就可以很清楚的知道了是通過(guò)map標(biāo)簽的name屬性與img標(biāo)簽的usemap保持一致而后關(guān)聯(lián)上的【注意：img標(biāo)簽前面要加#號(hào)】
然后我們現(xiàn)在在學(xué)習(xí)一下這些英文單詞，這樣能對(duì)我們對(duì)這個(gè)map標(biāo)簽和area標(biāo)簽使用的更加順手：
area：區(qū)域的意思
shape：形狀的意思
coords：坐標(biāo)的意思
那么我們根據(jù)它的這個(gè)就可以猜出：
1.首先img需要與map關(guān)聯(lián)起來(lái)
2.map里的子標(biāo)簽area是用來(lái)說(shuō)明點(diǎn)擊范圍然后要做什么事情的
3.shape是需要你說(shuō)明你要點(diǎn)擊的范圍是什么形狀【可選參數(shù)：rect(矩形)鹉梨、circle(圓形)讳癌、poly(多邊形)】
4.coords是需要你說(shuō)明你要點(diǎn)擊的形狀他的坐標(biāo)、半徑參數(shù)存皂。不同的形狀coords傳入的參數(shù)意義不同。具體如下：
1逢艘、矩形：(左上角頂點(diǎn)坐標(biāo)為(x1,y1)旦袋，右下角頂點(diǎn)坐標(biāo)為(x2,y2))
<area shape=“rect” coords=“x1,y1,x2,y2” href=url>
2、圓形：(圓心坐標(biāo)為(X1,y1)它改，半徑為r)
<area shape=“circle” coords=“x1,y1,r” href=url>
3疤孕、多邊形：(各頂點(diǎn)坐標(biāo)依次為(x1,y1)、(x2,y2)央拖、(x3,y3) …)
<area shape=“poly” coords=“x1,y1,x2,y2 …” href=url>
當(dāng)然現(xiàn)在很少有用這個(gè)進(jìn)行跳轉(zhuǎn)的了祭阀，大部分的需求都是點(diǎn)擊某個(gè)區(qū)域進(jìn)行xxx事情鹉戚。所以，我們給他一個(gè)href屬性：“javascript:;”专控，然后在給這個(gè)area加個(gè)點(diǎn)擊事件即可~如下所示：
建議朋友們自己搞一個(gè)圖片做個(gè)小demo玩一玩抹凳。就熟悉了。
<img src="./20200226201320876.png" width="145" height="126" alt="" usemap="#map">
<map name="map">
? ? <area shape="rect" coords="0,0,82,126" href="javascript:;" alt="hah" onclick="areaClick()">
</map>
<script>
? ? function areaClick(){
? ? ? ? alert('哇哦!!!')
? ? }
</script>
1
2
3
4
5
6
7
8
9
二：如何知道你點(diǎn)擊位置圖片的XY坐標(biāo)伦腐？
思路很簡(jiǎn)單：
在你的img標(biāo)簽里面加一個(gè)ismap=“ismap”
在img的外面加一個(gè)a標(biāo)簽包起來(lái)
具體代碼如下：
<a href="#">
<img src="./xxx.png" alt="" ismap="ismap" />
</a>
1
2
3
最后結(jié)果：
需要注意的點(diǎn)：
如果你的img使用了usemap屬性赢底，那么你就不能使用ismap屬性去查看你點(diǎn)擊的坐標(biāo)了。所以建議大家先使用ismap屬性了解到了你要點(diǎn)擊的x柏蘑，y坐標(biāo)之后再使用usemap屬性實(shí)現(xiàn)你的功能幸冻。
————————————————
版權(quán)聲明：本文為CSDN博主「吳迪軟件開(kāi)發(fā)」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議咳焚，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明洽损。
原文鏈接：https://blog.csdn.net/weixin_43606158/article/details/104523863
