HTML Image Links

In a previous lesson (HTML Links), you’ve learned how to create link with text. In this lesson, you’ll learn how to create links with images.

You can create links with an image in two ways-

1. Creating one link with an image (using anchor element), and
2. Creating multiple links with the different parts of an image (using image map)

1. Creating one link with an entire Image

To create a link around an image, just wrap the image with the a (another) element, see following-

<a href="http://schoolsofweb.com/">
<img src=”http://schoolsofweb.com/wp-content/uploads/schools-of-web.gif” width=”120” height=”120” />
</a>

Output:

When you bring mouse over the image above, the mouse pointer will be changed to hand icon and if you click the image it will go to the web address mentioned in the href attribute.

2. Creating multiple links with an Image

Sometimes you want different parts of an image to link with different URLs. For example, you may want to add links with different parts of an image to different URLs (interactive map) or you may want to create an architectural view of an apartment where each room will be linked different URL. In these situations, image map is the solution.

Image maps

In the above, you’ve learned that anchor element (a) is used to create link with an image; well, image map is the second option to create link in an image.

There are two types of image map-

1. Server-side image map and
2. Client-side image map

a. Server-side image map

As because the point where a visitor clicks on the image is determined in the server side script, so it is called server-side image map. The working principle of server-side image map is very straight forward. The coordinates that a visitor clicks on an image are sent to server and the server takes next actions according to it.

To create a server-side image map, follow the two steps-

• Add the ismap attribute in the img element of the image element and then,
• Add the server side scripting file in the href attribute of the anchor element

Example:

<a href="<a href="/coordinate.php">coordinate.php</a>" target=”_blank”>
<img ismap src="<a href="http://schoolsofweb.com/wp-content/uploads/server-side-image-maps.jpg">http://schoolsofweb.com/wp-content/uploads/server-side-image-maps.jpg</a>" alt="server-side image map" />
</a>

Output:
When you bring mouse over the image, see the coordinates change and when you click on a point, the coordinates of that point will be added as the parameter after the coordinates.php in the URL (like (ex. coordinates.php?100,200) and the page will begin to load.

I used server side scripting language PHP to read the coordinates of the clicking point. The page after loading will display the coordinates of the point you clicked on.

b. Client-side image map

As because the clickable areas on an image are displayed in the client end (on the browser) and visitor’s clicking point is decided here, so, it is called client-side image map. Client-side image map is an overlay on an image with defined clickable areas (hotspots) on it. On an image, you can specify hotspots of any size – rectangular, triangular, circular, polygon etc.

To create an image map, you need two things-

1. The image: To display it in the browser, and
2. The image map: To specify the hotspots/clickable area on the image.

a. The image

The image is created with the standard image element (img) that you already have seen so far. In addition, add the usemap attribute and add a name in the value as name of the image map; the name must be started with the hash sign (#). See the example below-

<img src=” http://schoolsofweb.com/wp-content/uploads/server-side-image-maps.jpg” usemap=”#offers” />

b. The image map

Two elements are required to define an image map.

1. The map element: This element is used to hold the whole map information. It has the mandatory name attribute whose value must be the same as the value of the usamap attribute (without the # sign) that you defined in the img element in the previous step. Matching the both names, it is determined which map information is associated with which image. If you want to add id attribute in the map element, its value must be the same as the name attribute. See the example below-
   <map name=”offers” id=”offers”></map>
2. The area element: This element is used to specify the coordinates of each clickable area (or hotspot). The element must be included inside the map element. Mention as many hotspot you want on the map. This element take the following attributes to specify a hotspot-
   shape: it specifies the shape of a hotspot. The possible value could be rect (to specify a rectangle), circle (to specify a circular area), poly (to specify a triangle or polygon), and
   coords: it defines coordinates of a shape.
   – If the shape is a rect, the coordinates consist of four numbers – first two are for the upper-left corner and the second two are for lower-right corner of the rectangle.
   – If the shape is a circle, the coordinates consist of three numbers – first two numbers are for horizontal and vertical position of the circle’s center, and the last number is for radius of the circle.
   – If the shape is a poly, the coordinates are the collection of x and y coordinates of each vertex of the shape in clockwise direction.
   href: specifies the URL to which the hotspot is linked to.
   alt: specifies the alternative text for the hotspot.

 Example:

<img src="server-side-image-map.jpg" usemap="#shapes">
<map name="shapes" id="shapes">
    <area shape="poly" coords="78,22,140,104,20,104" alt="Triangle" title="Triangle" >
    <area shape="rect" coords="256,23,360,104" href="index.htm" alt="Rectangle" title="Rectangle" >
    <area shape="circle" coords="533,62,43" href="index.htm" alt="Circle" title="Circle" >
</map>

Output:

When you mouse hover on any shape above, a tooltip will be appeared with its name. Please note that instead of linking each shape to link with an URL, I used the global attribute title to show the shape names.

Finding coordinates of a shape:

Creating image maps by hand is not easy. Most image editing tools, like Adobe Dreamweaver, have image map drawing tools built-in. You can take advantage of it. First identify points inside the map and then create the proper markup for it using the guideline above.

The easiest way to determine the coordinates is to open the image in a graphics-editing program such as Paint Shop Pro. It displays the mouse pointer position in the status bar as you move your mouse. Move the mouse pointer over any spot on the image, and the program will display its coordinates.

Misuse of image maps

• Don’t use image map to create main navigation of a website.
• Don’t use image map in a way which hampers accessibility and user experience.