HTML补充功能之map------用来给图片划分不同的区域,不同的区域可以设置不同的响应事件

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41901915/article/details/84727353

 当我们想把一张图片划分为不同的区域,不同区域有不同的响应事件该怎么办呢?

就是利用usemap属性,构建一个map标签,具体的使用和格式写在了代码了注释中。

代码: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>逆水行舟不进则退</title>
</head>
<body>
<img src="1.jpg" style="width: 600px;height: 600px" usemap="#woman">
<!--先设置一个usemap属性,然后下面的map利用这个名字加以连接-->
<map name="woman">
  <area shape="circle" coords="20,20,20" title="第一块">
  <!--设置一个圆形的坐标相对于图片为(20,20),半径为圆的区域-->
  <!--我可以为这个区域设置一个点击事件,以完成点击图片不同位置的响应-->
  <area shape="rect" coords="100,100,200,200" title="第二块">
  <!--设置一个左上角坐标为(100,100),右下角坐标为(200,200)用来定位矩形的位置-->
  <!--同样的我也可以在此设置一个响应事件-->
</map>
</body>
</html>

你可以直接修改里面的1.jpg在你的电脑上进行实验

 

展开阅读全文

没有更多推荐了,返回首页