6. "地图"标签
简介: 这个和上1章的图象标签1样, 都属于简单 容易理解的, 所谓的地图标签就是在本来的图象上 添加了地图上坐标的概念, 使得图象上不同的坐标位置点击时可以有不同的跳转页面
跟上1章1样, 直接上码了
<!DOCTYPE html>
<html>
<head>
<title>地图标签</title>
<meta charset="utf⑻">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF⑻">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<a href="Main.html">返回主页</a><br>
<img src="Image/beacon.jpg" usemap="#mymap" border=5/>
<map name="mymap">
<!-- 图象的该坐标处指向的是打开百度, 由于该方法较先履行, 如有堆叠的区域,点击则会进入百度界面 -->
<area shape="rect" coords="0,0,100,200" href="http://www.baidu.com" target="_blank">
<!-- 图象的该坐标处指向了打开CSDN -->
<area shape="circle" coords="0,0,200,400" href="http://www.csdn.net" target="_blank">
</map>
</body>
</html>
运行结果:
点击下图蓝线内的任意位置, 打开百度网页
点击下图蓝线内的区域进入CSDN页面