Image Maps in HTML
Image mapping is useful for creating interactive graphics, maps, and other visual aids. It allows you to provide a more engaging and interactive user experience for your website visitors.
What is Image Mapping
Image mapping is a technique used in HTML to create clickable regions on an image. With image mapping, you can define specific areas of an image that will act as links to other web pages or resources. These areas can be defined as different shapes, such as rectangles, circles, or polygons, and can be assigned different link destinations or actions.
To create an image map in HTML, you need to use the <map> and <area> tags. The <map> tag defines the map element and the <area> tags define the clickable areas and their corresponding links or actions.
Image mapping has some accessibility concerns, as it can be difficult for visually impaired users to navigate and understand. As a result, it's important to provide alternative text for the clickable areas and ensure that the image map is labeled clearly for users who rely on assistive technology.
How do you create an image map in HTML?
To create an image map in HTML, you need to use the <map> and <area> tags. Following is an example of how to create a basic image map:
Browser View
In this example, first include an image with the "src" and "alt" attributes set as usual. The "usemap" attribute is set to "#examplemap", which refers to the name of the map element that will define next.
Then define the map element using the <map> tag and give it a name of "examplemap". Inside the map element, define three clickable areas using the <area> tag. Each area has a specific shape defined using the "shape" attribute ("rect", "circle", or "poly") and specific coordinates defined using the "coords" attribute. Also specify the link destination for each area using the "href" attribute.
In this example, the first area is a rectangular shape with coordinates of "0,0,100,100" and links to "https://example.com". The second area is a circular shape with center coordinates of "150,150" and a radius of "50", and links to "https://example.org". The third area is a polygonal shape with coordinates of "200,0,300,100,200,200,100,100" and links to "https://example.net".
With this HTML code, we have created a basic image map with three clickable areas on an image. You can adjust the shape and coordinates of each area, as well as the link destination, to suit your needs.
Different types of shapes that can be used in an image map?
There are several shapes that can be used in an image map:
- Rectangular: This shape is defined using the "rect" value for the "shape" attribute and the coordinates of the top-left and bottom-right corners of the rectangle, separated by commas. For example, "coords="0,0,100,100"" would define a rectangular shape with a top-left corner at (0,0) and a bottom-right corner at (100,100).
- Circular: This shape is defined using the "circle" value for the "shape" attribute and the coordinates of the center of the circle and its radius, separated by commas. For example, "coords="150,150,50"" would define a circular shape with a center at (150,150) and a radius of 50.
- Polygonal: This shape is defined using the "poly" value for the "shape" attribute and the coordinates of the vertices of the polygon, separated by commas. For example, "coords="200,0,300,100,200,200,100,100"" would define a polygonal shape with vertices at (200,0), (300,100), (200,200), and (100,100).
- Default: If no shape is specified, the area will be treated as a rectangular shape by default, with the coordinates of the top-left and bottom-right corners of the rectangle defined using the "coords" attribute.
These shapes can be combined to create more complex image maps with multiple clickable areas of different shapes and sizes.
Specify the coordinates for an image map
To specify the coordinates for an image map, you need to use the "coords" attribute for each clickable area within the image. The coordinates are different for each shape used in the image map.
Following is an example of how to specify the coordinates for a rectangular shape:
Browser View
In this example, an image with two clickable areas, each defined as a rectangular shape using the "rect" value for the "shape" attribute. The "coords" attribute for the first area specifies the coordinates of the top-left and bottom-right corners of the rectangle as "0,0,100,100", and the "coords" attribute for the second area specifies the coordinates as "100,0,200,100". These coordinates define the position and size of the clickable areas within the image.
Similarly, you can specify the coordinates for circular and polygonal shapes by using the "circle" and "poly" values for the "shape" attribute, respectively. The "coords" attribute for circular shapes requires the coordinates of the center and radius of the circle, while the "coords" attribute for polygonal shapes requires the coordinates of the vertices of the polygon.
Add a tooltip to an image map area
To add a tooltip to an image map area, you can use the "title" attribute within the "area" tag. The "title" attribute specifies the text that will appear as a tooltip when the user hovers over the clickable area.
Following is an example of how to add a tooltip to an image map area:
Browser View
In this example, an image with two clickable areas defined as rectangular shapes using the "rect" value for the "shape" attribute. The "title" attribute for the first area specifies the tooltip text as "Click here to go to page 1", and the "title" attribute for the second area specifies the tooltip text as "Click here to go to page 2". When the user hovers over each area, the specified tooltip text will appear.
Specify the target of an image map link?
To specify the target of an image map link, you can use the "target" attribute within the "area" tag. The "target" attribute specifies the name of the frame or window where the linked document will be displayed when the user clicks on the clickable area.
Following is an example of how to specify the target of an image map link:
Browser View
In this example, an image with two clickable areas defined as rectangular shapes using the "rect" value for the "shape" attribute. The "target" attribute for the first area specifies that the linked document should be displayed in a new browser window using the "_blank" value. The "target" attribute for the second area specifies that the linked document should be displayed in the same frame or window where the image map is located using the "_self" value. You can also use other values for the "target" attribute to specify the name of a specific frame or window where the linked document should be displayed.
Can an image map be responsive?
An image map can be made responsive using CSS or JavaScript. Here are two common approaches to making an image map responsive:
Use percentage values for the "coords" attribute:
When defining the clickable areas in the image map, you can use percentage values for the "coords" attribute instead of absolute pixel values. This way, the clickable areas will adjust their size and position relative to the size of the image as the image resizes. However, this approach does not work well for irregular shapes.
Use JavaScript or CSS to adjust the clickable areas:
Another approach is to use JavaScript or CSS to adjust the size and position of the clickable areas when the image is resized. This can be done by detecting the size of the image and then dynamically changing the values of the "coords" attribute for each clickable area. This approach works well for irregular shapes and can be more precise than using percentage values.
Both of these approaches require some extra coding and may not work for all situations, but they can help make an image map more responsive and adaptable to different screen sizes.
Following is an example of how to create a responsive image map using CSS:
In this example, first set the width of the image to 100% to make it responsive. Then define the clickable areas using the "area" tag and set their size and position using CSS. Use percentage values for the size and position of the clickable areas so that they adjust their size and position relative to the size of the image as it resizes.
Define the clickable areas for a rectangle, a circle, and a polygon using different CSS classes. For the rectangle and circle, use the "rect" and "circle" values for the "shape" attribute, and for the polygon, use the "poly" value and the "clip-path" property to define its shape.
This approach makes the image map responsive and adaptable to different screen sizes, but it requires some extra coding and may not work for all situations.
Conclusion:
HTML image mapping is a technique used to divide an image into clickable regions, also known as "hotspots", by using the "map" and "area" tags to define the shape, size, and location of the clickable areas, allowing users to interact with different parts of the image.