Image Map
Contents
Definition
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">
Creating an image map using javascript
As an HTML element that resides within the DOM, image maps can also be manipulated with javascript. They can be assigned ID and <class> attributes, which work with javascript selectors, and they also support onMouseOver and onMouseOut events, which enable you to include javascript functions.
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.
There are javascript plugins that developers can add to projects that help image maps become more responsive. Developers could also choose to create several unique maps for different major screen resolutions and only show the relevant one to the user and hide the others. A problem with this approach is that it adds overhead to a project either way.
An alternative method, and one increasingly favored by developers, is to use SVGs to create image maps. SVGs are vector images, which means they are natively responsive and work well across many different resolutions by default. They are also generated by code, and each element in an SVG image can be referenced in code, such as javascript. In addition to this, SVGs also support more advanced features than HTML maps - each unique element can be animated, moved, and is generally much more flexible. Developers can change interactivity, shapes, colors, and more programmatically with SVGs.
Related links
- https://www.lifewire.com/pros-cons-image-maps-3468676
- https://eager.io/blog/a-quick-history-of-image-maps/
Similar articles
| About the author |
 |