（11）html图像映射

最新推荐文章于 2025-04-13 13:30:00 发布

原创最新推荐文章于 2025-04-13 13:30:00 发布 · 835 阅读

1 ·

CC 4.0 BY-SA版权

html学习笔记专栏收录该内容

17 篇文章

订阅专栏

本文介绍了HTML图像映射的概念，通过服务器端和客户端两种方式实现图像不同区域的交互功能。服务器端图像映射利用ismap属性，将鼠标坐标发送到服务器进行处理；客户端图像映射则通过usemap、map和area元素定义，配合shape和coords属性指定区域形状和位置，href属性链接点击后的目标页面。

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

图像映射可以将图像划分为不同的区域，每个区域可以进行不同的操作。比如一个建筑场景地图，当点击客厅位置，可以弹出客厅的详细设计或图片，点击厨房则是厨房的设计。

根据识别点击热点位置的不同，图像映射可以分为两类：服务器端图像映射和客户端图像映射。

（一）服务器端图像映射：

当用户在 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>

如上代码所示：<img>元素中使用usemap特性，其值为#后边跟上<map>元素的name或id，最后用<area>元素对图像进行划分区域。

shape特性说明区域的图形，常用值有：rect矩形；poly多边形；circ圆形。
coords特性指明了区域的位置和大小，

shape=“circ” ： coords需要三个值，前两个为圆心坐标，最后一个为半径长度。

shape=“rect” ： coords需要四个值，前两个为矩形左上角坐标，后两个为右下角坐标。

shape=“poly” ：三角形需要六个值，五角星需要十个值。。。。

href特性用于指明点击某个区域希望加载的页面。