How to add links to an image show

In this tutorial I want to show you how to direct the viewers of an image show to different destinations on the Internet; like this, you could present some products or geographic locations… well, the possibilities are endless!

Firstly I just want to remind you that, in order to be able to solve the tutorial, you will need the Creative Dw Image Show extension installed on your computer; if you encounter any problems while doing that, please visit the “How to install an extension” tutorial.


Click here to download the required files for solving this tutorial.


1. Open Dreamweaver, create a new website and a new file; save your file. If you have problems creating your website, try reading the “How to create a website” tutorial.

2. Just above the numbered steps of the tutorials you can see a hyperlink to an attached archive containing the necessary files required for solving this tutorial. Please download it, extract it and copy the files inside (the images and the audio file) in the location of your choice (preferably inside your Dreamweaver website).

3. If the Insert menu is not already open, please press CTRL+F2 to do so; from the Image Show section, insert an instance of Creative Dw Image Show in your webpage.

Insert an Image Show instance

Insert an Image Show instance

4. Now the product’s configuration interface should be opened; from the General tab – General Settings section, set the dimensions of the show to 800x600 pixels. Enable the Loop option.

Configure the general settings

Configure the general settings

5. This step will take us directly to the configuration of our show’s structure. Click on the green plus symbol labeled Insert Item, browse to the image you would like as your first slide and then click OK. Repeat this step two times in order to insert all the three images in the show.

Configure the show structure

Configure the show structure

6. Select the first slide by clicking on it; the configuration options available for it become configurable. From the In Effect drop-down list select the Accordion effect and click on the Customize Effect button. Configure the effect as in the following picture and set its duration to 35 frames.

Configure the IN effect

Configure the IN effect

Accordion configuration panel

Accordion configuration panel

7. Let’s set how much time the slide will stay on the screen until the show will continue. In the Slide Delay text-box insert 35 (frames, which means 1 second). Enable the No Motion option.

Configure the slide delay

Configure the slide delay

8. Now it’s time to configure how the first slide will leave the stage. Select the Wipe effect from the Out Effect drop-down list and customize it as in the following image. Set its duration time to 35 frames.

Configure the OUT effect

Configure the OUT effect

Wipe configuration panel

Wipe configuration panel

9. Use the button in the bottom side of the interface for a very nice and useful feature; as it’s stated in its label – it applies the settings we configured for the first slides, to all of our slides!

Apply settings to all the slides

Apply settings to all the slides

10. Let’s leave the Overlap Effects disabled for all the slides. Now it’s time to add the hyperlinks to the show; select the slides one by one and insert the following hyperlinks in the corresponding text field (it’s highlighted in the screen-shot below): http://www.extendstudio.com/Products/Creative_FL_Drop_Down_Menu/Overview/, http://www.extendstudio.com/Products/Creative_TextFX/Overview/, http://www.extendstudio.com/Products/Creative_MovieFX/Overview/ (if we would look at this show as a product presentation, it would be good to correlate the links with the images in order to be the same products). As a Target, select “_blank” for all three slides. In case you get a Flash error message because you are testing locally, visit the "How to test a website locally" tutorial.

Insert the link paths

Insert the link paths

11. In the Theme tab, select white (#FFFFFF) as the background color – with any level of opacity – and leave the rest of the options in their default position.

Configure the background

Configure the background

12. As they are not the object of this tutorial, leave the Soundtrack and Presets tabs as they were in their initial state.

13. We finished the configuration of our show. Click OK, save your file and preview it in a browser by pressing F12.

Preview your file

Preview your file

Thank you for your time and I hope this tutorial was useful to you. I invite you to read the rest of our tutorials and check out our other products on www.extendstudio.com. If you have any questions please contact us at support@extendstudio.com.