使用<a>、<img>、<map>元素，实现点击图片上的某个区域跳转链接功能：
文件目录：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta chart="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>document</title> 7 </head> 8 <body> 9 <!-- 一个超链接中放一张图片，点击图片，则跳转到山东财经大学分数线太阳系简介10 点击图片特定区域，跳转到相关页面 -->11 <a href="/d/file/titlepic/173281 <!-- img元素，umap要写上map元素的name，加上# -->13 <img umap="#solarmap" src="./image/solar.jpg" alt="太阳系图片">14 </a>15 <map name=一叶知秋什么意思"solarmap">16 <!-- shape形状，c盘龙菜oords坐标 -->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 &l云南高考频道t;area shape="circle" coords="362,203,45" href="/d/file/titlepic/222105" alt="木星图片"> 22 <area shape="rect" coords="325,280,400,325" href="/d/file/titlepic/222105" alt="木星文字">23 <area shape="poly" coords="655,400,625,375,655,330,685,340" href="/d/file/titlepic/137498" alt="冥王星文字">24 </map>25 </body>26 </html>
展示效果：
本文发布于:2023-04-03 17:32:10，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/4263b731945a508a9ab7bf7fc62479a6.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：1.图片元素和的联用.doc
本文 PDF 下载地址：1.图片元素和的联用.pdf
| 留言与评论（共有 0 条评论） |
