Image map code can be either client-side (where 'client' means on your viewer's computer 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. Adobe's Dreamweaver cannot be beaten in this respect - but the price they ask just for a CD or DVD with it on is a major barrier to most people. A lesser program in which it is nearly as easy to make image maps was Adobe's now-defunct and unsupported PageMill 3 web editor.
In its day, PageMill was the leading WYSIWYG web editor despite its endless deficiencies. 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 basic HTML page is actually constructed, as opposed to the modern WYSIWYG 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 was, and often still is, a key way towards quality web page design.
Hence to the main purpose of this article, which is how one would have produced an image map with PageMill, and still could if there is anyone nostalgic enough to still have a computer with PageMill on it. 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 the 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 which will usually show in Internet Explorer 5 and later (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 and later, nor Firefox. See tip 5, right, for a workaround for Netscape and Firefox browsers.
Take a look at the examples in Fig 1, top right, and you will see what a nice effect image maps can add to images on a web page. And, as shown above, they are so simple to create, though more so with some applications, like Adobe's old PageMill or new Dreamweaver, than with others.
|
| Fig 1 (above) A specimen Image Map from a Windows 98 system. If you hover your mouse over the horizontal System Tray icons above, you will, dependant on your system, see tool tips saying what the icons were for. Those horizontal icon images are 'unlinked' hotspots which would not lead anywhere. They 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 were 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 the above 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 one or more hotspots in it. |
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||