首页 >> HTML+CSS >> HTML|如何使用图像创建超链接。

HTML|如何使用图像创建超链接。

287865 2020-05-15 0
浏览次数273

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

鼠标敏感图像

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

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

  • 服务器端图像映射 -这由<img>标记的ismap属性启用,并且需要访问服务器和相关的图像映射处理应用程序。
  • 客户端图像映射 -这是使用<img>标签的usemap属性以及相应的<map>和<area>标签创建的。

服务器端图像映射

在这里,您只需将图像放在超级链接中,并使用ismap属性即可使其成为特殊图像,并且当用户单击图像中的某个位置时,浏览器将鼠标指针的坐标以及<a>标记中指定的URL传递给到网络服务器。服务器使用鼠标指针坐标来确定将哪个文档传递回浏览器。

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

鼠标位置的坐标是从图像的左上角开始计数的屏幕像素,从(0,0)开始。坐标(前面带有问号)被添加到URL的末尾。

例如,如果用户单击以下图像左上角上方的20个像素和向下的30个像素

然后浏览器将以下搜索参数发送到Web服务器,该服务器可以由ismap.cgi脚本或地图文件处理,您可以将所需的任何文档链接到这些坐标-

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

这样,您可以将不同的链接分配给图像的不同坐标,并且在单击这些坐标时,可以打开相应的链接文档。

客户端图像映射

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

将使用<img />标记作为普通图像插入将要形成地图的图像,但该图像带有一个名为usemap的额外属性。usemap属性的值是将在<map>标记中用于链接map和image标记的值。<map>和<area>标记一起定义了所有图像坐标和相应的链接。

map标记内的<area>标记指定形状和坐标,以定义图像上可用的每个可单击热点的边界。

全部评论:0