如何使用Image ismap？（How to use Image ismap?）

优质

小牛编辑

122浏览

2023-12-01

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

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

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

例如，如果用户点击了下图中左上角50个像素和30个像素:

Click following link

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

<!DOCTYPE html>
<html>
   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
   <body>
      <p>Click following link</p>
      <a href = "https://demain.com/cgi-bin/ismap.cgi" target="_self"> 
         <img ismap src="/images/logo.png" alt="xnip" border="0"/> 
      </a>
   </body>
</html>

然后浏览器将以下搜索参数发送到Web服务器 -

https://demain.com/cgi-bin/ismap.cgi?20,30

现在这些传递的坐标可以通过以下两种方式之一进行处理 -

使用CGI（如果你没有使用CGI文件，则使用PHP文件）
使用地图文件

CGI或PHP文件

以下是ismap.cgi脚本的perl代码， ismap.cgi脚本在上面的示例中使用 -

#!/usr/bin/perl
local ($buffer, $x, $y);
# Read in text
$ENV{'REQUEST_METHOD'} =~ tr/a-z/A-Z/;
if ($ENV{'REQUEST_METHOD'} eq "GET") {
   $buffer = $ENV{'QUERY_STRING'};
}
# Split information into name/value pairs
($x, $y) = split(/,/, $buffer);
print "Content-type:text/html\r\n\r\n";
print "<html>";
print "<head>";
print "<title>ISMAP</title>";
print "</head>";
print "<body>";
print "<h2>Passed Parameters are : X = $x, Y = $y </h2>";
print "</body>";
print "</html>";
1;

因为您能够解析传递的坐标，所以可以列出if conditions列表以检查传递的坐标并将适当的链接文档发送回浏览器。

地图文件

地图文件可用于存储您希望读者在“点击”标识的坐标之间的区域时被带到的HTML文件的位置。

您将默认文件保留在第一个位置，其他文件对应于各种坐标，如下面ismap.map文件中所示。

default http://www.xnip.cn
rect    https://www.xnip.cn/html 5,5 64,141
rect    https://www.xnip.cn/css  91,5 127,196
circle  https://www.xnip.cn/javscript  154,150,59

这样，您可以为图像的不同部分指定不同的链接，并在单击这些坐标时，可以打开链接的文档。所以让我们使用ismap.map文件重写上面的例子:

<!DOCTYPE html>
<html>
   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
   <body>
      <p>Click following link</p>
      <a href = "/html/ismap.map" target="_self"> 
         <img ismap src = "/images/logo.png" alt="xnip" border="0"/> 
      </a>
   </body>
</html>

在尝试上述示例之前，您需要确保您的Web服务器具有支持图像映射文件所需的配置。

坐标系

coords的实际值完全取决于所讨论的形状。这是一个摘要，后面是详细的例子。您可以使用任何可用的工具（如Adobe Photoshop或MS Paint）来检测要用于ISMAP的图像上可用的各种坐标。

以＃开头的行是注释。所有其他非空白行包括以下内容 -

rect = x ₁ , y ₁ , x ₂ , y ₂: x ₁和y ₁是矩形左上角的坐标; x ₂和y ₂是右下角的坐标。
circle = x _c , y _c , radius: x _c和y _c是圆心的坐标，半径是圆的半径。以200,50为中心，半径为25的圆将具有属性coords="200,50,25"
poly = x ₁ , y ₁ , x ₂ , y ₂ , x ₃ , y ₃ , ... x _n , y _n: 各种xy对定义多边形的顶点（点），从一个点到下一个点绘制“线”。菱形多边形的顶点在其最宽点处为20,20和40像素，其属性为coords="20,20,40,40,20,60,0,40" 。

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