10
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
19.(a).What are the image maps? Explain its types with example.[10]
Image maps
The <map> tag is used to define a client-side image-map. An image-map is an image with
clickable areas in the image, which has a link associated with it. There are two types of image maps. They
are,
i) Client side image map
ii) server side image map
i) Client side image map
With a client side image map, specify a list of areas that will be used as the links. The information
required to run the image map must be given in our html document. Since all the
Read Write information regarding the map functions are provided on the client side, it„s called client side
image map.
There are four types of these areas; rectangles, circles, polygons and default. Its down with the
help of <MAP> tag
Syntax
<map name=‖name of the map‖>
<area shape=‖name of the shape‖ cords=‖x,y,w,h‖
href=‖name of the link‖ alt=‖image‖>
</map>
Where
Name - name of the map used
Cords - x,y co-ordinates to fix the map area,
w- width of the map,
h-height of map area.
Shape - shape to be defined.
It can be rect, circle, poly
Href - url to be linked by this area
Alt - alternate message to display on the screen
Example
<html>
<body>
<img src="d:\planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map
name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="d:\sun.html">
<area shape="circle" coords="90,58,3" alt="Mercury" href="d:\mercury.html">
<area shape="circle" coords="124,58,8" alt="Venus" href="d:\venus.html">
</map>
</body>
</html>
