HTML点击一张图片不同地方跳转不同页面

最新推荐文章于 2025-06-07 18:52:11 发布

后生丶

最新推荐文章于 2025-06-07 18:52:11 发布

阅读量1.6w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.csdn.net/qq_30449567/article/details/80395310

html 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用HTML的<img>标签结合<map>和<area>标签实现点击图片不同区域跳转到不同页面的技术。通过设置<area>标签的shape属性定义形状类型及coords属性确定坐标范围，可以灵活指定图片上的热点区域。

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

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>点击图片不同地方跳转不同页面</title>  
</head>  
<body>  
   /// 打开页面显示的图片  
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">  
  
   /// img标签的usemap属性的值是下面map标签name属性的值（做关联）  
<map name="planetmap">  
   // area标签的shape属性的值rect为矩形，矩形的coords属性值有四个，分别是选取矩形图片定位的值,前两个表示左上角的定位值，后两个表示右下角的定位置；（多边形可以继续增加坐标)  
   // area标签的shape属性的值circle为圆形，圆形coords属性值有三个，前两个表示选取圆形图片的中心定位的值，第三个值表示半径  
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">  
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">  
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">  
</map>  
  
</body>  
</html>