Imagemaps, Animated GIFs, and Rollovers

Imagemaps

An imagemap, or "clickable map", is a web graphic containing multiple hotspots, or links. (note: there are two types of imagemaps, client-side and server side. Here we are exclusively talking about client-side imagemaps) An example would be the map of the MIT campus found at http://web.mit.edu/vrtour/ in which the campus has been divided into four sections: East, West, the Infinite Corridor, and Kendall Square. Clicking on one of these regions takes you to another webpage focusing on that area.

Animated GIFs

An animated GIF is a single file which contains multiple images. These images act as successive frames of an animation when viewed in a web browser. Common examples of animated GIFs include banner ads and the rotating E graphic that some use as email links on their web pages. Before we delve into how to create animated GIFs, a word of caution. Animations on web pages, while eyecatching, are considered a nuisance by many users (along the same lines as blinking text, sound files that launch when a page is opened, etc.). It is best to use them sparingly, and not have them loop continuously.

Rollovers

Rollovers are images that change appearance in a browser when you roll the cursor over them (see http://web.mit.edu/afs/athena.mit.edu/org/i/iso/www/ for examples). Unlike animated GIFs, rollovers consist of four or five separate files, one for each image state of the rollover: Up (the "normal" state, which appears when the page loads but before you roll the cursor over) , Over (when you move the mouse onto the image) , Down (as you begin to press the mouse button down), and Click (when you click the mouse button) plus the Javascript coding that tells the browser which of those images to display at a given time.