HTML Image Map

An image map allows different areas of an image to have different links.

Image Map Tags

<img src="map.jpg" alt="Map" usemap="#campus">

<map name="campus">
    <area shape="rect" coords="0,0,100,100" href="building1.html" alt="Building 1">
    <area shape="circle" coords="150,150,50" href="building2.html" alt="Building 2">
    <area shape="poly" coords="200,0,250,100,200,100" href="building3.html" alt="Building 3">
</map>

Shape Attributes

Rect (Rectangle)

<area shape="rect" coords="x1,y1,x2,y2" href="link.html">

Circle

<area shape="circle" coords="x,y,radius" href="link.html">

Poly (Polygon)

<area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="link.html">

Case Study: Interactive Campus Map

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Campus Map</title>
    <style>
        .map-container {
            position: relative;
            display: inline-block;
        }

        .map-container img {
            width: 800px;
            height: auto;
        }

        .tooltip {
            position: absolute;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            display: none;
        }
    </style>
</head>
<body>
    <h1>Interactive Campus Map</h1>
    <p>Click on a building to see more information.</p>

    <div class="map-container">
        <img src="campus-map.jpg" alt="Technology University Campus Map" usemap="#campus">

        <map name="campus">
            <area shape="rect" coords="50,50,200,150" href="admin-building.html" alt="Administration Building" title="Administration Building">
            <area shape="rect" coords="250,50,400,150" href="engineering-building.html" alt="Engineering Building" title="Engineering Building">
            <area shape="rect" coords="450,50,600,150" href="library.html" alt="Library" title="Library">
            <area shape="circle" coords="200,250,80" href="field.html" alt="Field" title="Main Field">
            <area shape="rect" coords="350,200,550,300" href="computer-lab.html" alt="Computer Lab" title="Computer Laboratory">
        </map>
    </div>

    <div>
        <h2>Legend</h2>
        <ul>
            <li>Administration Building: Administrative service center</li>
            <li>Engineering Building: Faculty of Engineering</li>
            <li>Library: Learning resource center</li>
            <li>Field: Sports area</li>
            <li>Computer Lab: Computer laboratory</li>
        </ul>
    </div>
</body>
</html>

Everyday Case Study

Case: A developer needs to create visual navigation.

<img src="dashboard.jpg" alt="Dashboard" usemap="#dashboard">

<map name="dashboard">
    <area shape="rect" coords="0,0,200,100" href="students.html" alt="Students Menu">
    <area shape="rect" coords="200,0,400,100" href="lecturers.html" alt="Lecturers Menu">
    <area shape="rect" coords="400,0,600,100" href="schedule.html" alt="Schedule Menu">
    <area shape="rect" coords="0,100,200,200" href="grades.html" alt="Grades Menu">
    <area shape="rect" coords="200,100,400,200" href="finance.html" alt="Finance Menu">
</map>

Alternative: CSS Image Map

<style>
    .image-map {
        position: relative;
        display: inline-block;
    }

    .image-map img {
        width: 100%;
    }

    .hotspot {
        position: absolute;
        background: rgba(59, 130, 246, 0.5);
        border: 2px solid #3b82f6;
        cursor: pointer;
    }

    .hotspot:hover {
        background: rgba(59, 130, 246, 0.8);
    }
</style>

<div class="image-map">
    <img src="map.jpg" alt="Campus Map">
    <a href="building1.html" class="hotspot" style="left: 50px; top: 50px; width: 150px; height: 100px;"></a>
    <a href="building2.html" class="hotspot" style="left: 250px; top: 50px; width: 150px; height: 100px;"></a>
</div>

Best Practices

1. Use alt text: For accessibility
2. Title attribute: For tooltips
3. Responsive: Make sure the image map is responsive
4. Alternative: Use CSS for mobile
5. Testing: Test all clickable areas

Summary

Image maps are useful for visual navigation. For mobile, consider using CSS alternatives.