Html Image Map:
An HTML image map is an image that has different clickable areas (or elements). An ordinary image can be defined as an image map. Different graphics tools such as map edit and paint programs are used for defining an image as an image map.
You make an HTML image map by defining each of the sensitive areas of an image in the form of their ‘X’ and ‘Y’ coordinates. The ‘x’ and ‘y’ coordinates are specified in pixels. With each set of coordinates, an area is defined. This area is called html map area or hotspot. An HTML image map may contain many html map areas or hotspots. HTML image map area can be rectangles, circles or polygon. Once HTML image map area are defined, you can assign URLs of different pages to these areas of the image. when the user clicks on that area, the linked page will be opened.
Suppose an image of bowl of fruits. When you click on a banana, a web page opens and displays the number of calories in a banana. Similarly, when you click on an apple, another web page opens and displays the number of calories in an apple. So each hotspot in an image is linked to a different web page.
Html image map <map> tag:
The <map> tag is used to define a map for creating an image map. The hotspots in the image are specified between the <map> and </map> tags.
Attributes of html image <map> tags:
It is used to specify the name of the map. This name is used with usemap attribute of the <img> tag. the “usemap” attribute is used to associate an HTML image map with an image.
The html <area> tag is used between the <map> and </map> tags to define the area within the map.
Attributes of <area> tag:
The most important and commonly used attributes of <area> tag are as follows:
It is used to specify the type of shape. The specified shape is used to represent the HTML image map area. The possible values of this attribute are:
- Rect: it indicates that the shape of the HTML image map area is rectangle.
- Circle: it indicates that the shape of the HTML image map area is circle.
- Poly: it indicates that the shape of the HTML image map area is polygon. Polygon represented by three or more points.
It is used to specify the coordinates within an HTML image map that define the HTML image map area. Coordinates are measured in pixels from the top-left corner of the whole image. the cords attribute is specified along with the shape attribute. The coordinates depend on the shape specified in the shape attribute.
The coordinates for different shapes are as follows:
- Rect: coords = “x1,y1,x2,y2”
“x1, y1” defines the top-left corner of the rectangle, while “x2, y2” defines the bottom right corner of the rectangle.
- Circle: coords = “x,y,r”
“x, y” defines the center of the circle, while ‘r’ defines the radius of circle.
- Poly: coords = “x1,y1, x2,y2, x3,y3…..”
Each ‘x’ and ‘y’ pair defines the different corner of the polygon.
Example how to draw shapes In paint and export them to html using html image map tag:
In the following example, an image containing two shapes, rectangle and circle is created in paint program,
To create the image follow these steps:
- Open paint program and create an image as mentioned below
- The paint program with image is shown in above figures. The rectangle and circle are filled with black color.
- Now note the coordinates of the rectangle and circle.
To note the coordinates of left-top and right-bottom corner of rectangle follow these steps:
- Place the mouse pointer at the top-left corner of the rectangle. The x and y coordinates will appear in the status bar of the paint window.
- Note these values. In the figure below, x and y coordinates for top-left corner are 71 and 143
- Similarly, note the x and y coordinates for right-bottom corner of the rectangle. Suppose these coordinates are 364 and 234.
To note the x and y coordinates and radius of circle follow these steps:
- Place the mouse pointer at the center of the circle. The x and y coordinates will appear in the status bar of the paint window. Suppose the value for x and y coordinates are 600, 233.
- Place the mouse pointer at exactly top position or bottom position of the circle. The x and y coordinates of this point will appear in the status bar of the paint window. Suppose you place the mouse pointer at top position of the circle and the values for x and y coordinates are 601,146. Take the difference of 90( value of y taken for center the circle and 70 (value of y taken for top position of the circle) i.e. 90-70=20 . so the calculated radius of the above circle is 20.
Example how to split the image into section and when clicked on the different sections. The section refers to different web pages.
In this example, we can split the above image into a different section using an HTML image map.
First of all create mirror.html, hood.html,sidemirror.html,light.html
<h3> image map</h3>
<img src="car.png" alt="Workplace" usemap="#workmap">
<area shape="rect" coords="480,264,900,411" alt="Mirror" href="mirror.html">
<area shape="rect" coords="438, 434,780,643" alt="hood" href="hood.html">
<area shape="rect" coords="299, 338,390,399" alt="sidemirror" href="sidemirror.html">
<area shape="rect" coords="338,527,396,616" alt="light" href="light.html">
when you run this code the browser will be opened
and when you clicked on front Mirror the new page will be opened
similarly, you clicked on the side mirror
so you can split the image into different sections by using the image map.