html 图片热区域map area的用法

时间 2019-11-21 标签 html 图片区域 map area 用法

简单小例子javascript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片热区</title>
		<style type="text/css">
			.img-area{
				width:300px;
				height:200px;
				margin: 0 auto;
				background: #ccc;
			}
			img{
				width:100%;
				height:100%;
			}
		</style>
	</head>
	<body>
		<div class="img-area">
			<img src="../img/head.png" alt="图片热区" usemap="#areaImg"/>
			<map name="areaImg">
				<area shape="rect" coords="56,69,78,139" href="http://www.baidu.com" target="_blank" alt="打开新页面"/>
			</map>
		</div>
		<script type="text/javascript" src="../vendor/jquery-1.11.3.min.js" ></script>
	</body>
</html>