点击图片中的某个部分来跳转页面

  1. img
    1.1 导入一张图片
    1.2 属性
    src 图片地址
    width 设置图片宽
    height 设置图片高
    border 设置图片边框
    alt 定义图片描述信息
    title 定义图片描述信息
    usemap map标签的name #name
    1. map
      2.1 给图片划分区域 配合area
      2.2 属性
      name 给map指定一个name
    2. area
      2.1 在map的配合下给图片划分指定形状的区域
      2.2 属性
      shape 划分的形状: :圆形circle
      矩形:rectangle 多边形:polygon
      coords 形状的坐标·
      href 要链接的地址
      target 新网页打开方式

例如:

<style>
img{
position:fixed;
right:10px;
bottom:20px;
}
</style>
<img src="../images/logo.png" alt="图片" usemap="#tu">
<p id='one' style='height:300px;background:red'></p>

<map name="tu">
<area shape="rect" coords="4,9, 128,45" href="#one" alt="红色">

</map>

猜你喜欢

转载自blog.csdn.net/fu415037685/article/details/80415123