SOP 7 :

Navigation on an image using Client side image Mapping in web page using html 5.

Create a webpage named imagemap. html with an inserted image having jpeg, png or gif extension. Create 3 different shapes (like rectangle, circle and polygon) which do not overlap. Note the co-ordinates making use of Ms-Paint/GIMP/IrfanView/Pinta. Each shape should be mapped or navigate with a different URL that should navigate to a local webpage.

Code :


<!Doctype HTML>
<HTML>
<head>
<title>SOP7</title> 
</head>
<Body>
<Img src="IMAGE.jpg" usemap="#imagemap" alt="Image of Tulip" >
<map name="imagemap" >
<area href="www.google.com" shape="rect" coords="0,0,93,65" alt="google site"/>
<area href="www.yahoo.com" shape="circle" coords="118,140 ,40" alt=" great wall of china"/>
<area href="www.DuckDuckGo.com" shape="poly"coords ="145,187,198,215,245,280,305" alt="maharashtra stateboard site"/>
</map>
</Body>
</html>