Home • Programming • HTML5 Aug 19th, 2014 at 12:23 PM

Image maping in HTML5

<!DOCTYPE html>
<html lang="en">
	<head>
	  <meta charset="utf-8"/>
	  <title>Area</title>
	</head>
	<body>

		<p>Click on the spacific name area:</p>

			<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
				<!-- planets.gif is image name -->

			<map name="planetmap">
			  <area shape="rect" coords="1,1,82,126" alt="Sun" href="sun.htm">
			  <!-- for Rectangler maping,
			  first 1 is start point for x-axis,
			  second 1 is start point for y-axis
			  first 82 is end point for x-axis,
			  second 126 is end point for y-axis -->
			  
			  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
			  <!-- for Circler maping,
			  first 90 is center point for x-axis basis,
			  second 58 is center point for y-axis basis
			  first 3 is redious -->
			</map>
	</body>
</html>

Image maping in HTML5

Comments 5

Share