|
使用<a>、<img>、<map>元素，實(shí)現(xiàn)點(diǎn)擊圖片上的某個(gè)區(qū)域跳轉(zhuǎn)鏈接功能： 文件目錄：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <!-- 一個(gè)超鏈接中放一張圖片，點(diǎn)擊圖片，則跳轉(zhuǎn)到太陽系簡介 10 點(diǎn)擊圖片特定區(qū)域，跳轉(zhuǎn)到相關(guān)頁面 --> 11 <a href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin"> 12 <!-- img元素，usemap要寫上map元素的name，加上# --> 13 <img usemap="#solarMap" src="./image/solar.jpg" alt="太陽系圖片"> 14 </a> 15 <map name="solarMap"> 16 <!-- shape形狀，coords坐標(biāo) --> 17 <!-- shape的值有：circle圓、rect矩形、poly多邊形 --> 18 <!-- shape="circle" coords="x,y,半徑" --> 19 <!-- shape="rect" coords="左上坐標(biāo)的x,左上坐標(biāo)的y，右下坐標(biāo)的x,右下坐標(biāo)的y" --> 20 <!-- shape="poly" coords="各個(gè)頂點(diǎn)坐標(biāo)的x和y,順時(shí)針書寫" --> 21 <area shape="circle" coords="362,203,45" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" alt="木星圖片"> 22 <area shape="rect" coords="325,280,400,325" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" alt="木星文字"> 23 <area shape="poly" coords="655,400,625,375,655,330,685,340" href="https://baike.baidu.com/item/%E5%86%A5%E7%8E%8B%E6%98%9F/137498?fr=aladdin" alt="冥王星文字"> 24 </map> 25 </body> 26 </html>
展示效果：
|
|
|
