ACOM: Web Design Tutorial Site

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. There are distinct advantages to this technique over image maps:

• via the ALT attribute, you can give different parts of the image a different floating caption - you can do this on image maps in IE but not Netscape
• 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: as in the first example below
• more importantly, 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 a table. However, with some ingenuity, this isn't really a big problem. The main disadvantage with this technique is that it is a damn sight more difficult than image maps. You will need a graphics editor not only to establish the co-ordinates of each different section of the image, but also to physically break the image up around these co-ordinates, saving each "slice" of the image into a separate file. These files are from then on treated as completely separate images, but they are pieced back together into the complete image with a table.

The easiest way to explain this is to show you a couple of examples. In the first place, the technique has been used purely for decoration. It looks fairly straightforward, but the only other way would be to present the central text as part of the image, and that would come complete with all the disadvantages of presenting text as an image: nor could you easily code the links. The main disadvantage here is that it will break up if and when text is resized on the screen, unless you fix the text size exactly in the style sheet (or, as here, in a STYLE attribute). This is probably one of those rare occasions when it's better to do that.

Firstly we have the original image:

Note that the central space inside this "frame" is transparent, so the background colour shows through.

I then create four separate images by "slicing" this image up in a graphics package: all you need to do is make a rectangular selection (a "marquee"), then copy and paste the selection into new image files. Be precise though! As you'll see, the dimensions of each of these slices match. (To see these, check out the ALT attribute.) It's a very good idea to note down their heights and widths in pixels, anyway: as you'll see when we perform the next step, constructing the table. Note also that I have deliberately extended the selection beyond the frame itself, to ensure that the text in the centre is "padded" out away from the frame. (There were other methods I could have used here but this seemed the simplest.) I've therefore enclosed the images below in borders so you can see their exact extent.

Incidentally, I don't mean to suggest this is a piece of cake. Even after you've had some practice at it, it can still be a frustrating experience ensuring that you have acquired every last pixel: missing just one row or column of them can leave you with an untidy-looking final result. If at first you don't succeed though, try try again...

OK, now it's time to stick them all back together - with the added text in the middle. I'll show you the end result first:

	Follow this link to the photo gallery

This has been constructed using a table with five cells, the central one of which is text, but the other four of which are filled with the parts of the image. See the code; and do remember that the key to understanding tables is to look at the structure first, what's inside the cells afterwards. There is a further summary, of all the various stages involved here, after the second example which follows.

<TABLE WIDTH=248 ALIGN=center BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD WIDTH=248 COLSPAN=3>
          <IMG SRC="picframetop.gif" HEIGHT=55 WIDTH=248 ALT=" ">
        </TD>
    </TR>
    <TR>
        <TD WIDTH=62>
          <IMG SRC="picframeleft.gif" HEIGHT=129 WIDTH=62 ALT=" ">
        </TD>
        <TD WIDTH=125>
          <P STYLE="font-family: Lucida Handwriting, cursive;
          font-size: 16pt; text-align: center">Follow this link
          to the <A HREF="gall.cfm" STYLE="font-family: Lucida
          Handwriting, cursive; font-size: 16pt;">photo gallery
          </A></P>
        </TD>
        <TD WIDTH=61>
            <IMG SRC="picframeright.gif" HEIGHT=129 WIDTH=61 ALT=" ">
        </TD>
    </TR>
    <TR>
        <TD WIDTH=248 COLSPAN=3>
            <IMG SRC="picframebottom.gif" HEIGHT=55 WIDTH=248 ALT=" ">
        </TD>
    </TR>
</TABLE>

I deliberately placed a link inside that picture frame to suggest the advantage of doing it that way, rather than just using an image to do the whole job: which is of course easier, but somehow less attractive. Bearing in mind that we can use images as links though, another use of the technique suggests itself.

