multipart images

Multipart images are a sort of alternative to image maps, though in practical terms the technique is quite different. Nevertheless, the end effect is similar: that different parts of an image can be made to behave in different ways. In fact, professional web designers are more likely to use this version of the technique than the "ordinary" image map. As the virtual lecture discussed, there are distinct advantages to this technique over image maps:

• you can give different parts of the image a different alt attribute (although this is, technically, possible on image maps as well with IE but it does not work with other browsers) - this makes it less necessary to provide a text-based alternative menu
• the image will load in sections, in a kind of "jigsaw" fashion - this can give the user something to look at on screen while he/she waits to view the full page, rather than having to watch an entirely blank screen while awaiting the loading of a larger image - this can help you retain their attention and stop them quickly going somewhere else
• it makes it possible to fit images "around" text and other non-image page elements like form boxes
• different parts of the image can be rendered in different formats
• significantly, you can make sections of the image update independently from the rest of the image via image rollovers.

A small disadvantage to the technique is that you cannot work with anything other than rectangular sections, because to "slice up" the image, you need to use a table. Unlike <area> tags, <td>s cannot define circular or polygonal shapes. However, with some ingenuity, this isn't really a big problem. I also used to point out that the main disadvantage with this technique is that it was a damn sight more difficult than image maps, but if you become familiar with Paint Shop Pro's "Image Slicer" tool, this is not the case (although as the lecture pointed out you will need to do quite a bit of work tidying up its rather clunky code). In fact so useful is this tool that I no longer feel it necessary to go into detail about how to create multipart images "by hand".

What I do recommend is that you have a good look at the handout from virtual lecture 7 as this will supply both information about how to use the Image Slicer and what the code ultimately looks like. It may be, of course, that you want to create an image like this and do not have access to Paint Shop Pro, although other graphics editing packages should also be able to help you out. You can create these images "manually" but you will never be able to do so without some form of graphics editor, so you may as well make use of what help is available.

The sample multipart image used in the lecture was only a starting point. In subsequent lectures we will also look at an enhanced version of that image with added rollovers, and also this this simple online game. Recall also the University of Leeds home page which was all arranged using a multipart image. One word of warning, though - that it fixes the size of portions of your page in pixels, precisely. (What a lot of Ps that was.) Change the screen or window size and you risk losing a lot of it. You will note that the content of the Leeds Uni page does not extend right across the screen, but stops part way. In fact, it stops after 800 pixels. If a page still looks OK when a window or monitor screen is as small as 800 pixels wide, this is generally considered acceptable design, and any fixed-width tables you use for page layout definitely should not be any wider han 800 pixels.

Back to the top

Back to the menu for lesson 7