html 图像映射（一个图像多个连接）

最新推荐文章于 2025-03-02 18:02:58 发布

小林望北

最新推荐文章于 2025-03-02 18:02:58 发布

阅读量1.6w

点赞数 9

分类专栏： WEB开发文章标签： html 导航地图图像映射

本文链接：https://blog.csdn.net/qiantujava/article/details/18305709

版权

WEB开发专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用HTML实现图像映射的方法，通过定义不同形状的热点区域来创建交互式的图片链接。具体包括如何设置矩形、圆形及不规则多边形区域，并将这些区域链接到不同的网页。

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

以前就见过那种导航地图，点击地图的不同省份分别跳到不同的连接，现在用html实现一下，简单的。

图像映射是指一个图像可以建立多个连接，就是在图像上面定义多个区域，每个区域连接到不同的地址。

效果如图：(可以直接分别点击四个人物头像试试！)

点击索隆，跳到索隆。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
</script>
</head>
<body>
	<img src="images/haizeiwang.jpg" usemap="#haizeiwang">
	<map name="haizeiwang">
		<!-- 娜美 --><area shape="rect" coords="360,60,500,400" href="http://b.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=d74caf65b4003af349badc650511b761/d439b6003af33a8708cf4f76c45c10385343b538.jpg?referer=d74e5572bb389b5061e8d462f3d6&x=.jpg" target="_blank">
		<!-- 乔巴 --><area shape="rect" coords="250,330,360,500" href="http://g.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=24bd57a9e2fe9925cf0c695504932fe2/2cf5e0fe9925bc3142f44ef45cdf8db1cb137034.jpg?referer=d7a90a9339c79f3dd6f6d000b0ea&x=.jpg" target="_blank">
		<!-- 山治 --><area shape="circle" coords="230,230,100" href="http://e.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=5e8ee94fb27eca80160539e2a118e6e0/9213b07eca806538e048eb7f95dda144ad348238.jpg?referer=4b70b4479f16fdfa817bf2deeed6&x=.jpg" target="_blank">
		<!-- 索隆 --><area shape="poly" coords="130,20,200,50,160,150,60,200,50,100,100,70" href="http://g.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=af1dc8ebd2a20cf44290feda46323a0b/b3b7d0a20cf431ad3d700c554936acaf2edd9838.jpg?referer=ccb657a9e2fe9925921b5d60d8d6&x=.jpg" target="_blank">
	</map>
	<!-- 
		shape : 有几个选择：rect : 矩形，coords对应的坐标为左上角和右下角。
						   circle:圆，coords对应的是圆心（x，y），和半径r。
						   poly：   多边形，coords对应的是每个点的坐标。
		coords：坐标，根据shape的值去定义。
		href：链接。
	 -->
</body>
</html>