<img ismap>

Attribute of

HTML Tags Guide To Adding Images To Your Web Documents

What does <img ismap> do?

Identifies an image as a server-side image map. When the containing anchor link is clicked, the coordinates of the mouse will be included in the request.

Code Example

<a href="#">
<img src="/wp-content/uploads/flamingo.jpg" ismap>
</a>
<p>Click on the image above and look at the address bar of your browser. The anchor link points to this page, so the page does not refresh. But the <code>ismap</code> attribute appends the location of your click to the URL.</p>

Click on the image above and look at the address bar of your browser. The anchor link points to this page, so the page does not refresh. But the ismap attribute appends the location of your click to the URL.

What is an Image Map?

An image map is a User Interface technique in which a user can click anywhere inside of an image, and the location of the click affects the outcome of the click. The idea is that clicking on different sections of the image creates different effects. For example, the image might be a map of the United States, and clicking within the borders of a particular state leads to a page about that state.

Client-side Image Maps

The typical client-side (in-browser) way of creating image maps is to use the usemap attribute to specify a collection of defined map areas.

<img src="/wp-content/uploads/flamingo.jpg" alt="" usemap="#flamingo-map" /> <map name="flamingo-map" id="flamingo-map">     <area alt="Flamingo." title="Flamingo." href="/wp-content/uploads/just-flamingo.jpg" target="_blank" shape="poly" coords="103,421,633,423,601,389,575,356,532,334,511,322,475,305,447,288,443,263,436,215,424,180,427,144,430,117,427,94,421,66,407,46,386,34,363,22,352,22,343,20,329,20,308,24,291,33,272,53,254,79,240,113,229,154,226,190,226,265,225,288,199,304,177,323,165,334,143,361" />     <area alt="Not the Flamingo." title="Not the Flamingo." href="/wp-content/uploads/no-flamingo.jpg" target="_blank" shape="poly" coords="1,5,6,418,95,418,133,361,152,335,176,312,194,298,213,286,213,231,215,192,222,156,231,118,237,97,252,68,266,46,280,30,295,23,314,20,330,18,348,16,360,16,377,20,396,32,412,39,417,46,422,53,426,63,431,74,432,84,432,93,432,108,434,124,434,138,433,150,430,167,430,174,431,182,435,193,442,203,443,223,452,283,575,348,583,352,637,417,635,4" /> </map> 

See the article about the usemap attribute for complete details about how to create client-side image maps.

Server-Side Image Maps

Client-side image maps are not practical in all situations. For one thing, they are a bit difficult to create and maintain. Also, you might want something more complicated than simply linking to a different page — you might need to process some information based on the specific coordinates clicked on. The ismap attribute enables you to do just that. When the ismap attribute is present (it takes no value), the X,Y coordinates of the mouse click are included into the HTTP request, as parameters appended to the URL. The origin (0,0) point of the image’s coordinates is the upper left corner. What you do with those coordinates is entirely up to you. You can query them against an actual image map to reproduce the client-side effect. You can simply use them as input parameters for some data-collection purpose. For example, you might use it in a survey. With server-side languages like PHP, it would be no problem to catch the X or Y value of the user’s click.

How do you feel about our services? <a href="#"> <img src"/wp-content/uploads/green-to-red.png" ismap> </a> 

How do you feel about our services?

Rarely Used, but Still Available

Image maps are not used very much anymore, and server-side image maps are particularly rare. Most developers who want a similar fuctionality turn to JavaScript, which can support much more complex user interaction. But that doesn’t mean you shouldn’t use image maps. They are still a valid part of the HTML5 specification, and are well supported in all browsers. To learn more about this under-used feature, see our Image Map Tutorial.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for ismap

All	All	All	All	All	All