The HTML specification is old and, while there is beauty in longevity, there's an inevitable build-up of boondoggles and baggage. Some elements like <marquee> have sadly been consigned to the dustbin of history - but there are still vestigial attributes just waiting to trip up the unwary.
If you're young, you may never have heard of Image Maps. Back in the bad-old-days, there weren't many good options for laying out a pixel-perfect HTML page. One option was to draw your website in an image editor, load it into a website as an image, and then make certain areas of the image clickable.
One way to do this was to add the attribute ismap. It is only valid on <img> elements which are inside an <a href=…> element. Like so:
HTML
<a href="click.php"> <img ismap src="img.png" width="100" height="100"> </a>
When you click on that image, you don't go to click.php - instead you go to click.php?12,34 where the two numbers represent the X and Y coordinates of where on the image you clicked. That's brilliant! Your server knows the size of the image - so if you click on the top half it can take you to one place, and if you click in the lower left corner you can go to another.
Brilliant!
Except, of course, there's a catch!
The specification of the <img> element is a little obtuse. Merely saying:
The ismap attribute […] indicates by its presence that the element provides access to a server-side image map. This affects how events are handled on the corresponding a element.
Instead, the details are in 4.6.2 Links created by a and area elements:
set x to the distance in CSS pixels from the left edge of the image to the location of the click, and set y to the distance in CSS pixels from the top edge of the image to the location of the click.
Did you notice the gotcha?
the distance in CSS pixels
This is not based on the actual size of the image! It is based on the layout
Let's suppose you have an image which is 100 x 100 pixels. It is added to the website like this:
<img src="100.png" width="100" height="100" ismap>
Click on this image and you'll see that your X and Y positions are based on the natural size of the image.
But suppose you change the HTML to this:
<img src="100.png" width="500" height="20" ismap>
When you click on the image, the X & Y positions are not based on the actual size of the image; they're based on its layout size.
Suppose you use CSS to resize the image:
<img src="100.png" width="100" height="100" ismap style="width:7em;height:30ch">
The X and Y aren't based on the image's natural size, nor their declared height and width. Instead they're based on the size on screen determined by CSS.
And, of course, that's not necessarily your CSS! If the user has turned off style sheets, supplied their own, or uses an accessibility tool - the CSS size of the image might be vastly different from what you intended.
If you have an image 100 pixels wide and you want people clicking on the left half to go to a different location to the people clicking on the right half, you might have server-side code which says:
if X < 50 : return page1.html else return page2.html
But if the CSS has stretched, shrunk, skewed, or distorted the image then you have no way of knowing where the user clicked.
As far as I can tell, this behaviour is the same in all major browsers.
Basically, what I'm saying is, don't use ismap unless you're absolutely sure that there will be no CSS shenanigans. Even then, it probably isn't worth the risk.
12 thoughts on “Esoteric HTML - ismap vs CSS”
@Edent I loved image maps back in the day. I built a visual CYOA game in the style of Fallout 1&2’s maps and dialogue screens.
It was the pure HTML <map> and <area> version, though. I don’t think my web host at the time did much more than pre-provided cgi-bin Perl scripts.
| Reply to original comment on mikecoats.social
Wow, that's a bit headfuckey. Also: a major blast from the past 😅
| Reply to original comment on bsky.app
Gosh, I remember using ismap to make very low fidelity clickable prototypes back in the early-ish 2000s from edited screenshots using my treasured copy of Photoshop 6 (last one before annual subscriptions). Still have Photoshop 6, haven’t done ismap in 20 years.
| Reply to original comment on bsky.app
FixMyStreet still uses input type=image to allow non-JavaScript map clicks 🙂 Not sure if that’s CSS pixels or not, but think it’s okay
| Reply to original comment on bsky.app
Thanks for sharing! I'm going to experiment with it.
| Reply to original comment on bsky.app
6 years ago I had a client that needed/wanted an image map on their frontpage to make different sections of their graphic artist's design clickable. Making it responsive to JS. Once achieved it was a breeze but just the initial thinking of the thing was crazy.
@Edent some of these gotchas can be worked around by making it client side with a load of <area>s inside a <map> but <area> remains one of the few elements you can’t style AT ALL which is a bit sad.
Until about 5 years ago I was still using this stuff for one thing, but that’s gone over to webgl and a canvas now 🙁
| Reply to original comment on mastodon.online
Ah, image mapping. I used those to make toolbars for CWRU back in the day (as seen on https://meyerweb.com/eric/cwru/mst3keg/mst3kf.html).
Also, a note of amusement: your
came through my Feedle CSS feed unencoded, and thus to my RSS reader (NetNewsWire 7), which means the “have sadly been consigned to the dustbin of history - but there are still vestigial attributes just waiting to trip up the unwary. If you're young, you may never have heard of Image Maps. Ba...” part of the content preview merrily marquees away, over and over. Video capture gladly furnished on demand!Oh wow, TIL. I wasn’t aware of ismap. I thought for a second this was referring to the old <map> attribute which seems to be doing something simila?
| Reply to original comment on bsky.app
Half a dozen people have now told me that this post broke their RSS reader 😳
| Reply to original comment on mastodon.social
@Edent I gave a talk once called “You kids don’t know you’re born” about the history of the web, especially the early days and how we had marquee and blink tags … Unfortunately my 20 minute slot turned into an hour when I got to the birth of JavaScript and went on a rant urging these youngsters to make something better 🤣
| Reply to original comment on mastodon.me.uk
The most "useful" application for
ismapwas to be able to pin-point the exact clicked location without any JavaScript. Remember, this was a time where JavaScript and CSS were far from widespread and far from being reliably cross-browser.I think I've seen this used as a server-side rendered zoomable image. Which also means it was possible to implement a crude version of "google maps" (without any drag-and-drop) using
ismap. I remember seeing this being used in a world map where I would have to either click on a country or click somewhere to see a zoomed-in version of the map (I think it was a weather forecast website).It's been almost 30 years ago, and this feature was rarely used anyway, so forgive my memory.
The downside of
ismapwas having pages that were essentially un-cache-able. Since each pixel corresponds to a different URL, the likelihood of clicking on the exact same pixel was minimal, which means the likelihood of loading the destination directly from the browser cache was near-zero. Back then, that meant a multi-second latency over dial-up, plus the time for server-side processing and downloading the new page over a few kbps.Bonus! A similar behaviour happens if you use
<input type="image">: it automatically adds the X and Y coordinates of the clicked image-button-input-field and submits the form.More comments on Mastodon.