Prev Next

HTML Image Maps

An image map allows you to define clickable areas on an image. By specifying shapes and coordinates, different regions of a single image can link to different pages or resources. Image maps are useful for creating interactive diagrams, navigation menus, or floor plans.

Key Topics

Defining an Image Map

Example: Use the usemap attribute on an image and define clickable areas with <map> and <area> elements.

<img src="images/TryMeYourSelf-logo-1.png" alt="Logo Map" usemap="#logomap">
<map name="logomap">
    <area shape="rect" coords="0,0,50,50" href="https://example.com" alt="Link Area">
</map>

Interactive Map Page

This example demonstrates an interactive image map. Since this is a full HTML code demonstration, it is enclosed in a copy code box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Image Map</title>
</head>
<body>
    <h1>Click the Logo Sections</h1>
    <img src="images/TryMeYourSelf-logo.png" alt="Interactive Logo" usemap="#logoMap">
    <map name="logoMap">
        <area shape="rect" coords="0,0,100,100" href="https://example.com/about" alt="About">
        <area shape="circle" coords="150,50,40" href="https://example.com/contact" alt="Contact">
    </map>
    <p>Different areas of the logo now link to different pages.</p>
</body>
</html>

Explanation: The usemap attribute ties the image to the <map> element. Each <area> defines a clickable region with coordinates and a shape. As a result, clicking different parts of the image leads users to different URLs.

Image Map in a Table

This demonstration places an image map inside a table cell, useful for complex layouts. Another full code sample is provided below.

<h2>Map in a Table</h2>
<table border="1" style="border-collapse:collapse; width:50%;">
    <tr>
        <td>
            <img src="images/TryMeYourSelf-logo-2.png" alt="Mapped Logo" usemap="#tableMap">
            <map name="tableMap">
                <area shape="rect" coords="0,0,50,50" href="https://example.com/help" alt="Help">
                <area shape="rect" coords="60,0,110,50" href="https://example.com/docs" alt="Docs">
            </map>
        </td>
        <td>Click on different areas of the logo to navigate to related pages.</td>
    </tr>
</table>

Explanation: By integrating an image map in a table layout, you can create interactive menus or dashboards embedded within structured data. Each area can direct users to different content, enhancing navigation.

Key Takeaways

  • Use usemap and <map> with <area> elements to create clickable regions within an image.
  • Define shapes (rect, circle, poly) and coordinates for precise clickable areas.
  • Image maps can turn a single image into a multi-link interface, improving interaction.
  • Incorporate image maps into various layouts, including tables, for creative navigation.
  • Always provide alt text and consider responsiveness for a better user experience.
Prev Next