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

转载于 2018-05-23 09:42:23 发布 · 5.1k 阅读

文章标签：

#前端 #h5 #css

前端专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了HTML中img标签的使用方法及其属性，包括src、width、height等，并讲解了如何使用map和area标签为图片的不同区域添加链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>