1.圖片元素<img>和<map>的聯(lián)用

路人甲Java 2021-11-05

展開全文

使用<a>、<img>、<map>元素，實現(xiàn)點擊圖片上的某個區(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     <!-- 一個超鏈接中放一張圖片，點擊圖片，則跳轉(zhuǎn)到太陽系簡介
10         點擊圖片特定區(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坐標 -->
17         <!-- shape的值有：circle圓、rect矩形、poly多邊形 -->
18         <!-- shape="circle" coords="x,y,半徑" -->
19         <!-- shape="rect" coords="左上坐標的x,左上坐標的y，右下坐標的x,右下坐標的y" -->
20         <!-- shape="poly" coords="各個頂點坐標的x和y,順時針書寫" -->
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>