Home Tutorials HTML Tutorial Image Map
Image Map

Image Map


51. Image Map

An image map defines clickable regions within an image using <map> and <area>. It is commonly taught as an intermediate or advanced HTML topic.

Syntax

<img src="planets.jpg" usemap="#planetmap">
<map name="planetmap">
    <area shape="rect" coords="0,0,100,100" href="page.html">
</map>

Example

<img src="campus.jpg" usemap="#campusmap" alt="Campus Map">
<map name="campusmap">
    <area shape="rect" coords="34,44,270,150" href="library.html" alt="Library">
</map>

Output

The image appears, and clicking the mapped region opens the linked page.
Example

🏋️ Test Yourself With Exercises

Take our quiz on Image Map to test your knowledge.

Browse Quizzes »