JavaScript Image Map - Javascript Advanced

What is JavaScript Image Map?

Client side image maps are created by using JavaScript. They are empowered by the usemap attribute for the <img /> tag. This is done by using special <map> and<area> extension tags. The <area> element in <map> element defines the clickable areas in image map.

Using <img/> element we can insert an image in to a web page that form the map except that it carrier an extra attribute called usemap.
In order to create the relation between map and image we will use usemap attribute.
For example, if we expect the user to navigate to a particular page on clicking the image all we have to do is place the url of the page preceded by pound or hash like usemap=”url” .
This is explained in the below example.

We can also define the shape of image whether to be a circle or square or rectangle. For example, if we want the image in the shape of rectangle <area shape=”rect”/>.

The <area> element defines the coordinates and the shape that specifies the boundaries of every clickable hotspot.

We can also produce message in a text box when the user mouse hovered or taken mouse out from the image area. This is illustrated clearly in the below example.

In the output shown, if you mouse hover on the image we can see the message in text box provided and if you remove the mouse on the image the text disappears. This can be done by inserting the text to be shown inside ‘ ’ in the onmouse hover function.


Output:

In real time, when we mouse hover on a particular field (PERL,HTML,PHP), the relevent name is displayed in the box.

JavaScript Image Map Output

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Javascript Advanced Topics