Categories
HTML image can be use to make multiple clickable area on Image which can user different types of URLs on a single image.
An HTML image map is a technique used to divide an image into clickable areas or regions, where each region represents a hyperlink to a different URL or performs a specific action when clicked. It allows you to create interactive images with multiple clickable hotspots.
The image map functionality in HTML is achieved using the <map> and <area> elements. Here's an overview of the steps involved in creating an HTML image map:
Wrap the <img> tag with a <map> tag and give it a unique name or ID attribute:
<map name="myImageMap">
<img src="image.jpg" alt="Image" usemap="#myImageMap">
</map>
Within the <map> tag, define one or more <area> tags to define the clickable regions. Each <area> tag specifies the shape, coordinates, and other attributes of the hotspot, such as the URL to link to or an action to perform:
<map name="myImageMap">
<area shape="rect" coords="x1,y1,x2,y2" href="page1.html" alt="Area 1">
<area shape="circle" coords="x,y,radius" href="page2.html" alt="Area 2">
<area shape="poly" coords="x1,y1,x2,y2,x3,y3..." href="page3.html" alt="Area 3">
</map>
- The
shapeattribute specifies the shape of the clickable area and can be set to "rect" (rectangle), "circle" (circle), or "poly" (polygon). - The
coordsattribute defines the coordinates of the shape. The values vary depending on the shape type. For example, for a rectangle, thecoordsattribute is defined as "x1,y1,x2,y2" where (x1,y1) represents the top-left corner and (x2,y2) represents the bottom-right corner. - The
hrefattribute specifies the target URL or action to be performed when the hotspot is clicked. - The
altattribute provides alternative text for the area, similar to thealtattribute of an image.
Finally, link the <map> element to the <img> element by using the usemap attribute. The value of the usemap attribute should match the name or ID assigned to the <map> element.
<map name="myImageMap">
<!-- Define areas -->
</map>
<img src="image.jpg" alt="Image" usemap="#myImageMap">
By defining different <area> tags within the <map> element, you can create multiple clickable areas within an image, each with its own target URL or action.
HTML image maps provide a way to create interactive and engaging content, such as clickable diagrams, navigation menus, or custom user interfaces.