HTML插入图片（img元素）
img属性表及其功能描述：
| 属性名称 | 示例 | 描述 |
|---|---|---|
| src | <img src="images/icon.png" /> | 指明图片的源地址 |
| width | <img src="images/icon.png" width="120"/> | 定义图片的宽度 |
| height | <img src="images/icon.png" height="100"/> | 定义图片的高度 |
| title | <img src="images/icon.png" title="这是一张图片"/> | 对图片的文字说明 |
| alt | <img src="images/icon.png" alt="这是一张图片"/> | 用于图片不在时的备用文字说明 |
使用figure元素和figcaption元素为图片声明标题
<figure>
<img src="images/icon.png" alt="这是一张图片"/>
<figcaption>
<p>这是一张图片
</figcaption>
</figure>
创建图像映射
了解热点和图像映射
- 热点：图形上具有某种形状的一块区域或者是一个文本，也是一种超链接。当访问者单击该区域或文本时，超链接指向的文本会显示在浏览器中。热点的形状可以是长方形、圆形或多边形。
- 服务端图像映射：在图像上单击鼠标后，光标的相对位置坐标将被发送到服务器，然后服务器会通过一个专用程序来确定要执行的下一步。
- 客户端图像映射：鼠标移到图片上时，指针可以指示读者是否可以点击此区域。图片映射存储在图片的下一层，含有引用区域的相关信息。
创建图像映射（map元素、area元素）
img元素使用usemap属性与map元素的name属性建立关联关系，map元素包含了area元素，每个元素定义一个热点，从而使每个热点都指向图像的某个部位。
定义如下：
<img src="images/icon.png" usemap="#mymap" width="100" height="100" alt="这是一张图片"/>
<map name="mymap">
<area shape="circle" coords="10,20,30" href="xx.html">
<area shape="rect"coords="35,35,25,25" href="xx2.html">
<area shape="poly" coords="12,73,45,57,79" href="xx3.html">
</map>
shape属性的属性值及其功能描述
| shape属性值 | 功能描述 |
|---|---|
| default | 表示将定义整个区域为热点 |
| rect | 表示将定义一个矩形区域为热点 |
| circle | 表示将定义一个圆形区域为热点 |
| poly | 表示将定义一个多边形区域为热点 |
coords属性的属性值及其功能
| shape属性值 | coords属性值 | 功能描述 |
|---|---|---|
| rect | left-x,top-y,right-x,bottom-y | 热点左上角和右下角的坐标 |
| circle | center-x,center-y,radius | 热点圆心坐标和半径 |
| poly | x1,y1,x2,y2,x3,y3...,xN,yN | 多边形的多个坐标 |
创建服务端图像映射
-
使用img元素创建服务端图像映射
使用img元素创建服务端图像映射，img元素必须位于a元素内容内，并且必须设置img元素的ismap属性。ismap意为is map，表示将图像指定为图像映射。坐标数据发送的方法是在a元素的href属性定义的URI地址后加一个问号（？），问号后面是坐标数据，横坐标和纵坐标用逗号隔开，示例如下：
<a href="xxx.html?123,31">
<img src="images/icon.png" ismap width="100" height="100" alt="这是一张图片"/>
</a>
-
使用input元素创建服务端图像映射
使用input元素创建服务端图像映射，input元素的type属性必须为image。然后src属性定义图片文件位置，实际是一个表单提交按钮。坐标数据发送的方法是在form元素的action属性定义的URI地址后加一个问号（？），问号后面是坐标数据，横坐标和纵坐标用and号(&)隔开,示例如下：
<form name="myform" method="GET" action="xxx.action?mymap.x=123&mymap.y=31">
<input type="image" name="mymap" src="images/icon.png">
</form>
-
客户端图像映射和服务端图像映射混合
定义如下：
<a href="xxx.html?123,31">
<img src="images/icon.png" ismap width="100" height="100" usemap="#mymap" alt="这是一张图片"/>
<map name="mymap">
<area shape="circle" coords="10,20,30" href="xx.html">
<area shape="rect"coords="35,35,25,25" href="xx2.html">
<area shape="poly" coords="12,73,45,57,79" href="xx3.html">
</map>
</a>
