第二章网站开发基础之HTML教程 - 二、常用HTML标签：area图片热点（内联元素）

最新推荐文章于 2022-08-10 18:28:48 发布

陈子2005

最新推荐文章于 2022-08-10 18:28:48 发布

阅读量330

点赞数 1

分类专栏：陈子-零基础网站开发教程文章标签： css html javascript 前端 html5

本文链接：https://blog.csdn.net/klyz505/article/details/105441592

版权

本文介绍了HTML中创建图片热点的方法，适用于如中国地图等需要点击不同区域跳转不同页面的情况。通过img标签的usemap属性与map标签配合，以及area标签的shape、coords和href属性设置，实现图片上任意形状的热点链接。通常借助工具如DreamWeaver进行绘制，以简化复杂的手工编码过程。

摘要由CSDN通过智能技术生成

（四）、area图片热点（内联元素）

有一种情况：比如一张中国地图，有30多个省份，鼠标点击不同的省份时，链接到不同的页面。并且每个省份的图案并不规则，各形各状。这种情况下，就需要用到图片热点。图片热点，允许在图片上勾勒出任意形状，对该形状设置链接，并且一张图片可以设置多个热点。

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>map标签</title>
</head><body>
<img src="map.gif" width="372" height="332" border="0" usemap="#Map" />
<map name="Map">
  <area shape="poly" 
 coords="5,77,2,101,18,119,22,129,37,123,66,127,86,129,100,126,100,113,121,111,124,95,143,89,140,76,121,65,
114,60,117,49,107,34,104,27,97,32,92,45,77,38,71,49,58,48,56,63,49,73,29,78,14,74,5,77" href="xinjiang.html">
</map></body></html>