What is Image-map
An image map functions similarly to an image hyperlink, with the distinction that it allows for the creation of multiple hyperlinks within a single image. It consists of a graphical image containing interactive regions, enabling users to access various destinations by clicking on specific areas.
A typical illustration of an image map is a country map featuring distinct states delineated by boundaries. Clicking on a particular state region directs the user to a webpage associated with that state.
Another scenario demonstrating the utility of an image map is in educational contexts, such as explaining the anatomical features of a human, animal, or product. Each body part can be configured to link to detailed information on separate web pages.
In order to establish an image-map, the following elements are necessary:
An HTML <img> element with usemap attributes which defines a valid map name.
- HTML <map> element with name attributes whose value must be same as usemap.
- One or more <area> elements inside a <map> element which create clickable areas in an image-map.
- It provides an interactive visual element for your website.
- You can place any number of links on the single image without worrying about layout issues.
- When an irregular shaped image consists of a large number of parts then it is easy to link these parts.
- By using image processing programs such as Paintshop Pro, Photoshop, Corel Draw Painter, MS-FrontPage 2000 and Mapedit, Jimagemap, the code is generated automatically that makes the task easier and saves a lot of time and relieves the user from the burden of calculating x, y coordinates.
- Image maps works only with graphical browsers.
- An image map may take time to upload if the size is not optimized properly.
- You cannot provide appropriate mouse over for each links.
Advantages of Image maps:
Disadvantages of Image maps:
What is area tag?
The <area> tag specifies the regions within an image map that can be clicked on or interacted with, triggering actions like opening a new image or URL. It is typically paired with the <map> element to define the behavior of these clickable areas.
Inside an image map different areas can be hyperlinked to various locations using multiple <area> elements in a single <map> element. The <map> tag must define an attribute name which specifies the name of the map.
The <area> tag is specified with mandatory attributes such as shape and coords.
The shape attribute defines the form of the area that will function as a hyperlink. It dictates how the coordinates attribute will be understood by the browser. The shape attribute can take on values such as rect (for a rectangle), circ (for a circle), poly (for a polygon), with the default shape being rect, encompassing the entire region.
Syntax
<map name ="name">
<area shape = " " coords =" " href = " ">
</map>
<img src ="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" usemap ="#name">
In the above syntax, the <map> tag is in the same HTML file as that of <img> tag so value of usemap attribute is "#name". The name value specified in <map> tag should match the name specified in the value of usemap attribute in <img> tag so that map instructions apply on the graphic image. The "#" sign indicates the map file is located on the same webpage as that of mapped client side image map.
Here are some details regarding the HTML <area> element:
| Display | Block |
|---|---|
| Start tag/End tag | Only start tag(End tag forbidden) |
| Usage | Image Map |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Area tag</title>
<style>
body{
margin-left: 250px;}
</style>
</head>
<body>
<h2>Example of HTML Area tag</h2>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" usemap="#web">
<map name="web">
<area shape="rect" coords="66,117,131,168" href="html-tutorial">
<area shape="rect" coords="199,36,277,85" href="css-tutorial">
<area shape="rect" coords="330,107,406,159" href="bootstrap-tutorial">
<area shape="rect" coords="199,185,267,236" href="javascript-tutorial">
</map>
</body>
</html>
Explanation:
The points from the example given above are explained below:
- First of all select an image that you want to use as an image map, for example: png. Then got some advanced information about an image such as image size and pixel coordinates of each region within the image you want to turn into a clickable event. We divide it into four equal rectangles specified as A, B, C and D. To define each sub portion, we require top left corner and bottom right corner.
- After determining the coordinates of an image map, the <map> tag is used to create a client-side image map. It is a block element that contains a set of <area> tags, each of which defines a clickable area of image. The <map> tag must define an attribute name which specifies the name of map attribute e. web. <map name = "web">
- Next, a set of <area> tags are defined, each defining a clickable area of an image. Each <area> tag contains shape, coords, href attributes. Then the </map>, closing map tag is specified. Finally the <img> tag is used to add an image. Add the usemap attribute in the <img> tag and assign it with a value equal to that of the url of the map file(i.e. web).
Attribute:
Tag-specific attributes:
| Attribute | Value | Description |
|---|---|---|
alt |
text | An alternative text String to display on the browser if it does not display the image. |
| coords | x1,y1,x2,y2(rect) | Here(x1, y1) coordinates represents the left-top position and (x2, y2) represents the Right-bottom position of a rectangular region. |
| x,y,r(circ) | Here (x, y) represents the center of the circle and r represents the radius of the circle. | |
| x1,y1,x2,y2..xn,yn(poly) | Here each xn, yn pair represent the vertex of polygon region and n represents number of vertices. | |
href |
href | This attribute specifies the URL of the page to which the region links. The specification of the URL is same as that of href attribute in <a> tag. It determines the hyperlink destination for the active area. |
| target | _blank | Open link in a new window |
| _parent | Open link in the parent frame | |
| _self | Open link in current window | |
| _top | Open link with full width in the same window | |
| frame_name | In the frame.(Not supported in HTML5) | |
| shape | default | It defines the default area(rectangular). |
rect |
It defines the rectangular area. | |
| circle | Defines the circular area. | |
poly |
Defines the polygonal. | |
| download | filename | Defines that hyperlink, which is used for downloading the resource. |
rel |
alternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag | It defines the relationship between current and linked document. |
| hreflang | language_code | It specifies the language of the linked resource. |
type |
media_type | It specifies the MIME type of linked source.(Not supported in HTML5) |
| nohref | nohref | This attribute is optional. It specifies that the specified region has no associated link. |
| tabindex | range from 1 to 32767 | This attribute is used to set the tab sequence of hyperlinks in a webpage. |
Global attribute:
The <area> element enables the utilization of the universal attributes within HTML.
Event attribute:
The <area> element allows for the utilization of event characteristics within HTML.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<area> |
Yes | Yes | Yes | Yes | Yes |