html图片链接 – HTML教程 html图片链接|HTML

上一章HTML教程请查看：html文本链接
我们已经看到了如何使用文本创建超文本链接，我们还学习了如何在我们的网页中使用图像。现在，我们将学习如何使用图像来创建超链接。
【html图片链接 – HTML教程】例子
使用图像作为超链接很简单，我们只需要在超链接中使用如下所示的图像代替文本

< !DOCTYPE html> < html>< head> < title>图片超链接< /title> < /head>< body> 点击下面链接 < a href = "https://www.srcmini.com" target = "_self"> < img src = "http://www.srcmini.com/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> 点击以下链接< a href = "http://www.srcmini.com/cgi-bin/ismap.cgi" target = "_self"> < img ismap src = "http://www.srcmini.com/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> 搜索并点击 < img src = http://www.srcmini.com/images/html.gif alt ="HTML Map" border = "0" usemap = "#html"/> < !-- CreateMappings -->< map name = "html"> < area shape = "circle" coords = "80,80,20" href = "http://www.srcmini.com/css/index.htm" alt = "CSS Link" target = "_self" />< area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link" href = "http://www.srcmini.com/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，你可以使用任何图像软件来知道不同位置的坐标。