Using HTML ISMAP

The isMap Attribute

The HTML isMap is a boolean attribute which is used with images to specify that the image being used is a server-side image map. Here, the image map is an image having one or more clickable areas. However, it is important to note that the ismap attribute will work only if the <img> element is a descendant of an <a> element with a valid href attribute.

How to use isMap attribute in HTML?

To use an image with ismap attribute, we simply put the required image inside a hyperlink and use ismap attribute which makes it a 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 to process the incoming request based on the passed coordinates.

The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image, beginning with (0,0). The coordinates, preceded by a question mark, are added to the end of the URL.

Example

Let's look at an example −

<!DOCTYPE html>
<html>
   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
   <body>
      <p>Click on the Image to get its coordinates. </p>
      <a href = "/cgi-bin/ismap.cgi" target="_self"> 
         <img ismap src="/images/logo.png" alt="Tutorials Point" border="0"/> 
      </a>
   </body>
</html>

If you execute the above example it will display the "tutorialspoint" logo and if the user clicks 62 pixels over and 32 pixels down from the upper-left corner of the following image, it will redirect us to a new page where we can see the coordinates inside the address bar. Then the browser sends the following search parameters to the web server −

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

Now, these passed coordinates can be processed in either of the following two ways −

  • Using a CGI (or PHP file if you are not using CGI file)
  • Using a map file

A CGI or PHP file

Following is the perl code for ismap.cgi script which is being used in the above example −

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

Because we are able to parse passed coordinates, we can put a list of if conditions to check passed coordinates and send the appropriate linked document back to the browser.

A map file

A map file can be used to store the location of HTML files that we want the reader to be taken to when the area between the identified coordinates is "clicked".

We will redirect the users to ismap.map file which holds the location of various tutorials available on the Tutorialspoint. The content of this file is shown below −

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

So let's rewrite the above example using ismap.map file:

<!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="Tutorials Point" border="0"/> 
      </a>
   </body>
</html>
Advertisements