yahew.com The image map

The image map

Twelve links, one image, one request. Nothing on it is marked.

Thirteen regions are drawn on this picture and not one of them shows. Click it to find them. The bar at the foot of the window names what you hit and lights the line in the file that decided it, and it counts what you have left. Switch it to Rect and you can drag a region of your own into the 1996 file.

Welcome to Windows95.com

The real file, 11,102 bytes, served from this site at its true size. Behind it, the 27,213-byte cloud tile the page sat on: the background cost more than the navigation did.

homemap.map, as it survives: inside index.html

This is the whole of it, byte for byte out of the 20 December 1996 capture. Nothing points at the drawing except these lines, and the notes in the margin are field marks: the traits that let you recognize one of these in the wild.

1
<A HREF="/cgi-bin/imagemap/gifs/homemap.map">
Field mark 1 The other half of the navigation. This anchor wraps the picture, and with ISMAP on the image it posts the click as ?x,y and lets the server decide where you went. Client-side and server-side shipped together, because Netscape 2 could do the first and Netscape 1 could not. Flip the switch in the bar below and try it.
2
<MAP NAME="Homemap">
The capital H is not decorative. Some period browsers matched USEMAP="#Homemap" against this name case-sensitively and some did not, so the pair had to agree exactly.
3
<!-- #$-:Image Map file created by Map THIS! -->
Field mark 2 Nine comment lines, and they are the editor's export header. Map THIS! version 1.20, by Todd C. Wilson. Nothing else stored this drawing: the coordinates, the source image and the folder it sat in are all here, in the page. The HTML was the save file.
4
<!-- #$-:Map THIS! free image map editor by Todd C. Wilson -->
5
<!-- #$-:Please do not edit lines starting with "#$" -->
Addressed to a person. The tool needed these fields intact to find its way back to the drawing, and the only place to ask was the file itself.
6
<!-- #$VERSION:1.20 -->
7
<!-- #$DESCRIPTION:Main Home Page map file for Windows95.com site -->
8
<!-- #$AUTHOR:Steve Jenkins -->
The author signed it twice. Once here, and once in paint: the status bar drawn along the bottom of the picture reads the same credit. One of those two is searchable.
9
<!-- #$DATE:Wed Jun 12 10:52:20 1996 -->
10
<!-- #$PATH:C:\Websites\Windows95.com\gifs\ -->
A folder on somebody's desk. The drive letter shipped to production and stayed there for thirty years, because nothing on the web ever asked it to leave.
11
<!-- #$GIF:homemap.gif -->
12
<AREA SHAPE=RECT COORDS="6,23,106,101" HREF=/usability/>
Top edge 23. The next one starts at 24 and the one after at 23 again. Four buttons in a row, drawn by hand with a mouse, never straightened, because nobody could see the edges to straighten them.
13
<AREA SHAPE=RECT COORDS="108,24,208,99" HREF=/connect/>
A one-pixel column at x=107 sits between this region and the one above it and belongs to neither. It goes to the site root.
14
<AREA SHAPE=RECT COORDS="208,23,311,99" HREF=/drivers/>
This one is 103 pixels wide by one pixel tall, twice over. It claims the row at y=99 that the CD-ROM button below also claims, and it is earlier in the file, so it wins. It also stops at x=311, mid-word: the drawn label reads Hardware Drivers and the last letter is outside the link.
15
<AREA SHAPE=RECT COORDS="313,22,417,98" HREF=/apps/>
16
<AREA SHAPE=RECT COORDS="6,102,114,178" HREF=http://www.vservers.com>
17
<AREA SHAPE=RECT COORDS="115,100,208,177" HREF=/connect/glossary.html>
18
<AREA SHAPE=RECT COORDS="209,99,312,173" HREF=/apps/cdrom.html>
19
<AREA SHAPE=RECT COORDS="312,98,416,173" HREF=/search.html>
20
<AREA SHAPE=RECT COORDS="8,180,112,249" HREF=/qtutors/>
21
<AREA SHAPE=RECT COORDS="113,178,206,248" HREF=/sponsors/>
The label outgrew the box. This button is drawn as Advertise at Windows95.com and the word Windows95.com runs past x=206. Click the visible text and you land on About instead.
22
<AREA SHAPE=RECT COORDS="208,174,314,248" HREF=/about.html>
23
<AREA SHAPE=RECT COORDS="313,173,417,248" HREF=/bio.html>
24
<AREA SHAPE=RECT COORDS="399,6,417,21" HREF=http://www.windows95.com/>
Nineteen pixels by sixteen: the close button. Clicking the X on a painting of a window reloads the site. The minimize and maximize buttons drawn beside it are the same picture of a button and go nowhere at all, and the close button's own right bevel at x=418 is outside the link.
25
<AREA SHAPE=default HREF=/>
Field mark 3 The else branch. Every image map had to define a nothing. Measured against the real coordinates, 22,088 of this picture's 115,056 pixels fall through to here: the frame, the title bar, the status bar, the gutters. Nearly one click in five went home instead.
26
</MAP>
27

            
28
<IMG  WIDTH=423 HEIGHT=272 SRC="/gifs/homemap.gif" ALT="Welcome to Windows95.com" BORDER=0 ISMAP USEMAP="#Homemap">
Field mark 4 423 by 272, and the GIF really is 423 by 272. Coordinates are unitless image pixels with the origin top left, and they do not scale. Serve this image one pixel wider and all thirteen links quietly point somewhere else. That is why it is at true size here and why it pans off a phone rather than shrinking.
29
</A>
Field mark 5 One ALT for thirteen destinations, and it is the title bar. Welcome to Windows95.com is what the drawn window says along the top, so the text alternative describes the picture rather than any of the places it goes. The failure is structural, not an oversight, and it is the reason off-screen text and a sprite sheet replaced this.

Drag a rectangle on the picture and your line lands in that listing, above </MAP>, in the file the 1996 one is still in. What happened to the other copy · Back to the directory.

Sources, and what is deliberately absent

Move over the picture. --, -- 0 / 13 found
Prev The frameset Next <marquee> & <blink>