目录
  1. WIKI教程
  2. 学习HTML
  3. HTML - 图像链接( Image Links)

HTML - 图像链接( Image Links)

我们已经了解了如何使用文本创建超文本链接，我们还学习了如何在我们的网页中使用图像。 现在，我们将学习如何使用图像来创建超链接。

例子 (Example)

将图像用作超链接很简单。 我们只需要在文本位置的超链接内使用图像，如下所示 - 

<!DOCTYPE html>
<html>
   <head>
      <title>Image Hyperlink Example</title>
   </head>
   <body>
      <p>Click following link</p>
      <a href = "https://www.iowiki.com" target = "_self"> 
         <img src = "/images/logo.png" alt = "IOWIKI" border = "0"/> 
      </a>
   </body>
</html>

这将产生以下结果，您可以单击图像以访问IOWIKI的主页。

新页面打开

这是使用图像创建超链接的最简单方法。 接下来，我们将看到如何创建鼠标敏感图像链接。

Mouse-Sensitive Images

HTML和XHTML标准提供了一项功能，允许您在单个图像中嵌入许多不同的链接。 您可以根据图像上可用的不同坐标在单个图像上创建不同的链接。 将不同的链接附加到不同的坐标后，我们可以单击图像的不同部分以打开目标文档。 这种鼠标敏感图像称为图像映射。

有两种方法可以创建图像映射 -

  • Server-side image maps - 这是通过“img”标记的ismap属性启用的，并且需要访问服务器和相关的图像映射处理应用程序。

  • Client-side image maps - 使用“img”标记的usemap属性以及相应的“map”和“area”标记创建。

服务器端图像映射

在这里，您只需将图像放在超链接中，并使用ismap属性使其成为特殊图像，当用户单击图像中的某个位置时，浏览器会传递鼠标指针的坐标以及“a”标记中指定的URL到Web服务器。 服务器使用鼠标指针坐标来确定要将哪个文档传回浏览器。

使用ismap ，包含“a”标记的href属性必须包含服务器应用程序的URL，如cgi或PHP脚本等，以根据传递的坐标处理传入的请求。

鼠标位置的坐标是从图像的左上角开始计算的屏幕像素，以（0,0）开头。 以问号开头的坐标将添加到URL的末尾。

例如，如果用户点击以下图片的左上角20个像素和30个像素 -

这是由以下代码段生成的 - 

<!DOCTYPE html>
<html>
   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
   <body>
      <p>Click following link</p>
      <a href = "/cgi-bin/ismap.cgi" target = "_self"> 
         <img ismap src = "/images/logo.png" alt = "IOWIKI" border = "0"/> 
      </a>
   </body>
</html>
新页面打开

然后浏览器将以下搜索参数发送到Web服务器，该服务器可以由ismap.cgi脚本或map file ，您可以将您喜欢的任何文档链接到这些坐标 - 

/cgi-bin/ismap.cgi?20,30

这样，您可以为图像的不同坐标指定不同的链接，单击这些坐标时，可以打开相应的链接文档。 要了解有关ismap属性的更多信息，可以查看如何使用Image ismap？

Note - 学习Perl编程时，您将学习CGI编程。 您可以编写脚本来使用PHP或任何其他脚本处理这些传递的坐标。 现在，让我们专注于学习HTML，稍后您可以重新访问此部分。

客户端图像映射

客户端图像映射由“img /”标记的usemap属性启用，并由特殊的“map”和“area”扩展标记定义。

将使用表格将要形成地图的图像插入到页面中 标记为普通图像，但它带有一个名为usemap的额外属性。 usemap属性的值是将在“map”标记中用于链接地图和图像标记的值。 “map”和“area”标签定义了所有图像坐标和相应的链接。

map标签内的标签指定形状和坐标，以定义图像上可用的每个可点击热点的边界。 这是图像映射的一个例子 - 

<!DOCTYPE html>
<html>
   <head>
      <title>USEMAP Hyperlink Example</title>
   </head>
   <body>
      <p>Search and click the hotspot</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>

这将产生以下结果 -

新页面打开

坐标系

coords的实际值完全取决于所讨论的形状。 这是一个摘要，后面是详细的例子 -

  • rect = x 1 , y 1 , x 2 , y 2

    x 1和y 1是矩形左上角的坐标; x 2和y 2是右下角的坐标。

  • circle = x c , y c , radius

    x c和y c是圆心的坐标，半径是圆的半径。 以200,50为中心，半径为25的圆将具有属性coords = "200,50,25"

  • poly = x 1 , y 1 , x 2 , y 2 , x 3 , y 3 , ... x n , y n

    各种xy对定义多边形的顶点（点），从一个点到下一个点绘制“线”。 菱形多边形的顶点在其最宽点处为20,20和40像素，其属性为coords = "20,20,40,40,20,60,0,40" 。

所有坐标都相对于图像的左上角（0,0）。 每个形状都有一个相关的URL。 您可以使用任何图像软件来了解不同位置的坐标。

<上一篇.HTML - Meta Tags
HTML - 电子邮件链接( Email Links).下一篇>
↑回到顶部↑
WIKI教程 @2018