img usemap attribute

usemap是<img>标签的一个属性,用作指明所使用的图像地图名。

后面的#Map的Map就是用<map>标签定义的一个图像地图,它的name属性是Map,像下面这样定义:

<map name="Map">

<area shape=rect coods="100,100,200,200" href="test1.html">

<area shape=rect coods="200,100,300,200" href="test2.html">

...

</map>

使用时:

<img src="test.gif" usemap="#Map">

图像地图把一幅图像分成若干个区域,点击不同的区域会进入不同的页面。

为了创建客户端图像映像,需要增加新属性USEMAP如下:

〈IMG SRC="map_name.gif" USEMAP="#section_name">

属性USEMAP(使用图像)接受段块式的超级链接,因此可以在同一HTML文件中存储映像定义信息。

你 见过“联想”机器上联想公司赠送的“我的办公室”软件的界面吗?在那幅办公室的图片上用鼠标点一下办公桌上的键盘,就启动一个 “五笔字型”打字练习软件,点一下办公桌上的记事本就打开一个记事本软件,如此等等,即形象又方便。这种效果的实质是把一幅图片划分为不同的作用区域,再 让不同的区域链接到做不同事情的软件上去,在HTML中也有一个具有把图片划分成多个作用区域,并链接到不同网页的标记,那就是 <area>地图作用区域标记。

  <area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。其基本语法结构如下:

<area

class=type

id=Value

href=url

alt=text

shape=area-shape

coods=value>

  其中。class和id:是分别指定热点的类型和id号。

alt:用于设定热点的替代性文字。

href:用于设定该热点所链接的url地址。

shape和coords:是两个主要的参数,用于设定热点的形状和大小。其基本用法如下:

<area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形,左上角顶点坐标为(X1,y1),右下角顶点坐标为(X2,y2)。

<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形,圆心坐标为(X1,y1),半径为r。

<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形,各顶点坐标依次为(X1,y1)、(X2,y2)、(x3,y3) ......。

   <area>标记是在图像地图中划分作用区域的,因此其划分的作用区域必须在图像地图的区域内,所以在用 <area> 标记划分区域前必须用HTML的另一个标记<map>来设定图像地图的作用区域,并为指定的图像地图设定名称,该标记的用法很简单,即 <map name="图像地图名称"> ...... </map>。
### `<img>` 标签的完整语法和属性详解 在 HTML 中,`<img>` 标签用于在网页中嵌入图像,它是一个自闭合标签,不需要结束标签。基本语法如下: ```html <img src="图片路径" alt="替代文本" /> ``` 除了 `src` 和 `alt` 这两个最基本且必须的属性外,`<img>` 标签还支持多个可选属性,用于控制图像的显示、行为和优化。 --- #### 常见属性详解 1. **`src`** 指定图像的路径,可以是相对路径、绝对路径或 URL。这是 `<img>` 标签中最重要的属性,用于告诉浏览器从哪里加载图像[^1]。 示例: ```html <img src="images/logo.png" /> ``` 2. **`alt`** 提供图像的替代文本,当图像无法加载时显示该文本。该属性对无障碍访问和 SEO 都非常重要。 示例: ```html <img src="photo.jpg" alt="公司标志" /> ``` 3. **`title`** 设置鼠标悬停时显示的提示文本。虽然不是必须属性,但在某些场景下可增强用户体验。 示例: ```html <img src="icon.png" alt="设置图标" title="点击进入设置页面" /> ``` 4. **`width` 与 `height`** 分别设置图像的宽度和高度(单位为像素或百分比)。合理设置这两个属性有助于浏览器在图像加载前预留空间,避免页面重排[^2]。 示例: ```html <img src="banner.jpg" width="800" height="600" /> ``` 5. **`loading`** 控制图像的加载方式,支持 `lazy`、`eager` 和 `auto`。使用 `loading="lazy"` 可实现图像的惰性加载,提升页面性能[^3]。 示例: ```html <img src="large-image.jpg" alt="大图" loading="lazy" /> ``` 6. **`srcset` 与 `sizes`** 用于响应式图像加载。`srcset` 提供多个图像源,`sizes` 指定不同视口下的图像尺寸,浏览器会根据设备特性自动选择最合适的图像[^3]。 示例: ```html <img src="image.jpg" srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" alt="响应式图片" /> ``` 7. **`crossorigin`** 用于设置图像请求的 CORS(跨域资源共享)模式。当图像用于 Canvas 绘图或 WebGL 时,必须设置此属性以避免安全限制[^3]。 示例: ```html <img src="https://example.com/image.png" crossorigin="anonymous" /> ``` 8. **`usemap` 与 `ismap`** 用于定义图像映射(image map),即在图像上设置多个可点击区域。`usemap` 指定 `<map>` 元素的 ID,`ismap` 表示图像为服务器端图像映射[^2]。 示例: ```html <img src="map.png" usemap="#image-map" /> <map name="image-map"> <area shape="rect" coords="0,0,100,100" href="link1.html" /> <area shape="circle" coords="150,150,50" href="link2.html" /> </map> ``` 9. **`decoding`** 告诉浏览器如何解码图像,可选值包括 `async`、`sync` 和 `auto`,有助于优化图像渲染性能[^3]。 示例: ```html <img src="photo.jpg" decoding="async" /> ``` 10. **`referrerpolicy`** 控制图像请求时发送的 `Referer` HTTP 头信息,用于隐私保护和安全控制。常用值包括 `no-referrer`、`origin`、`strict-origin-when-cross-origin` 等[^3]。 示例: ```html <img src="secure-image.png" referrerpolicy="no-referrer" /> ``` --- ### 图像标签的高级用法 - **内联 Base64 图像**:可以将小图片直接以 Base64 编码嵌入到 `src` 属性中,减少 HTTP 请求。 示例: ```html <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Base64 图片" /> ``` - **SVG 图像嵌入**:支持直接使用 SVG 格式的图像,适用于矢量图形和高分辨率显示。 示例: ```html <img src="icon.svg" alt="SVG 图标" /> ``` - **图像延迟加载与占位图**:结合 `loading="lazy"` 和 `src`、`data-src` 属性,可以实现更复杂的延迟加载策略。 示例: ```html <img src="placeholder.jpg" data-src="real-image.jpg" alt="延迟加载图片" loading="lazy" /> ``` --- ### 总结 `<img>` 标签不仅支持基本的图像显示功能,还具备响应式加载、性能优化、跨域控制、图像映射等高级特性。合理使用这些属性可以显著提升网页的加载速度、用户体验和可访问性。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值