View video tutorial

HTML Image Map

HTML

HTML image map allows to create clickable area on a image.

HTML Image map


Using image map user can click on a particular area in the image to open new link.

Any area can be created like rectangle, circle, polygon etc. for Image Map.

Use href attribute to create hyperlink for the image area.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example: HTML Image Map

Laptop Cup Note

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Image Map</title>
    <meta charset="utf-8" />
</head>
<body>
    <h3>Example: HTML Image Map</h3>
    <div>
        <img src="workplace2.png" usemap="#image-map">
        <map name="image-map">
            <area target="_blank" alt="Laptop" title="Laptop" href="#" coords="180,0,394,161" shape="rect">
            <area target="_blank" alt="Cup" title="Cup" href="#" coords="69,8,63,10,59,14,56,21,53,
26,50,33,50,40,53,47,57,53,62,59,68,62,75,64,83,65,90,64,98,60,105,56,111,52,118,48,132,55,137,49,122,42,
122,34,122,26,119,19,112,11,105,6,96,4,86,5,77,6" shape="poly">
            <area target="_blank" alt="Note" title="Note" href="#" coords="3,111,138,85,170,247,30,276" shape="poly">
        </map>
    </div>
</body>
</html>
Try it Now »

Click on the "See output" button to see how it works.