- Attribute of
- HTML Tags Guide To Adding Images To Your Web Documents
- What does
- 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.
<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
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>
Rarely Used, but Still Available
Browser Support for ismap