深入理解热区链接

最新推荐文章于 2023-12-27 18:17:06 发布

前端hacker97

最新推荐文章于 2023-12-27 18:17:06 发布

阅读量1.9k

点赞数 7

分类专栏： html历史网页历史 web标准 html+css+js 文章标签： html

本文链接：https://blog.csdn.net/qq_24928451/article/details/44656739

版权

html历史网页历史 web标准 html+css+js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

以我的理解热区链接可以当成是在一个图片或图案上的自己定义一个固定的位置，当鼠标点击时，会产生链接，比如打开一个新的页面。所以热区链接目的就是要在图片上做文章！

这样我们就可以以图片的形式展开对于热区链接的叙述了。

一般我们使用热区链接就三大块1、要先定义要使用图片的名字如

2、导入要使用的图片

3、定义要使用图片应产生链接的位置

下面这两幅图是大概地向大家展示一下效果。注意看图中的注释。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	<map name="lin"><!--这是先定义要使用图片的名字-->
		<img src="8.jpg" usemap="#lin" alt="" /><!--这是导入要使用的图片-->
		<area shape="circle" coords="0,0,60" href="http://www.baidu.com" alt="" target="lin" ><!--这是定义要使用图片应产生链接的位置-->
    </map>
</body>
</html>

显然可以看见网页里会有个蓝色的1/4圆产生，这是由于定义了热区链接，当点击那个圈时会直接在新页面打开链接的网址。

接下来具体介绍要使用图片应产生链接的位置

也就是这一段代码

<area shape="circle" coords="0,0,60" href="http://www.baidu.com" alt="" target="lin" >

shape表示定义热区图案形状，有三种圆形：circle多变形：polygon矩形：rectagle

href后面跟了点击热区将会打开的新网页，所以可以随意设置地址

coords代表了定义点的坐标，由于对于不同形状会有不同区分，分三种

圆形时:(x,y,z)

多边形:（x1，y1,x2,y2,x3,y3.............）

矩形：（x1,y1,x2,y2)

以下我把三种不同形状的时候都写一下

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<map name="lin">
		<img src="8.jpg" usemap="#lin" alt="" />
		<area shape="polygon"  coords="20,20,100,100" href="http://www.baidu.com" alt="" target="lin" />
    </map>  
</body>
</html>

矩形的效果图

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<map name="lin">
		<img src="8.jpg" usemap="#lin" alt="" />
		<area shape="rectangle"  coords="503,45,577,45,616,84,616,184,503,184" href="http://www.baidu.com" alt="" target="lin" />
    </map>  
</body>
</html>

多变形效果图

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<map name="lin">
		<img src="8.jpg" usemap="#lin" alt="" />
		<area shape="circle"  coords="90,90,90" href="http://www.baidu.com" alt="" target="lin" />
    </map>  
</body>
</html>

圆形效果图

下面有一种好玩的方式，新的页面将会在原页面的一个框架里打开

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<map name="lin">
		<img src="8.jpg" usemap="#lin" alt="" />
		<area shape="circle"  coords="90,90,90" href="http://www.baidu.com" alt="" target="lin" />
		<iframe name="lin" src="http://www.csdn.com" width="600" height="400" frameboard="1" ></iframe>
    </map>  
</body>
</html>

效果图