Back to Learning Center
Ulead PhotoImpact Tutorials
Tutorial Index | Page 1 2 3 4 5

Building Interactive Web Pages Part 2 - Adding Script Effects


   3. Insert Slideshow Images

In the Slide Show dialog box, click (+) in the Images tab to add images to the slideshow. Insert the following sample images from the files you downloaded and arrange them in the following order: see the world.jpg, asia.jpg, europe.jpg, north america.jpg, and south america.jpg. Thumbnails of the images are then added in the dialog box as you insert the files. You can rearrange the order of the images in your slideshow by dragging the image to the desired position.

Tip: You can also link the images to other Web pages by entering their URL addresses.

   4.  Assign Playback Buttons

In the Layout tab, assign playback functions to the two buttons, and at the lower right of the page.

To do so, use the Zoom in tool to get a closer view of the buttons, then click the cell that contains and select Play. Select Stop for the button.

   5.  Specify Additional Slideshow Options

In the Options tab, you can define more slideshow settings like slide duration, mouse actions, and image optimization properties. Under Global settings, select Pause on mouseover then clear all the other options. Set the display duration for each image, for instance, to 3 seconds. Select Resample images under Thumbnail images to allow images to be resized based on the size of the cell. After you have finished customizing all slideshow settings, click OK.

To preview the slideshow and test the playback buttons, select File: Preview in Browser - Internet Explorer.


If you worked on part one of the tutorial, you can now update portfolio.html and slideshow.html with the new script effects. Open Web2.ufo then select File: Save for Web - as HTML. Go to the folder where you saved the original portfolio.html and overwrite it using the same file name. Click Yes when you are asked if you want to replace the file.

Do the same process for Web3.ufo and save it as slideshow.html.

 


Tutorial Index | Page 1 2 3 4 5