The second example therefore combines the technique with rollovers to produce another form of image map. Move the cursor over the sections of the image below, and move the mouse over it to see what effects this has. Note that there is a delay between moving the mouse over and loading the image, although if you are viewing this from university it won't be a very long one - you'd notice it from home though. Ideally, this unsightly delay would be removed by preloading the image. However, this would complicate matters still further at this stage, so I will let it pass here and instead direct you to the page on preloading where you can find out how to cure this problem.

The HTML which has rendered this image follow and once again you should look at it carefully alongside the commentary.

BEAUTIFUL BRITAIN - North, South, East and West

    <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=176>
    <TR>
        <TD COLSPAN=2>
        <A HREF="ardnamurchan.cfm"
            onMouseOver="document.north.src='mapnorthw.gif';"
            onMouseOut="document.north.src='mapnorthb.gif';">
            <IMG SRC="mapnorthb.gif" WIDTH=176 HEIGHT=80 BORDER=0
              ALT="North: Sanna Bay, Ardnamurchan, Scotland" NAME="north"></A>
        </TD>
    </TR>
    <TR>
        <TD>
        <A HREF="silverdale.cfm"
            onMouseOver="document.west.src='mapwestw.gif';"
            onMouseOut="document.west.src='mapwestb.gif';">
            <IMG SRC="mapwestb.gif" WIDTH=88 HEIGHT=90 BORDER=0
              ALT="West: Silverdale, Morecambe Bay" NAME="west"></A>
        </TD>
        <TD>
        <A HREF="scarborough.cfm"
            onMouseOver="document.east.src='mapeastw.gif';"
            onMouseOut="document.east.src='mapeastb.gif';">
            <IMG SRC="mapeastb.gif" WIDTH=88 HEIGHT=90 BORDER=0
              ALT="East: Scarborough. Yorkshire" NAME="east"></A>
        </TD>
   </TR>
   <TR>
        <TD COLSPAN=2>
        <A HREF="ashdown.cfm"
            onMouseOver="document.south.src='mapsouthw.gif';"
            onMouseOut="document.south.src='mapsouthb.gif';">
            <IMG SRC="mapsouthb.gif" WIDTH=176 HEIGHT=88 BORDER=0
              ALT="South: Ashdown Forest, Sussex" NAME="south"></A>
        </TD>
   </TR>
   </TABLE>

So, once again the various stages involved in creating this effect were as follows:

1. Create the images. Firstly I used simple drawing tools to create the image as a whole. I happened to use Adobe Illustrator, but any graphics package should be able to create an image like this. I scanned in the satellite photo of Britain and then used Illustrator to overlay the text upon the map. And I did this twice: once with the black letters at the compass points, and once with the white letters in exactly the same positions (quite straightforward in a graphics package). These two files were saved.
2. Divide up the images. I then used the graphics editor to split each of these two larger images up into four smaller sections. As above, each section was selected in a rectangular marquee and then Copy and Pasted into a new image, but this time I had to do it twice, producing eight images - four with black letters and four with white. Each was saved into separate .gif files: mapxxxxb.gif for the black letters (where xxxx is "north", "south", "east" or "west") and mapxxxxw.gif for the white letters. The diagram below should give you some idea of the rough arrangement of these four sections.

4. Fill the table with the images. Each table cell is then filled with an image tag which has a SRC attribute corresponding to the file containing the relevant black lettering. You can see now how we can get different parts of the image with different captions - as this image is now being rendered with four <IMG> tags rather than one, so the ALT attribute differes between each. The usually-optional other attributes are now very important, as they ensure the image size is fixed. Remember to include the NAME attribute, so the rollover works.
5. Turn the images into links. Finally these images are enclosed within link tags pointing towards the HTML files which correspond to each compass point. The onMouseOver and onMouseOut events create the rollovers (I won't repeat technical details that you can get from the page on rollovers.) And there you have it.

All in all, this technique is not easy, but definitely worth it if you can pull it off. I've seen entire pages arranged like this - though a problem is, of course, 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 could lose a lot of it. Nevertheless, it's a powerful and professional technique; for just about the best I can personally manage here, have a look at this online game.

Back to the top

Back to the menu for lesson 7