background image

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> 
 
 

Comments:

WEB PROGRAMMING quiz

navigate_before navigate_next