在HTML中,我们经常会在某张图片上点击某一个部位进行跳转,然后我们怎么解决呢?
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片映射</title>
<link rel="stylesheet" href="../CSS/home01.css">
</head>
<body>
<img src="../image/mycode.jpg" alt="" usemap="#mycode">
<map name="mycode">
<!-- 圆形 coords="中心坐标,半径"-->
<area shape="circle" coords="170,300,30" href="http://www.baidu.com" target="_blank" alt="百度">
<!-- 矩形 coords="左上角坐标,右下角坐标"-->
<area shape="rect" coords="270,275,325,330" href="http://www.se.sjtu.edu.cn" target="_blank" alt="交通大学">
</map>
</body>
</html>
CSS代码
body{
margin: 0px;
}
img{
width: 500px;
height: 500px;
}
效果图: