HTML Image Map Tag Image Mapping Multiple Links On A Single Image
Chapter 7
HTML Image Map Tag Image Mapping Multiple Links On A
Single Image
The HTML <map> tag
defines an image map. An image map is an image with clickable areas. The areas
are defined with one or more <area> tags.
The required name attribute of
the <map> element is associated with the <img>
usemap attribute and creates a relationship between the image and the map.
The <map> element
contains a number of <area> elements, that defines the
clickable areas in the image map. Multiple links on a single picture.
HTML Elements Used to
Create Image Maps
There are three HTML elements used to create image maps:
·
img specifies the location of the image to
be included in the map.
·
map: is used to create
the map of clickable areas.
·
area: is used within the map element to define the clickable
areas.
Create
Image Map
The <map> element
is used to create an image map, and is linked to the image by using the
required name attribute:
<map name="workmap">
The name attribute
must have the same value as the <img>'s usemap attribute
.
The Areas
Then, add
the clickable areas.
A
clickable area is defined using an <area> element.
Shape
You must
define the shape of the clickable area, and you can choose one of these values:
rect defines a rectangular region Specifies that the clickable area is a rectangle, and that the value of coords should be interpreted as two pairs of x, y coordinates defining opposite corners of the rectangle.
circle defines a circular region Specifies
that the clickable area is a circle, and that the value of the coords attribute
should be interpreted as a set of x,y coordinates followed by a radius.
poly defines a
polygonal region Specifies that the clickable area is a free polygon, and that
the value of the coords attribute should be interpreted as a series of x,y
coordinate pairs.
default defines
the entire region Specifies that the clickable area is any portion of the image
map which is not included in another area already. Should be placed last within
the map element.
You must also define some coordinates to be able to place the clickable area onto the image.
Example 1:
<img src="demo.jpg" alt="demo" usemap="#demomap" width="400" height="379">
<map name="demomap">
<area shape="rect" coords="34,44,270,350" alt="html
programmung" href="html.htm">
<area shape="rect" coords="290,172,333,250" alt="css
programming" href="css.htm">
<area shape="circle" coords="337,300,44" alt="java
programming" href="java.htm">
</map>
Example 2:
Another
image map, with clickable areas:
<img src="propic.jpg" width="145" height="126" alt="Planets" usemap="#promap">
<map name="promap">
<area shape="rect" coords="0,0,82,126" href="html.htm" alt="html">
<area shape="circle" coords="90,58,3" href="css.htm" alt="css">
<area shape="circle" coords="124,58,8" href="java.htm" alt="java">
</map>
Post a Comment