无涯教程-HTML - How to use Image ismap?函数 To use an image with i

To use an image with ismap attribute, you simply put your image inside a hyper link and use ismap attribute which makes it special image and when the user clicks some place within the image, the browser passes the coordinates of the mouse pointer along with the URL specified in the <a> tag to the web server. The server uses the mouse-pointer coordinates to determine which document to deliver back to the browser.

When ismap is used, the href attribute of the containing <a> tag must contain the URL of a server application like a cgi or PHP script etc. to process the incoming request based on the passed coordinates.

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

如,如果用户单击下图左上角上方的50个像素,并单击下方的30个像素,则:

点击以下链接

由以下代码片段生成-

<!DOCTYPE html>
<html>
   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
   <body>
      <p>点击以下链接</p>
      <a href = "/article-cgi-bin/ismap.cgi" target="_self"> 
         <img ismap src="//learnfk.xiuxiandou.com/learnfk_logo.png" alt="Tutorials Point" border="0"/> 
      </a>
   </body>
</html>

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

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

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

使用CGI(如果不使用CGI文件,则使用PHP文件)
使用Map文件

一个CGI或PHP文件

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

#!/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;

由于您能够解析传递的坐标,因此可以放置如果条件的列表,以检查传递的坐标并将适当的链接文档发送回浏览器。

Map文件

Map文件 can be used to store the location of HTML files that you want the reader to be taken to when the area between the identified coordinates is "clicked."

将默认文件放在第一个位置,并将其他文件放置在与各个坐标相对应的位置,如下所示在 ismap.map 文件中。

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

这样,您可以为图像的不同部分分配不同的链接,并且在单击这些坐标时,可以打开链接的文档。因此,让我们使用 ismap.map 文件重写以上Example:

<!DOCTYPE html>
<html>
   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
   <body>
      <p>点击以下链接</p>
      <a href = "/html/ismap.map" target="_self"> 
         <img ismap src = "//learnfk.xiuxiandou.com/learnfk_logo.png" alt="Tutorials Point" border="0"/> 
      </a>
   </body>
</html>

在尝试上述Example之前,您需要确保您的Web服务器已进行了必要的配置以支持图像映射文件。

坐标系

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

以＃开头的行是注释。每隔一条非空白行包含以下内容-

rect = x₁ , y₁ , x₂ , y₂: x ₁和y ₁是矩形左上角的坐标； x ₂和y ₂是右下角的坐标。
circle = x_c , y_c , radius: x _c和y _c是圆心的坐标,而radius是圆的半径。以200,50为中心,半径为25的圆的属性为 coords =" 200,50,25"
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n: 各种x-y对定义了多边形的顶点(点),并从一个点到下一个点绘制了一条"线"。顶点为20,20且最宽点为40像素的菱形多边形将具有 coords =" 20,20,40,40,20,60,0,40" 。

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

无涯教程-HTML - How to use Image ismap?函数

一个CGI或PHP文件

Read in text

Split information into name/value pairs

Map文件

坐标系

参考链接