askvity

What is client-side image mapping in HTML?

Published in HTML Image Mapping 3 mins read

Client-side image mapping in HTML allows you to create clickable areas on an image, where different areas of the image link to different URLs, all processed by the user's browser.

Explanation

Image mapping provides a way to make different regions of a single image act as hyperlinks. There are two types of image mapping: client-side and server-side. Client-side image maps are processed entirely within the user's web browser. This contrasts with server-side image maps, where the coordinates of the click are sent to the server for processing. Client-side image maps are generally preferred because they are faster and require less server resources.

How Client-Side Image Maps Work

Here's how client-side image mapping is implemented in HTML:

  1. The <img> Tag: The <img> tag displays the image. The crucial attribute for client-side image mapping is the usemap attribute. The value of the usemap attribute is a hash symbol (#) followed by the name of the <map> element that defines the image map.
  2. The <map> Tag: The <map> tag defines the image map. It has a name attribute that corresponds to the usemap attribute in the <img> tag. This connects the image with its mapping.
  3. The <area> Tag: The <area> tags are nested within the <map> tag. Each <area> tag defines a clickable region on the image. Key attributes of the <area> tag include:
    • shape: Specifies the shape of the clickable region (e.g., rect, circle, poly).
    • coords: Specifies the coordinates of the shape. The meaning of these coordinates depends on the shape.
    • href: Specifies the URL that the region links to.
    • alt: Specifies alternative text for the link, important for accessibility.

Example

<img src="planets.gif" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126"  href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

In this example:

  • The image planets.gif will have clickable areas defined by the <map> with name="planetmap".
  • A rectangle from coordinates (0,0) to (82,126) links to sun.htm.
  • Two circles are defined to link to mercur.htm and venus.htm.

Advantages of Client-Side Image Mapping

  • Faster response: The linking information is processed by the client's browser, so there is no need to send data to the server for processing.
  • Reduced server load: Client-side image maps reduce server load, as all of the processing happens client-side.
  • Better user experience: Faster processing translates to a more responsive user experience.

Disadvantages

  • Complexity: Defining the coordinates for complex shapes, particularly polygons, can be tedious.
  • Maintenance: If the image changes, the coordinates may need to be updated.

Related Articles