Please read the instructions for using Actions first.

How to set up the Set Image URL Action.

This Action will change the URL of an image on the page to another image's URL when a menu item is activated. This essentially 'swaps' images in and out of the same location on your page. Ensure the images that swap all have the same dimensions because the size of the first image on the page will determine the size of the other images as well.

Open the example page to see it in Action!

Instructions for creating the example:

1) Open a site. Open a page with a menu on it or create a menu. Make sure you are in Layout View.

2) You need at least one menu and an image on the page.

Below is an image of the page used in this example page.

Note in the image below:

1. The menu object () is the last object on the page.
2. This menu also happens to be locked to an image in the top cell of the table so it can move with the table.
3. The base image we want to be replaced with other images has been positioned in a table cell.
4. The Head area has been disclosed (by using the disclosure triangle) so we can drag in the Head Actions.

A note about image dimensions: The images in this example all measure 200px X 200px. They can be any size but all the images you are swapping should be the same size. In this example, some of the images have a portrait orientation and others are landscape. The original .psd images have transparent areas at the sides or at the top depending on the orientation. When brought into GoLive as SamrtObjects, we created the final images using JPEG compression with a matte color the same as the background.

If you can't do this, you could use .GIF images with transparency or include the background color as part of the image.

Avoid using "Image" as the dimensions in the Inspector as this can affect the placement of other elements on the page, including the menu.

3) Next you must Name the image on the page so the Action can recognize it. (This doesn't mean the file name - it means giving the image a 'Name' attribute.)

Select the image and go to the Inspector. Name the image e.g. "me".

GoLive CS:		GoLive 6:
Go the Basic tab of the inspector and select Name from the pull-down list. Type a name into the Name field. Note: Do not use spaces or non-alphanumeric characters except for underscore (_) and do not use a number as the first character of the name.		Go the More tab of the inspector and type a name into the Name field. Do not check the Is Form box. Note: Do not use spaces or non-alphanumeric characters except for underscore (_) and do not use a number as the first character of the name.

4) Now the page is ready for you to add the Head Action that will swap the image when menu items are activated.

Drag a Head Action from the Objects palette > Smart set into the Head area of the page. Refer to the previous page if you do not know how to do this.

5) Select the Head Action in the head area and open the Inspector (GL6) or Rollovers & Actions window (GLCS). The Head Action has a generic question mark icon until it has been configured. See pic below...

6) Choose the Action Set Image URL (which is in the Image set) from the Action pull-down list.

Note in the following image:

The above example is from GoLive CS – GoLive 6 looks a bit different but the principles are the same.

7) Repeat steps 4, 5 & 6 for each image that is to be shown. Each image will need its own Head Action which swaps it for the image named "me".

8) There is one additional Head Action that may be required.

9) To understand the logic behind setting up your menu items, think about what you want to happen when you roll over, click or exit a menu item. Here is what needs to happen in the example page:

So the Set Image URL Actions required for this example are: fern, moss, water, logs and me. They need to be applied to the four menu items which trigger Set Image URL events.

10) Once you have set up the required Head Actions, you can add them to the trigger states (Mouse Enter, Mouse Click and Mouse Exit) of the menu items. To add an Action to a MenuMachine menu item, select the MenuMachine object to invoke the MenuMachine Inspector. (See image at right.) Select the individual menu item that you want to attach an action to in the menu tree editor. When you have done that, click the Call Action button in the MenuMachine editor toolbar.

11) The Edit Menu Actions dialog is displayed. You can now attach the Action to a menu event (Click, Enter or Exit) by selecting its name from the popup. You can attach different actions to each event or any combination of events.

So for the menu item "moss" as in the above pic, we are adding the Head Action "moss" to the Mouse Enter event, and the Head Action "me" to the Mouse Exit event.

Click OK and you're done. Repeat using the other Head Actions for the other menu items.