Welcome Topic Outline Procedures Calendar Assignments Message Board Guides V Readings V Tools V Sources V

Imagemaps and metaphors

This menu page from www.dejavu.org contains a list of links. The list is contained in a single image, and the various lines are made hot with a table linking href anchors to the lines in the image. It is technically an "imagemap" and is an example of perhaps the most common type of imagemap on web. The image itself is mostly decorative, an evocation of "surfing" the Web, and the links are not made from parts of the drawn image, but rather from the words included in the graphic.

Imagemaps become more interesting when the image is actually a map which sets up a correspondence between parts of an image and items in another domain. When the image is a geographical (aka topographic in the broad sense (see Wiki) map, then the relations of the parts in the flat space of the map  generally represent location of the corresponding items in the world.  So one might have an imagemap map of  12-step meetings in a city, where each area (hot spot) link to a description of the meeting, driving directions, etc.  (Such maps can be found on line, though not for Seattle).   Note that the imagemap gives more information than a simple list or table would: it gives configurational information, which in this case is the locations of the meetings, relative to each other and to the landmarks of the city.   A similar but looser relation underlies the very large image maps of Mr. Beller's Neighborhood, where an aerial map of mid and lower Manhattan is dotted with hot spots which, when clicked, open a window containing a story associated with that location, but this association is somewhat flexible and variable.  [Note: this used to be his own map concocted out of satellite  photos, but now Google Maps conquers all.]

Shelley Jackson's  very famous "thebody" drawing of a naked woman's body has various areas of the body linked to pages of text about the woman's memories and incidents and attitudes about that part of her body.  The linking of text to body part is in fact quite traditional--as in an anatomical annotated man or torso; what is unusual is that the text is not objective-scientific but subjective-personal. All of the imagemaps described so far might be called annotations of the image.

A slightly different relation is that of the Explore Tate interface to the Tate Museum which gives floor plan imagemaps of levels of the museum, with each room being a hot link to  an array of thumbnail images of the paintings displayed in that room.  Thus the link is from a room to its contents--a relation of metonomy.

All of these so far are strongly tied to place;  one that is not so tied is an image composed of portraits that links to  pages about the individuals.   The relation is still one of annotation, but a question arises as to the significance of the arrangement of the portraits.  If the individual portraits are not arranged in some sort of space (e.g. New England writers in the Northeast, Southerners in the South, etc.) then we might think of them as in a chronological sequence (a "timeline"  --in this instance, a folded line).  In that case, a property of the visual image (more a matrix than a developed image to be sure) is transferred into the domain of American authors represented by the thumbnail portraits.  That is, we have crossed into metaphor, albeit a gentle and not striking passage, given the ubiquity of the timeline metaphor.  (Conceptual metaphor for LTR languages/cultures:  LEFT IS BEFORE).  In addition,  the timeline reading of the array conveys the notion of continuity and tradition: the grand progress and heritage of American letters and civilization.  And indeed, above this imagemap the title is written:  American Literature to 1860.  Timeline (or a chronologically arranged and dated sequence of thumbnail images)  (this time unfolded) is the main image for the menu page of aka kurdistan.

In the umarked case in Western visual space, time flows left to right and top to bottom, but some people open their email boxes to the most recent additions and scroll downwards into the past.

Metaphorical imagemaps

We are more obviously in the presence of metaphor when the image portrays objects of a domain that are quite different from those in another domain.  It is easy to call up metaphors when thinking of things in an abstract domain--say, languages, or assignments for a course. In response to an assignment to make a metaphorical imagemap, several of my students chose images to function as a table of contents for their assignments and sometimes other work.  The images included racked billiard balls, rising circus balloons, apples lying on a table,  a shift lever to a  5-speed transmission,  a  small Pacman display, and a  soccer ball.  Some of these were more suggestive than others:

Not all the images are equally successful in suggesting an interesting take on the set of assignments:

Limitations

If you think of making an using a real image imagemap as a menu and not a snapshot of some lines of text, one problem is immediately obvious: how does the viewer know many things are links and which they are? In practice, the answer is semi-random swirling of the mouse over the image, looking for spots where it turns into the pointing finger--guided, to some degree, by what is visually prominent and in focus. Writers don't want viewers to miss their links, and imagemaps increase the risk of that happening.

One solution is to use CSS-Imagemaps which use hover and switches of transparency and outline to identify the hot areas. Click on the billiard balls thumbnail to see one implementation of this (though as I said the hot areas are not hard to find anyway in this image). Another one carrying more weight of meaning is this one by Tyler Scott, where the visibility of the hot areas can be triggered by mouse actions. (Note that this is a "top" or menu page for the Ricky Bruch: Modern Sisyphus site, not a ist of assignments as given above.)

Assignment (#4)

Think of some concepts or figures that bear some relation to each other (say, the stages of the process toward graduation, or the subparts of your major field, or . . .) and make an imagemap with links to particular sites. The point is to use the image to say something about the items and how they are related. The imagemap should have at least six links.

---