The `<map>` tag is an HTML element that is used to define clickable areas within an image. It is commonly used with the `<img>` tag to create an image map. When a user clicks on a defined area of the image map, they will be redirected to a specific URL or perform a specific action.
In this tutorial, we will explore the `<map>` tag in more detail and learn how to use it to create an image map.
Syntax
The `<map>` tag is used in combination with the `<img>` tag to define clickable areas within an image. Here is an example of the syntax for the `<map>` tag:
<img src=”example.jpg” usemap=”#example-map”>
<map name=”example-map”>
<area shape=”rect” coords=”0,0,100,100″ href=”http://example.com”>
</map>
In the above example, we have defined an image called “example.jpg” using the `<img>` tag. We have also defined a `<map>` tag with the name “example-map”. Within the `<map>` tag, we have defined an area with the shape “rect” and coordinates “0,0,100,100”. This area will be clickable and will redirect the user to the URL “http://example.com” when clicked.
Attributes
The `<map>` tag has the following attributes:
– `name`: This attribute is required and is used to give the map a name that can be referenced by the `<img>` tag.
– `id`: This attribute is optional and is used to give the map a unique ID for CSS styling and JavaScript purposes.
The `area` tag
Within the `<map>` tag, we use the `<area>` tag to define clickable areas within the image map. The `<area>` tag has the following attributes:
– `shape`: This attribute is required and specifies the shape of the clickable area. The possible values are `rect` (rectangle), `circle`, and `poly` (polygon).
– `coords`: This attribute is required and specifies the coordinates of the clickable area. The format of the coordinates will depend on the shape of the area. For example, for a rectangle, the coordinates would be `x1,y1,x2,y2`, where `x1` and `y1` are the coordinates of the top-left corner of the rectangle and `x2` and `y2` are the coordinates of the bottom-right corner.
– `href`: This attribute is required and specifies the URL that the user will be redirected to when they click on the area.
– `target`: This attribute is optional and specifies where the URL should be opened. The possible values are `_self` (default, opens in the same window), `_blank` (opens in a new window), `_parent` (opens in the parent frame), and `_top` (opens in the full body of the window).
Creating an image map
To create an image map using the `<map>` tag, follow these steps:
1. Create an image that you want to use as the base for the image map.
2. Add the `<img>` tag to your HTML and specify the `src` attribute with the URL of your image.
3. Add the `<map>` tag to your HTML and give it a name that can be referenced by the `<img>` tag.
4. Within the `<map>` tag, add one or more `<area>` tags to define clickable areas within the image map.
5. Specify the shape, coordinates, href, and target attributes for each `<area>` tag as required.
Here is an example of an image map created using the `<map>` tag:
<img src=”example.jpg” usemap=”#example-map”>
