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.
- Creating imagemaps using Macromedia Fireworks
After either importing or creating a graphic, choose one of the shape
tools from the Fireworks URL palette (either round, rectangular, or
freeform) and draw the hotspot over a desired area. Then, type in a URL
on the URL palette to determine what web page a user will be taken to
when she clicks on the hotspot. If you forget to do this, Fireworks
defaults to sending the user to the Macromedia site. Finally, export the
image and its hotspots by choosing Export from the File menu. The
resulting GIF file will contain the hotspots you created and can be used
on a webpage.
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.
- Creating rollovers using Macromedia Fireworks
The process for creating a rollover
is very similar to that of making an animated GIF. You make four frames,
one for each state, and then export your work as a Rollover. It is even
possible to incorporate special graphics effects into your rollovers,
such as buttons that appear to glow when the cursor is on them, or icons
that appear inset (sunken) when clicked. Once you export, you'll end up
with four GIF files plus an html file containing the Javascript
code. This you can paste into an existing html document, or simply use
it as is.