- 1 Definition
- 2 Examples of use for image maps
- 3 Possible implementations of an image map
- 4 Related links
- 5 Similar articles
An image map is an HTML feature that enables developers to create hyperlinks over different sections of an image, without having to break up the image. These shapes can come in a variety of sizes and enable developers to match links to visual elements on images, such as making a circular action button a clickable link.
An image map is created by adding the 'usemap' attribute to an <img> tag, which specifies the ID of a <map> tag.
Examples of use for image maps
There are many varied uses for image maps. These maps support creating links in a variety of shapes, so their use can get quite creative; from simply creating actionable links over simple button shapes to more intricate uses, like making the boundaries of different regions on a map into clickable elements. Another example of where image maps could be implemented would be a photograph featuring several people where each person is turned into a clickable element.
Image maps can also be used to provide website visitors with further information about various topics. An example is the interactive US State map of mapsofworld.com. Every state contains a clickable link and leads to further information about said state, as well as an in-depth map.
Screenshot with image map of mapsofworld.com
Possible implementations of an image map
A graphic can be implemented as a server-side or client-side map. However, since the use of old browsers that do not support client-side maps is negligible, server-side maps are no longer necessary. In addition, creating a server-side image map requires a lot of knowledge about server-side programming. Client-side maps, however, can be created using simple HTML tags.
Client-side image map
Almost all image maps on the web nowadays are client-side image maps. Client-side image maps are ones that are rendered client-side in the browser. This is done through the support of the <map> and <area> HTML tags. Prior to their addition to HTML, image maps on the web had to be rendered through CGI processes.
For example, the HTML code for a client-side map might look like this:
<img src=/images/map.gif alt="Map" border="0" usemap="#map"/> <map name="Map"> <area shape="circle" coords="150,150,45" href="document1.html" alt="document 1" target="_ blank"/> <area shape="poly" coords="3,47,45,12,105,7,140,60,120,125,12,90" alt="document 2" href="document2.html" target="_ blank"/> </map>
This example creates an image map with two clickable areas; a circle and a polygon. The values of the coordinates (coords) depend on the shape of the clickable areas.
The <area> tag of HTML image maps requires a set of coordinates that become the boundary box of a clickable element on an image map. The <area> tag supports three different shapes natively: rectangle, circle, and polygon.
rect - definition of rectangular areas
A rectangle shape requires four coordinates, one for each of the corners of the rectangle. This is a basic shape and covers a good portion of use cases. Rectangle shapes are easy to create and work well across all devices.
An example of a rectangle area inside a <map> tag is:
<area shape="rect" coords="15,35,250,365" alt="Rectangular shape" href="rectangle.html">
The pattern for the coordinates is x1,y1,x2,y2. The top left corner of the image map is considered to be 0,0.
circle - definition of a circle
A circle shape requires three coordinates and creates a circular clickable element. This could be used on an image of the solar system to create clickable links for each planet, as an example.
An example of a circle area inside a <map> tag is:
<area shape="circle" coords="90,58,3" alt="Circular shape" href="circle.html">
The pattern for the coordinates is x,y,radius. The x,y coordinates specify the center of the circle.
poly - Definition of a polygon
Polygon shapes allow for more complex geometry to be made into clickable elements. This takes much the same format as the rectangle, but instead of 2 sets of coordinates, it repeats ad infinitum. Each coordinate represents a node, which are linked together with the resulting inner space made into a clickable element. Polygon shapes can be used to create very intricate shapes for links.
An example of a triangular area created using the polygon shape inside a <map> tag is:
<area shape="polygon" coords="193,39 161,91 226,91 193,39" alt="Triangular area" href="triangle.html">
Advantages and disadvantages of an image map
Image maps are a good way to create more interactive elements on the web. The HTML <map> and <area> elements are widely supported, and they work in every major browser. They enable you to create various interactive areas within a single image, instead of forcing developers to break up one image and load various smaller images.
Unfortunately, since <area> tags take coordinates in fixed pixel units, image maps are not responsive by default. This means that they will not work across both smaller and larger devices, like PCs and smartphones. There are several potential solutions to this issue.