HTML – images map
HTML image maps allow you to produce clickable dimensions on an image.
Using the HTML <map> tag with <area> tag, a client-side image map can be created.
Usually, an image map consists of an image with areas that can be clicked. When you click on an image, it opens to a new or provided destination.
There can be more than one <area> element within the <map> tag, according to the area’s coordinates and type.
This allows you to link any part of the image to other documents without dividing it.
Image Map Syntax
<img src=”” alt=”’ usemap=”#name_value”>
<map name=”name_value”>
<area shape=”” coords=”” href=”” alt=”’>
<area shape=”” coords=”” href=”” alt=”’>
</map>
Image Maps
Using the HTML <map> tag, we can define an image map. The image map is a picture that contains clickable areas. An area is defined by one or more <area> tags.
Below is an image of a computer and a cup of coffee: Click on the computer or the cup of coffee and see what happens:
The HTML source code for the above HTML images map is as follows:
Example
How Html Images Map Works?
Image maps are intended to permit you to conduct various actions based on where you click inside the image.
Images and HTML codes representing clickable areas are required to construct an image map OR HTML image maps.
The Image
An image is inserted utilizing the <img> tag.
You must add a usemap attribute to the image in order to make it different from other images:
To make an association between an image and a map, the usemap value begins with a hashtag # followed by the name of the map.
Any image can be used as an Html images map!
How To Create a Image Map?
Place an <map> element into an HTML images map.
The <map> element is used to make image maps, and the name attribute connects it to the associated image:
It is mandatory that the name attribute be the same value as the usemap attribute of an <img> tag.
The Areas
After that, add the clickable areas.
Clickable areas are specified using the <area> element.
Shape
Here are some options for defining the clickable area:
- Rectangles are determined by rect.
- The circle represents a circular area.
- A polygonal region is described by poly.
- Default – characterizes the entire region.
For the clickable area to be positioned on the image, you must specify some coordinates.
Shape=”rect”
Shape=”rect” has two coordinates, one for the x-axis and one for the y-axis.
In this case, 34,44 lies 82 pixels from the left margin and 76 pixels from the top:
Coordinates (270,350) are 385 pixels in from the left edge and 310 pixels up from the top:
With this data, we can construct a rectangular clickable area when it comes to HTML image maps:
Example
The following area marked in green becomes a clickable and will take the user to “computer.htm”:
Shape=”circle”
To add a circle dimensions, first get the circle’s center coordinates: (337,300)
Next, set the circle’s radius: 44 pixels.
The data is now sufficient for constructing a clickable circular area:
Example
In this area, the user will click and be taken to the web page “coffee.htm”:
Shape=”poly”
A polygon is created by the intersection of several coordinate points (the shape=”poly”).
You can utilize this to make any shape you want. It might look like a croissant!
What is the proper way to make croissants?
In the picture below, we will make croissants and a clickable area w.hen it comes to HTML image maps
A croissant’s x and y coordinates must be found for all edges:
There are two axes, one for the x-axis and one for the y-axis, which is as follows:
Example
Area with the green color becomes clickable and takes the user to “croissant.htm”:
Here is another example of the image map:
Example:
Image Map Background Stylilng
Images used with Map can also be styled with the CSS properties.See example below:
Example:
Image Map and JavaScript
When we talk about HTML image maps, a JavaScript click event to the <area> element to execute a JavaScript function:
Whenever the area is clicked, we execute a JavaScript function using the onclick attribute.
Example
Chapter Summary
- Construct an image map using the HTML map> element.
- Utilize the HTML <area> element to determine the clickable areas in the image map.
- An image map can be pointed to using the HTML usemap attribute.
HTML Image Tags
| Tag | Overview |
|---|---|
| <img> | Creates an image. |
| <map> | Makes an image map by defining it. |
| <area> | Creates a clickable area within an image map. |
| <picture> | Multiple images can be contained within this container. |
You can find a comprehensive index of all HTML tags on our HTML Tag Reference page.
