| Computing : Web Design | |||
| Other articles Contact |
| Image Maps |
| An Image Map is an image on a web page which has been overlaid with
HTML 'hotspots'. A hotspot
can be any defined area of an image. A hotspot can act (i) as a clickable link to fetch a
larger view of the hotspot or a related page, or (ii) as a mouseover label (tool tip) to name a
person or describe an object in the hotspot. 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. |
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Other articles Top Contact |
| First posted 9.7.03 (d.m.y) Last amended 14.10.09 Copyright (C) 2003-2009 PM Designs All Rights Reserved |
| Trademark Acknowledgements |