Set Image URL – Tutorial for GoLive CS

Also available with Swedish text • Back to Tutorials and Links Content

The Action Set Image URL is most often used for linking from a thumbnail size of an image or a button to a larger image, shown elsewhere on a page. For a live example see this page.

This is how you set it up:

NOTE: You normally get the best result if all the large images have at least one dimension – height or width, but preferably the width – the same for all the images. It is NOT a good idea to resize the image in GoLive if the placeholder image size is set in pixels.

The manual says this though: "Normally, all images will display with the dimensions of the placeholder image. To enable the images to display with different dimensions, change the placeholder image's Width and Height values from Pixel to Image in the Image Inspector".

So, actually you CAN display images of different dimensions too with a Set Image URL action. See example here.

If you want your visitors to see the images faster, add a Preload action for each large image. See instruction here. OR see tip below.

3. Place the large image you want your page to start with at the desired location on the page.

4. Select the large image, go to the Inspector and in the Basic tab, at the bottom, find the field for Name/ID.

You can either type in a name for the image here or choose Name & ID from the dropdown menu beside the field. If you let GoLive provide the name for you, you might get a somewhat cryptic name. If you type it in yourself, just remember that the name NEVER can begin with a number (if it does, the action we are going to use, will not function).

The name you provide in this field later provides the Set Image URL action with the information needed for where on the page the larger images will be showing. The same name is used over and over again to tell all the thumbnails where the larger image will appear.

5. Now place your first thumbnail.

6. Select the thumbnail.

7. With the thumbnail selected, in the Inspector go to the tab Link and give the image a link.

In the url-field for the link type #. That's all you need to do in this palette.

8. With the image still selected, make the Rollovers & Actions palette active and go to the Actions tab.

9. Choose your desired event for the action, like Enter or Click or whichever you prefer.

The one most used is Enter (often called MouseOver) which makes the large image to appear automatically when you move the cursor over the thumbnail, or the Click, which means you have to click the thumbnail before the large image changes.

10. Then click the small button for Create New Action at the bottom of the Actions field.

11. Select the new generic action.

In the dropdown menu that says Action choose Image, Set Image URL.

12. In the palette on the button for Image choose the name for the large image you earlier gave a Name and ID. In the Link field then link to the large image you want to show at that location. For the first image, choose the one that is already placed.

The red bug is showing in the palette as long as you have not done all the settings for the Action.

To create additional image swaps, proceed to step 13, and do steps 13-20 for as many times as needed for each additional image.

TIP

If you want something specific to happen when you move your cursor away from the thumbnail, you can add an additional action to it.
– Keep the thumbnail selected.
– Choose the event that should trigger the action in the events list to the left. For something to happen when you move the cursor away from the thumbnail, choose Mouse Exit.
– Click the icon to the left of the Trashcan in the Actions part of the Actions palette to get a generic action added to the thumbnail.
– Use the Actions dropdown button to choose an action.
– Set the settings for the Action you have chosen.
– Done.
– Repeat for all thumbnails where you want this.

13. Now place your next thumbnail.

14. Select the thumbnail.

15. In the Inspector go to the tab Link and give the image a link. In the url-field for the link type #.

16. With the image still selected, make the Rollovers & Actions palette active and go to the Actions part.

17. Choose your desired event for the action, like Enter or Click or whichever you prefer.

18. Then click the small button for Create New Action.

19. Select the new generic action and in the dropdownmenu Action choose Image, Set Image URL.

20. In the palette on the button for Image then choose the name for where you want to show the next image, and then link to the next large image you want to show at the field Link.

Repeat 13 – 20 for as many images you want to show this way.

Check in a real browser that it works the way you intended.