Image Maps, Both Kinds

forms and protocols 1994 partly

One picture, several links, decided either by the browser or by a CGI script on the server.

In 2026: Client side maps still work and are still in the standard. Server side maps, the ISMAP attribute, sent the click coordinates to the server as a query string and needed a map file and a CGI handler, and are effectively dead. Nearly every 90s navigation bar was one of these.

Where it came from: Server side maps: NCSA httpd imagemap, 1993. Client side maps: HTML 3.2, 1997. MDN ↗

<!-- Client side: the browser decides -->
<img src="https://xbawx.com/inc/img/demo/navbar.gif" usemap="#nav" border="0" width="400" height="40" alt="Navigation">
<map name="nav">
  <area shape="rect"   coords="0,0,100,40"    href="/"            alt="Home">
  <area shape="rect"   coords="100,0,200,40"  href="/about.html"  alt="About">
  <area shape="circle" coords="250,20,18"     href="/links.html"  alt="Links">
  <area shape="poly"   coords="300,0,400,0,350,40" href="/gb.html" alt="Guestbook">
  <area shape="default" nohref>
</map>

<!-- Server side: the browser sends the pixel it was clicked on -->
<a href="/cgi-bin/imagemap/nav.map">
  <img src="https://xbawx.com/inc/img/demo/navbar.gif" ismap border="0" width="400" height="40" alt="">
</a>

<!-- nav.map on the server looked like this -->
<!--   default /index.html                                   -->
<!--   rect    /about.html   100,0  200,40                   -->
<!--   circle  /links.html   250,20 268,20                   -->

sandboxed demo · breaks nothing but itselfrestart

More in forms and protocols