Click to skip over navigation
 

lecture 7: more examples

<< previous slide

return to lesson 7 index

next slide >>


Another example of this technique can be seen on the "Beautiful Britain" page which I again suggest you have a look at. The image as you see it is basically the same as the original, single image. But although it appears as a single image it is in fact four images, divided up roughly as shown in the table on the right (the proportions of the cells in this table are not exact, but the arrangement is the same).The actual code for the "Beautiful Britain" multipart image is shown on your handout - have a good look at how a table is used to glue the image back together.

Each of these images has been turned into a link to a different destination. What you might be wondering is, why bother? The end result is just the same as if this were an image map with no "inactive" space, and it would be a lot more straightforward to do it that way.

For a straightforward multipart like this, yes, it probably is easier to do it as an image map. But in the next lecture I am going to enhance this image by the use of what are called rollovers; a technique by which images can be made to change state (or "roll over") when the mouse pointer is over them. When this is combined with the use of multiparts we will see a significant development - that only part of what appears to be a single image will "roll over" instead of the whole image. (It's an optical illusion - these are still separate images - but the effect is the same). This is the first advantage of multipart images over an "ordinary" image map.



North





West





East





South



Some other advantages are as follows:

  • as the University of Leeds page demonstrated, text and other non-image elements (like form boxes) can be seamlessly integrated into an image-based page layout
  • as long as alt images are used properly, they are more accessible than image maps and do not impel you to include a text-based alternative menu (try turning off the images on the Leeds Uni page in Opera - you can see that the page is still usable)
  • different parts of the image can be defined as .gifs and others as .jpg. Remember that these formats are better at certain jobs than others. Most of the Uni page is made up of single blocks of colour so .gif works best here, but the circular photos in the top left are better as .jpgs and that corner image is therefore defined as such. OK, this is a pretty picky point, and brings us into some fairly advanced web graphics considerations, but sometimes it matters.
  • on slower connections the page will be seen to load in a "jigsaw" fashion, thus keeping the viewer's attention. A single large image will load in a more monolithic fashion. On sites where it is important to grab the viewer's attention immediately, the "jigsaw" effect can give a slight advantage.



<< previous slide

return to lesson 7 index

next slide >>