An Image Map is an image on a web page which has been provided with 'hotspots'. A hotspot is a defined area of the image which can act i) as a clickable link to fetch another page and/or, ii) as a mouseover to produce a tool tip that describes the content of the hotspot. A viewer who clicks on the first kind will receive a related page such as an enlarged view of the hotspot area. A viewer who hovers over the second kind will receive a tool tip (label) e.g. the names of individuals in a group photographs.
Image map code can be either client-side (where client means on the viewer's PC when they fetch
the web page) or server side (where server means on the computer that hosts your web pages on the
internet). In this article, we concern ourselves only with the use of client side image maps.
You can create image maps with almost any web editor these days, even with some image editors
such as Paint Shop Pro. The only difference is that it is considerably easier to do in
some programs than others. Macromedia's Dreamweaver cannot be beaten in this respect - but
their disproportionate pricing policy is a major barrier to most people. A lesser program in which it is nearly as easy
to make image maps is Adobe's now-defunct and unsupported PageMill 3 web editor.
In its day, Adobe PageMill was the leading WYSIWYG web editor. Now, though, it is little more than a possible stepping-stone for a web-design beginner, if that. Though it is quite well suited to that purpose because it now costs little or nothing and, uniquely, its default Edit view reveals how a page is actually constructed as opposed to the modern convention of showing how a page might finally look in a browser. This can be a great help when first learning the art of applying complex nested tables which, ultimately, is one of the keys to quality web page design.
But we digress. Back to the main purpose of this article, which is how one would have produced an image map with PageMill - and still could if one still has it on one's computer. Hence, open PageMill in its normal Edit mode, then click File > Open > drill down to the HTML page containing the image you wish to make into an image map [warning: if the HTML page was produced by a different editor than PageMill, you must work only on a copy of the page, see Tip 3 in right hand column]. Next, click Open > double-click on the relevant image (a thick dashed line appears around the selected image, and the image-map drawing tools appear in the top toolbar) > click the rectangle, circle, or polygon shape button in the toolbar and drag the cursor over all, or part, of the image, to draw-out a blue hotspot area.
PageMill automatically numbers each hotspot as you draw it, with lower-numbered hotspots in front if the hotspots overlap. These numbers appear only in PM's Edit mode, not in a browser.
Click off the image to hide the blue hotspots. Double-click on the image to make them reappear. Left-click on any blue hotspot to select it.
Click Browse in the bottom right hand corner of PageMill's window to create a link for a selected hotspot. Repeat for all hotspots that you want to act as links. Or you can use any of PageMill's several other linking methods to make the links (except for Insert > Object).
The filename or title of the linked page will appear in the hotspot. You can turn off the link display, to reduce screen clutter, by clicking the 'Show Hotspot Label' button in the toolbar. You can use the color button to change the hotspot border's color from blue, if blue is difficult to see against, say, a blue image. You can adjust the height and width of each hotspot with absolute precision by altering the pixel co-ordinates in PM's Source Mode. If there are any negative numbers, change them to zero (i.e. the edge of the image) as Internet Explorer does not like negatives.
To add tool tips to hotspots, add the attribute ALT="Your text here" in the map's <AREA> tags. This creates a tool tip that will usually show in Internet Explorer 5+ (sometimes needs a click on an image first), may or may not show in Netscape 4.x depending on its mood, and will not show at all in Netscape 6.x. See Tip 5, right, for a fix for NS 6.
Take a look at the examples in Fig. 1, top right, and you will see what a nice touch image maps can add to a site. And, as shown above, they are so simple to create, though more so with some applications, like PageMill or Dreamweaver, than others.
|
| Fig. 1 (above) Specimen Image Map. If you hover your mouse over the horizontal SysTray icons above, you will, dependant on your system, see tool tips saying what the icons are for. The horizontal icon images are unlinked hotspots. These were created by using a NOHREF attribute in the image map's AREA tag. Hence there is never anything more to see than a tool tip label - the cursor will not change to a hand, and no URL will appear in the browser's status bar. If, however, you hover your mouse over the vertical icons on the Windows sidebar above, you will, again, dependant on your system, see tool tips saying what those icons are for. But you will also see the cursor changes to a hand, and something flashes up in the browser's status bar (provided the status bar is enabled in your browser's View menu). This happens because these icon images are linked-hotspots. The links in this example are only dummy links, however, so they will not fetch other pages if you were to click on them. This dummy-link method is probably a better option for web designers than the NOHREF tag because the activity in the status bar, and at the cursor, makes it more likely that a viewer will notice, as they zap around their screen with the mouse, that an image has hotspots in it. |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||