Image Map: Links in a Picture

To allow the user to click inside an image to get a page in connection with the designated object in the image, we do use an image map.

A common example of application: On a photo involving several people, when passing the mouse over one of those person, a message appears that displays their name and information about them. We'll see how to make a such application.

Creating an image map

The HTML specification defines precisely how to interact with an image.

1) Inserting an image in the page 

<img src="image.jpg" >

2) Adding the "usemap" attribute

It serves to indicate the map name associated with this image as a URL fragment. 

<img src="image.jpg" usemap="#map1">

3) Add the "map" tag in the code of the page 

<map name="map1">
</map>

It must necessarily have a name attribute.

4) In this tag, add one or more descriptions of hotspots

There are area tags featuring attributes href, shape, coords.

Href assigns a page, shape define a form and coords is a list of points. 

<map name="map1">
    <area href="page.html" shape="rect" coords="0,0,120,120">
</map>

Each zone is assigned a shape: rectangle (rect), circle, polygon (poly), then a series of points to define who depend on this form, and the URL of a page that is loaded when you click on the area.

Shapes and coordinates

In the case of a rectangle the coordinates are of the form: x1, y1, x2, y2 (left x, top y, right x, bottom y).
For a circle: x, y, radius.
For a polygon a succession of pairs x, y.

These coordinates are relative to the image, the point 0,0 is the upper left corner of the image.

Getting information about objects in an image

How to display messages when the mouse passes over an area bounded in the image?

We simply adds a title attribute to an area. The <title> tag become contextual and applies to objects defined inside the image thanks to <area> tags. 

<map name="map1">
    <area href="" shape="rect" coords="0,0,120,120" title="Contextual message" >
</map>

Example ... Click on the faces of actresses to get their name.

Jennifer Aniston

To obtain the coordinates of the rectangles, you can use Paint.Net and the function of selection : it displays the position of the selection and the size. Then add dimensions to the positions because <area> requires the coordinates of the four corners of the rectangle.

Full code:

<map name="hollywood" id="hollywood">
 <area href="#" shape="rect" coords="13,63,84,150" title="Gwynneth Paltrow" />
 <area href="#" shape="rect" coords="110,160,190,260" title="Naomi Watts" />
 <area href="#" shape="rect" coords="170,10,250,110" title="Salma Hayeck" />
 <area href="#" shape="rect" coords="300,30,380,130" title="Kirsten Dunst" />
 <area href="#" shape="rect" coords="250,260,340,370" title="Jennifer Aniston" />
</map>

<img src="https://www.xul.fr/images/hollywood.jpg" width="400" height="380"
     usemap="#hollywood" border="0">

Hyperlinks in an image

In another demonstration we will see how to create hyperlinks by loading images selected for the object on which the user clicked.

In this case, he has a choice between clicking on the face of the actress or the necklace she wears to see either another photo of the actress, or a photo of the necklace ...

A circular shape is better suited to define a face, use the value circle for the shape attribute.

Three coordinates value are then required:

For the necklace, a rectangle will suffice for the example, while a more complicated picture with many objects, has to use poly. 

<map name="map1">
 <area href="/images/asin1.jpg" shape="circle" coords="240,180,140" >
 <area href="/images/collar.jpg" shape="rect" coords="50,320,450,520">
</map>
<img id="img1" src="/images/asin2.jpg" Width="500" Height="540" usemap="#map1" >

The href attribute may contain the URL of a page or image. In the example, each zone defines the address of an image to load.

Links inside image map

How it is possible for a Web page when the user clicks on an image how to associate an action to an object inside the image.

The code:

<map name="map1">
 <area href="/images/asin1.jpg" shape="circle" coords="240,180,140" >
 <area href="/images/collar.jpg" shape="rect" coords="50,320,450,520">
</map>

<img id="img1" src="/images/asin2.jpg" Width="500" Height="540" usemap="#map1" >

Click on the face for another photo of the actress (Asin Thottumkal) or click on the necklace to view a photo of a necklace (I presume that a woman will click on the collar).

Second part

Tools and resources

© 2010-2012 Xul.fr