Certified HTML Designer Learning Resources Image Maps

Learning Resources
 

Image Maps

In HTML and XHTML, an image map is a technique that allows different parts of an image to link to various destinations. This is useful when you want to create a clickable map or image where different regions lead to different web pages or resources. For instance, a map of the world could have each country hyperlinked to a page with more information about that country.


Creating an Image Map

To create an image map, you use the <img> tag to embed the image and the <map> tag to define the clickable areas of the image. The usemap attribute in the <img> tag specifies which image map to use, and the <map> tag contains one or more <area> tags that define the clickable regions.


Here’s a step-by-step guide on how to create an image map:

  • Embed the Image: Use the <img> tag to embed the image into your HTML page. Add the usemap attribute to link the image to an image map.
  • Define the Image Map: Use the <map> tag to define the image map. Inside the <map> tag, use one or more <area> tags to define the clickable areas and their corresponding links.


Example

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Image Map Example</title>

</head>

<body>

    <h1>Clickable Map Example</h1>

    <img src="world-map.jpg" alt="World Map" usemap="#worldmap">


    <map name="worldmap">

        <!-- Define a rectangular area -->

        <area shape="rect" coords="9,372,66,397" href="https://en.wikipedia.org/wiki/England" alt="England">


        <!-- Define a circular area -->

        <area shape="circle" coords="150,150,50" href="https://en.wikipedia.org/wiki/France" alt="France">


        <!-- Define a polygonal area -->

        <area shape="poly" coords="200,200,250,250,200,300,150,250" href="https://en.wikipedia.org/wiki/Spain" alt="Spain">

    </map>


    <p>Click on different regions of the map to learn more about each country.</p>

</body>

</html>


Explanation

  • <img> Tag: The src attribute specifies the path to the image file (world-map.jpg). The usemap attribute links to the image map by specifying its name (#worldmap).
  • <map> Tag: The name attribute gives the image map a unique identifier (worldmap).
  • <area> Tag: Defines clickable areas within the image map.
    • shape Attribute: Specifies the shape of the clickable area. Common shapes are rect (rectangle), circle, and poly (polygon).
    • coords Attribute: Defines the coordinates of the clickable area. For rectangles, it’s the coordinates of the top-left and bottom-right corners; for circles, it’s the center and radius; for polygons, it’s a list of vertex coordinates.
    • href Attribute: Specifies the URL to navigate to when the area is clicked.
    • alt Attribute: Provides alternative text for the clickable area, improving accessibility.


By using image maps, you can create interactive and engaging images where different parts serve different functions, without needing to split the image into multiple files.

 For Support