上一章HTML教程请查看:html文本链接
我们已经看到了如何使用文本创建超文本链接,我们还学习了如何在我们的网页中使用图像。现在,我们将学习如何使用图像来创建超链接。
例子
使用图像作为超链接很简单,我们只需要在超链接中使用如下所示的图像代替文本
<!DOCTYPE html>
<html>
<head>
<title>图片超链接</title>
</head>
<body>
<p>点击下面链接</p>
<a href = "https://www.srcmini02.com" target = "_self">
<img src = "/images/logo.png" alt = "srcmini" border = "0"/>
</a>
</body>
</html>
这是使用图像创建超链接的最简单方法,接下来,我们将看到如何创建鼠标敏感的图像链接。
Mouse-Sensitive图片
HTML和XHTML标准提供了一个特性,允许在一个图像中嵌入许多不同的链接。你可以根据图像上可用的不同坐标在单个图像上创建不同的链接。一旦不同的链接被附加到不同的坐标,我们可以点击图像的不同部分来打开目标文档,这种对鼠标敏感的图像称为图像映射。
创建图像映射有两种方法
- 服务器端图像映射——这是由<img>标记的ismap属性启用的,需要访问服务器和相关的图像映射处理应用程序。
- 客户端图像映射——这是使用<img>标记的usemap属性以及相应的<map>和<area>标记创建的。
服务器端图像映射
这里你只要把你的图像在一个超链接和使用ismap属性使它特殊的形象,当用户单击某个地方的形象,浏览器通过鼠标指针的坐标以及<一>标记中指定的URL到web服务器,服务器使用鼠标指针坐标来确定将哪个文档传递回浏览器。
当使用ismap时,包含<a>标记的href属性必须包含服务器应用程序(如cgi或PHP脚本等)的URL,以便根据传递的坐标处理传入的请求。
鼠标位置的坐标是从图像左上角(0,0)开始计算的屏幕像素,前面带问号的坐标被添加到URL的末尾。
例如,如果用户从下图左上角向下点击20像素,然后从上往下点击30像素。
下面的代码片段生成了什么:
<!DOCTYPE html>
<html>
<head>
<title>ISMAP超链接的例子</title>
</head>
<body>
<p>点击以下链接</p>
<a href = "/cgi-bin/ismap.cgi" target = "_self">
<img ismap src = "/images/logo.png" alt = "srcmini" border = "0"/>
</a>
</body>
</html>
然后浏览器将以下搜索参数发送到web服务器,这些服务器可以由ismap.cgi脚本或map文件处理,你可以将你喜欢的任何文档链接到这些坐标:
/cgi-bin/ismap.cgi?20,30
通过这种方式,你可以为图像的不同坐标分配不同的链接,当这些坐标被单击时,你可以打开相应的链接文档。
注意——当你学习Perl编程时,你将学习CGI编程。你也可以使用PHP或其他任何脚本编写脚本来处理这些传递的坐标。现在,让我们集中学习HTML,稍后你可以重新访问这一节。
客户端图像映射
客户端图像映射由<img />标记的usemap属性启用,并由特殊的<map>和<area>扩展标记定义。
使用<img />标记将形成映射的图像作为普通图像插入到页面中,只是它带有一个称为usemap的额外属性。usemap属性的值将在<map>标记中用于链接映射和图像标记。<map>和<area>标记定义了所有的图像坐标和相应的链接。
map标签内的<area>标签,指定了形状和坐标来定义图像上每个可点击热点的边界。这是一个来自图像映射的例子
<!DOCTYPE html>
<html>
<head>
<title>USEMAP超链接的例子</title>
</head>
<body>
<p>搜索并点击</p>
<img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
<!-- Create Mappings -->
<map name = "html">
<area shape = "circle" coords = "80,80,20"
href = "/css/index.htm" alt = "CSS Link" target = "_self" />
<area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link"
href = "/jquery/index.htm" target = "_self" />
</map>
</body>
</html>
坐标系统
坐标的实际值完全取决于所讨论的形状,这里是一个概要,后面是详细的例子:
- rect = x1 y1 x2 y2
x1和y1是矩形左上角的坐标;x2和y2是右下角的坐标。
- circle= xc, yc,radius
xc和yc是圆心的坐标,半径是圆的半径。以200,50为圆心,半径为25的圆的属性coords = “200,50,25”
- poly= x1, y1, x2, y2, x3, y3,…xn, yn
不同的x-y对定义多边形的顶点(点),从一个点到下一个点画一条“线”。一个顶部点为20、20和40像素、最宽点为40的菱形多边形的属性coords =“20、20、40、40、20、60、0、40”。
所有坐标都相对于图像的左上角(0,0),每个形状都有一个相关的URL,你可以使用任何图像软件来知道不同位置的坐标。
评论前必须登录!
注册