Image Map
It is possible to make clickable portions of an image using HTML image maps.
Image Maps
An image map is defined using the HTML <map> tag. An image containing clickable regions is called an image map. One or more <area> tags are used to define the areas.
Try clicking on the phone, computer, or coffee cup in the following image:
Example
Here is the HTML source code for the image map above:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Workplace" usemap="#workmap" title="Image Map 3" data-lazy-src="workplace.jpg"><noscript><img decoding="async" src="workplace.jpg" alt="Workplace" usemap="#workmap" title="Image Map 3"></noscript>
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Cellphone" href="cellphone.htm">
<area shape="circle" coords="337,300,44" alt="Tea" href="tea.htm">
</map>
How Does it Work?
The concept underlying an image map is that, depending on where you click within the image, you need to be able to do distinct actions.
An image and some HTML code that defines the clickable sections are required to make an image map.
The Image
The <img> tag is used to insert the picture. The addition of a usemap property is the only way this image differs from others:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Workplace" usemap="#workmap" title="Image Map 3" data-lazy-src="workplace.jpg"><noscript><img decoding="async" src="workplace.jpg" alt="Workplace" usemap="#workmap" title="Image Map 3"></noscript>
The Image
The <img> tag is used to insert the picture. The addition of a usemap property is the only way this image differs from others:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Workplace" usemap="#workmap" title="Image Map 3" data-lazy-src="workplace.jpg"><noscript><img decoding="async" src="workplace.jpg" alt="Workplace" usemap="#workmap" title="Image Map 3"></noscript>
The usemap value establishes a relationship between the picture and the image map by beginning with a hash tag # and ending with the name of the image map.
Create Image Map
Add a <map> element after that.
An image map is created with the <map> element, which is connected to the image via the necessary name attribute:
<map name="workmap">
The value of the name attribute and the usemap attribute of the <img> must match.
The Areas
The Areas
Add the clickable spots after that.
An <area> element is used to establish a clickable region.
Shape
You must define the shape of the clickable area, and you can choose one of these values:
- rect – defines a rectangular region
- circle – defines a circular region
- poly – defines a polygonal region
- default – defines the entire region
To add the clickable portion to the image, you must additionally specify some coordinates.
Shape="rect"
Shape=”rect” coordinates are provided in pairs, one for the x- and one for the y-axes.
Therefore, 34 pixels from the left edge and 44 pixels from the top are where the coordinates 34,44 are located:
The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top:
We now possess sufficient information to generate a clickable rectangle:
Example
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
The user can click on this section to navigate to the “computer.htm” page:
Shape="circle"
To add a circle area, first locate the coordinates of the center of the circle:
337,300
Then specify the radius of the circle:
44 pixels
Now you have enough data to create a clickable circular area:
Example
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
The user can click on this section to navigate to the “coffee.htm” page:
Shape="poly"
When many coordinate points are included in the shape=”poly” expression, a polygon a shape comprised entirely of straight lines is produced.
You may use this to make any kind of form.
perhaps in the shape of a croissant!
How can we turn the croissant in the picture below into a link that can be clicked?
Every edge of the croissant needs to have its x and y coordinates determined:
There are two pairs of coordinates, one for the x- and one for the y-axes:
Example
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
The user can click on this section to navigate to the “croissant.htm” page:
Image Map and JavaScript
A JavaScript function can also be triggered by a clicked location.
The <area> element can have a click event added to it to run a JavaScript function:
Example
Here, we use the onclick attribute to execute a JavaScript function when the area is clicked:
<map name="workmap">
<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("You clicked the tea cup!");
}
</script>
Chapter Summary
- Use the HTML <map> element to define an image map
- Use the HTML <area> element to define the clickable areas in the image map
- Use the HTML usemap attribute of the <img> element to point to an image map
HTML Image Tags
image map
clickable image
HTML image maps
tag
tags
shape
rect
circle
poly
default
coordinates
clickable regions
image map creation
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
HTML Image Maps: Turning Images into Interactive Experiences
In the realm of web design and development, HTML image maps offer a powerful tool to transform static images into interactive elements. By defining clickable regions within an image, you can create an engaging user experience that allows visitors to navigate and interact with your content in intuitive ways.
At the core of HTML image maps are the “ and “ tags. The “ tag defines the image map, while the “ tag specifies the clickable regions within the image. These regions can be defined using various shapes, including rectangles (`rect`), circles (`circle`), and polygons (`poly`).
Each “ tag includes coordinates that define the boundaries of the clickable region. These coordinates are essential in ensuring the accuracy of the image map, allowing users to click on the intended areas and triggering the desired actions, such as navigating to a specific page or displaying additional content.
HTML image maps also support a `default` area, which serves as a catch-all for any clicks that fall outside the defined regions. This feature ensures that users can interact with the image map even if they click on an area that doesn’t have a specific assigned function.
By mastering the use of HTML image maps, web designers and developers can create engaging and interactive experiences for their users, transforming static images into dynamic, clickable interfaces that enhance the overall user experience.
HTML Image Maps: Unlocking the Power of Clickable Images
In the realm of HTML and web development, image maps offer a powerful way to create interactive and engaging user experiences. An HTML image map allows you to define specific regions within an image that can be made clickable, enabling users to navigate to different pages or trigger specific actions.
At the core of an image map is the “ tag, which serves as a container for the defined clickable regions. Within the “ tag, you can use various shape tags, such as “ for rectangles, “ for circular regions, and “ for polygonal shapes, to designate the clickable areas.
Each shape tag includes a set of coordinates that define the boundaries of the clickable region. These coordinates are essential for accurately mapping the clickable areas to the corresponding image.
Additionally, the “ tag is used within the “ to specify the link or action associated with each clickable region. This allows you to seamlessly integrate image maps with your website’s navigation and functionality.
Image maps offer a wide range of use cases, from highlighting specific products on an e-commerce website to creating interactive infographics or maps. By leveraging the power of HTML image maps, you can create visually engaging and user-friendly interfaces that enhance the overall experience for your website visitors.
