HTML ismap Attribute

Introduction

The ismap attribute is associated with the <img> element when that image sits inside an <a> link. It turns the image into a server-side image map: when the user clicks, the browser sends the x and y pixel coordinates to the server URL, and server-side logic decides which page to load. This is a legacy pattern—most modern sites use client-side <map> and usemap instead.

What You’ll Learn

Purpose of ismap

The primary purpose of the ismap attribute is to signal that an image inside a hyperlink should be treated as a server-side image map. Instead of navigating directly to the anchor’s href, a click appends the pointer coordinates (relative to the image) so the server can map that point to a destination—for example, different rooms on a floor plan diagram.

The clickable regions are not defined in HTML when using ismap. The server script (historically a CGI program) interprets coordinates and returns the appropriate response or redirect.

📝 Syntax

Place ismap on an <img> that is a descendant of an <a href="..."> element:

<a href="/cgi-bin/map-handler">
  <img src="floorplan.png" alt="Office floor plan" ismap>
</a>

Syntax Rules

• Valid only on <img> elements that are inside an <a> with an href.
• Boolean attribute—write ismap or ismap="ismap"; presence enables server-side behavior.
• The anchor’s href is the server endpoint that receives coordinate data.
• Always include descriptive alt text on the image for accessibility.
• Do not confuse with usemap, which references a client-side <map> element.
• Server must be configured to parse coordinates and respond with the correct link or content.

💎 Values

The ismap attribute is a boolean attribute. It does not take a meaningful string value—its presence alone activates server-side image map mode:

• ismap — Attribute present: image map enabled (true).
• Attribute absent — Normal link behavior: click follows href without sending coordinates.
• ismap="ismap" — XHTML-style boolean syntax; same effect as bare ismap.

In JavaScript, the corresponding property is isMap (camelCase) on the image element:

document.querySelector("img").isMap = true;

Applicable Elements

ismap vs usemap

Examples Gallery

Server-side ismap markup, a modern client-side map alternative, and toggling isMap with JavaScript.

👀 Live Preview

Client-side clickable regions (the modern pattern most tutorials should emulate):

This preview uses usemap (client-side), not ismap. Each <area> defines a clickable zone in HTML.

Example — Server-Side Image Map

Let’s look at a simple example of how to use the ismap attribute:

ismap.html

Copy

<a href="/map-handler">
  <img src="example.jpg" alt="Example Image" ismap>
</a>

View Output Try It Yourself

📤 Output:

When the user clicks at pixel (42, 18) on the image, the browser may request /map-handler?42,18 (exact format varies by browser). The server decides the destination from those coordinates.

How It Works

The ismap attribute on the <img> tells the browser to append click coordinates to the anchor URL instead of navigating to a fixed page. The image must be inside the <a> element.

Example — Modern Client-Side Map (usemap)

For most new projects, define clickable regions in HTML instead of relying on server-side coordinate handling:

usemap.html

Copy

<img src="diagram.png" alt="Solar system" usemap="#planet-map">

<map name="planet-map">
  <area shape="rect" coords="0,0,82,126" href="earth.html" alt="Earth">
  <area shape="circle" coords="200,60,40" href="mars.html" alt="Mars">
</map>

View Output Try It Yourself

📤 Output:

Each <area> defines a shape (rect, circle, poly) with coords and its own href. No server coordinate parsing is required.

How It Works

This is not ismap. The usemap attribute links the image to a <map> element. Browsers handle hit-testing locally—a clearer, more maintainable approach for interactive diagrams.

Dynamic Values with JavaScript

Toggle server-side map behavior with the isMap property. Note: useMap is a separate property for client-side maps:

dynamic-ismap.html

Copy

<a href="/map-handler">
  <img id="interactiveImage" src="map.png" alt="Map">
</a>

<script>
  document.getElementById("interactiveImage").isMap = true;
</script>

View Output Try It Yourself

📤 Output:

Setting isMap = true enables server-side coordinate sending. To use a client-side map instead, set img.useMap = "#myMap" and define <map name="myMap">—that is a different feature from ismap.

How It Works

The DOM property isMap mirrors the ismap content attribute. The old reference sometimes mixed in useMap; that property attaches client-side <map> data and does not send coordinates to the server.

♿ Accessibility

• Provide meaningful alt text — Describe the image content for users who cannot see it.
• Use alt on each <area> — For client-side maps, every region needs descriptive alternative text.
• Server-side maps are hard for keyboard users — Coordinate-based clicks rely on precise pointer input; prefer client-side maps or standard links when possible.
• Offer non-image navigation — Provide a text list of the same destinations alongside complex image maps.
• Test with screen readers — Ensure interactive regions are announced clearly when using area elements.

💡 Best Practices