好玩的图片映射

最新推荐文章于 2022-09-07 11:43:15 发布

我是祖国的小花朵讷

最新推荐文章于 2022-09-07 11:43:15 发布

阅读量195

点赞数

分类专栏： HTML 文章标签：图片映射 HTML

本文链接：https://blog.csdn.net/Carina_nana/article/details/100063052

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

好玩的图片映射效果是怎么实现的？

先上代码部分吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片映射</title>
	</head>
	<body>
		<h1>图片映射</h1>
		<hr /><br />
		<img src="img/1.jpg" usemap="#tupian"/>
		<map name="tupian">
			<area shape="circle" coords="180,139,14" href="http://www.baidu.com" alt="" title="hello world!" />
			<area shape="circle" coords="129,161,10" href="http://www.taobao.com" alt="" title="hello world!" />
  			<area shape="rect" coords="0,0,110,260" href="http://www.baidu.com" alt="" title="hello world!" />
		</map>
	</body>
</html>

解释代码：

圆形：shape=“circle”，coords=“x,y,z”
这里的 x 和 y 定义了圆心的位置（“0,0” 是图像左上角的坐标），r 是以像素为单位的圆形半径。
多边形：shape=“polygon”，coords=“x1,y1,x2,y2,x3,y3,…”
每一对 “x,y” 坐标都定义了多边形的一个顶点（“0,0” 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
多边形会自动封闭，所以在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形：shape=“rectangle”，coords=“x1,y1,x2,y2”
第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，“0,0” 是图像左上角的坐标。PS：定义矩形是定义带有四个顶点的多边形的一种简化方法。
一起来看看结果吧！

图片映射还可以运用到很多好玩的地方，虽然在实际生活当中很少会使用area标签，但是我们还是不能忘记它的作用。相信总有一天总会有用武之地的。