图像映射可以将图像划分为不同的区域，每个区域可以进行不同的操作。比如一个建筑场景地图，当点击客厅位置，可以弹出客厅的详细设计或图片，点击厨房则是厨房的设计。
根据识别点击热点位置的不同，图像映射可以分为两类：服务器端图像映射和客户端图像映射。
（一）服务器端图像映射：
当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端。特殊的服务器端程序（在本例中是../index.php 程序）可以根据这些坐标来做出响应。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta charset="utf-8" />
<base href="/testsmarty/templates/"></base>
<title>图像映射</title>
</head>
<body>
<table width="800" border="2">
<tr>
<td align="center">
<a href="../index.php"><img src="picture/test1.jpg" width="200" height="350" alt="map_test" ismap="ismap" /></a>
</td>
<td align="center">
<a href="../index.php"><img src="picture/test2.jpg" width="200" height="350" alt="map_test" ismap="ismap" /></a>
</td>
</tr>
</table>
</body>
</html>
（二）客户端图像映射
使用<img>的usemap特性和<map>和<area>元素实现客户端图像映射。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta charset="utf-8" />
<base href="/testsmarty/templates/"></base>
<title>图像映射</title>
</head>
<body>
<table width="800" border="2">
<tr>
<td align="center">
<img src="picture/test1.jpg" width="200" height="350" alt="map_test" usemap="#first" />
<map name="first" id="first">
<area shape="circle" coords="50,50,50" href="http://www.baidu.com" target="_blank"></area>
<area shape="rect" coords="100,0,200,100" href="http://www.google.com.hk" target="_blank"></area>
</map>
</tr>
</table>
</body>
</html>shape特性说明区域的图形，常用值有：rect矩形；poly多边形；circ圆形。
coords特性指明了区域的位置和大小，
shape=“circ” ? ? ?： ? ?coords需要三个值，前两个为圆心坐标，最后一个为半径长度。
shape=“rect” ? ? ： ? ? coords需要四个值，前两个为矩形左上角坐标，后两个为右下角坐标。
shape=“poly” ? ? ： ? ? 三角形需要六个值，五角星需要十个值。。。。
href特性用于指明点击某个区域希望加载的页面。
