HTML图像热点区域链接实现-优快云博客

<---------个人网站传送门-------->

图像热点区域链接

即将某一图像划分为n个不同的热点区域，鼠标点击不同区域时链接到不同的内容。

常见应用：景区景点分布图，点图中不同顶点分别显示其景点详细介绍。

HTML实现的大体结构：

<img src="图片地址" usemap="#标记名称" />//教材上和网上好多地方说是username，这是有问题的。
<map name="标记名称">
<area shape="热区形状" coords="热区坐标" href="链接地址" />
<area shape="热区形状" coords="热区坐标" href="链接地址" />
<area shape="热区形状" coords="热区坐标" href="链接地址" />
</map>

shape的取值：<area shape="default|rect|circle|poly">

default:规定全部区域,无意义...

rect：定义矩形区域

coords="x1,y1,x2,y2" （x1,y1）为左上角坐标，(x2,y2)为右下角坐标。

circle(circ):定义圆形

coords="x1,y1,r" （x1,y1）为圆心，r为半径。

poly(polygon):定义多边形区域

coords值分别为多边形各个顶点坐标

那么，如何去得到点的精确坐标呢。

虽然Dreamwever提供有特别方便的这类功能，但是我还是不喜欢去用它。

HTML提供了一个叫ismap的属性

ismap 属性是一个布尔属性。

ismap 属性将图像定义为服务器端图像映射（图像映射指的是带有可点击区域的图像）。

当点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器。

注意：只有当 <img> 元素属于带有有效 href 属性的 <a> 元素的后代时，才允许使用 ismap 属性。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>确定热点区域坐标</title>
</head>
<body>
		<a href="#"><img src="file:///E:/Pictures/13.jpg" width=400px height=400px ismap="ismap"></a>
</body>
</html>

转载于:https://www.cnblogs.com/JYL666/p/10133292.html