HTML插入图片和创建热点区域

HTML插入图片（img元素）

img属性表及其功能描述：

属性名称	示例	描述
src		指明图片的源地址
width		定义图片的宽度
height		定义图片的高度
title		对图片的文字说明
alt		用于图片不在时的备用文字说明

使用figure元素和figcaption元素为图片声明标题

  
  

     
这是一张图片
  

创建图像映射

了解热点和图像映射

• 热点：图形上具有某种形状的一块区域或者是一个文本，也是一种超链接。当访问者单击该区域或文本时，超链接指向的文本会显示在浏览器中。热点的形状可以是长方形、圆形或多边形。
• 服务端图像映射：在图像上单击鼠标后，光标的相对位置坐标将被发送到服务器，然后服务器会通过一个专用程序来确定要执行的下一步。
• 客户端图像映射：鼠标移到图片上时，指针可以指示读者是否可以点击此区域。图片映射存储在图片的下一层，含有引用区域的相关信息。

创建图像映射（map元素、area元素）

img元素使用usemap属性与map元素的name属性建立关联关系，map元素包含了area元素，每个元素定义一个热点，从而使每个热点都指向图像的某个部位。
定义如下：

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地址后加一个问号（？），问号后面是坐标数据，横坐标和纵坐标用逗号隔开，示例如下：

• 使用input元素创建服务端图像映射
  使用input元素创建服务端图像映射，input元素的type属性必须为image。然后src属性定义图片文件位置，实际是一个表单提交按钮。坐标数据发送的方法是在form元素的action属性定义的URI地址后加一个问号（？），问号后面是坐标数据，横坐标和纵坐标用and号(&)隔开,示例如下：

• 客户端图像映射和服务端图像映射混合
  定义如下：