Tutorial Manthra

Image map or mouse sensitive images is a feature provided by HTML and XHTML which allow us to link many different links inside a single image. Different links are identified by the different coordinates available on the image and by clicking different parts of the images to open different targeted documents.

There are two ways to create image maps

• Client-side image maps: This is created with the usemap attribute of the <img> tag, along with corresponding <map> and <area> tags.
• Server-side image maps: This is enabled by the ismap attribute of the <img> tag and requires access to a server and related image-map processing applications.

Client side image maps

Client side image maps are enabled by the usemap attribute of the <img /> tag and defined by special <map> and <area> extension tags.

To create a client side image map the image is inserted in html as usual using the <img /> tag with an extra attribute, the usemap attribute. The value of the usemap attribute should be same as the value of map tags name attribute.

After the image tag we use the map tag to with name attribute where the name attribute is same as the usemap attribute value. Inside the map tag we use <area> tag with coordinates of different clickable shapes and target links.

Here is an example

<p>Search and click the hotspot</p>
 <img src = "https://img.tutorialmanthra.com/flower-image.jpg" alt = "HTML Map" border = "0" usemap = "#html"/>

<!-- Create  Mappings -->
      <map name = "html">
         <area shape = "circle" coords = "300,300,50" 
            href = "html-images" alt = "Html images = "_self" />
         
         <area shape = "rect" coords = "5,5,40,40" alt = "Html Introduction" 
            href = "html-introduction" target = "_self" />
      </map>

Output

Search and click the hotspot

Coordinate System

The different parts of an image are identified using a coordinate system. The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image, beginning with (0,0).

The actual value of coords is totally dependent on the shape in question. Below are some example

• rect = x1 , y1 , x2 , y2
  x1 and y1 are the coordinates of the upper left corner of the rectangle; x2 and y2 are the coordinates of the lower right corner.
• circle = x_c , y_c , radius
  x_c and y_c are the coordinates of the center of the circle, and radius is the circle’s radius. A circle centered at 100,120 with a radius of 25 would have the attribute coords = “100,120,25”
• poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , … x_n , y_n
  The various x-y pairs define vertices (points) of the polygon, with a “line” being drawn from one point to the next point. A diamond-shaped polygon with its top point at 20,20 and 40 pixels across at its widest points would have the attribute coords = “20,20,40,40,20,60,0,40”.

All coordinates are relative to the upper-left corner of the image (0,0). Each shape has a related URL. You can use any image software to know the coordinates of different positions.

Server-Side Image Maps

The server side image map works in a similar way. Here you don’t have the map tag and area tag but instead you pass the coordinate value to a server script.The only difference is that you should specify a server script as the target url. When the user clicks on the image the coordinates of the image also are sent to the server and the server script decides which target document is to be delivered.

<a href = "/process_image.php" target = "_self"> 
         <img ismap src = "https://img.tutorialmanthra.com/flower-image.jpg" alt = "Tutorials Manthra" border = "0"/> 
</a>

When a user clicks on 20 pixel right and 30 pixel down in the image the 20 and 30 are sent to the server as follows

process_image.php?20,30

Note: You will learn more about this while learning server side scripting tutorials.