HTML <img>标签创建图像映射

前端独秀

于 2019-09-06 15:45:46 发布

阅读量364

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： Html/Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=hb0b2ibcb&title=HTML+%3Cimg%3E%E6%A0%87%E7%AD%BE+%E5%88%9B%E5%BB%BA%E5%9B%BE%E5%83%8F%E6%98%A0%E5%B0%84

前端专栏收录该内容

493 篇文章

订阅专栏

本文详细解析了HTML中使用<map>元素创建图像映射的代码，包括不同形状（矩形、圆形、多边形）的定义方法及其坐标设置，适合初级前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初级前端一枚  下面代码是在图片上创建图像映射  自己整理了下 做个笔记 希望也可以帮助后来学习的朋友！

<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="poly" coords="23,58,8,59,40,70" alt="Venus" href="venus.htm">
</map>

该段代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）。

shape
1、rect　　　　矩形 
2、circle　　 圆形　　　　　　
3、poly　　　 多边形

coords

1、距形：左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2)
2、圆形：(圆心坐标为(X1,y1)，半径为r)
3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)

HTML <img>标签 创建图像映射

HTML <img>标签创建图像映射