Lesson Four: Multiple Event Rollovers:
Require patience and
planning to save
getting in a muddle.

1 First create a
table, like the one
on the right:-

2 In Photoshop, create two images
for each name, the dimensions of the cells
(an over image and a static image)
and for the bigger cells, two
images each,
one a transparent gif, (Blank1 and Blank2), and the other the image you wish to see, when you mouse over the named cell on the left.

Alternatively, use the images in 'planets' file on 'U' drive.

3 Insert all the primary images for the left hand side cells.

4 Don't forget to insert the two large transparent gif images into the larger cells on the right, so that you can swap them out with something else.

5 Name each individual image in the properties inspector (in the tiny rectangular window by tiny image of image), giving very brief but relevant names. eg. j for jupiter, e for earth. (Structured file naming conventions become very important when you are creating multiple event rollovers as they help you identify images correctly and quickly).

6 Now add the javascript behaviours.
Click on an image in the left hand column of cells, eg. Jupiter, and go to Window on the Insert bar (the main menu along the top of the screen) and choose Behaviours or press F8 to open the Behaviours palette.

7 Click on the '+' and choose swap image from the drop down behaviours menu. A list of the images in your table appears and the one you have clicked on in 4 is high-lighted.

8 You should ask yourself: what is it that I want this to turn into?

9 Browse out to the image you wish to swap with the original name image and click Open to select this.

DO NOT CLICK OK ON THE SWAP IMAGE DIALOGUE BOX YET!!!

10 We are going to change two other graphics before we click OK, Blank1 and the image to pair with the name image, in this case 'jupiter.jpg'.

11 Then also change Blank2 to jupiter.text.

12 You will see an asterisk * appears next to each image you are changing - a clue to tell you that you are making changes to these images.

13 NOW CLICK OK and close the swap image dialogue box. Save and preview in browser.

14 Repeat the process for each name image.