An image map with clickable regions:-
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:375px;height:375px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:375px;height:375px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>
OUTPUT:-
- The <map> tag defines an image-map. An image-map is an image with clickable areas.
- The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
- The <map> element contains a number of <area> tags, that define the clickable areas in the image-map.
No comments:
Post a Comment