How to implement an automatic slide show with links
A slide show is where a number of images are displayed in sequence one after another. An example is shown here to the right of this paragraph.
This article (and example) differ from the classic article "How to implement an automatic slide show", because behind each image is a link. There is an example of this on the right - click on the image to follow the link defined for that image (one is to a web page the other links just open the picture in the browser).
To achieve this effect three things are required:
- A div, an image and link
- The images to be shown and links to be used
We need a div, an image and a link, all standard HTML constructs:
<div id="EmilyDiv"> <a id="EmilyLink" href="http://www.cryer.co.uk/emily"> <img border="1" src="emily01.jpg" width="200" height="200" id="EmilyPicture" align="right"> </a> </div>
The <div> is simply a container. You can apply styles or classes to the div to change its appearance. In the example at the top of this page it is simply floated to the right of the page. You must have a <div> because without it the fade effect will be messed up.
The link is the link to a page (or image) that should be opened when the user clicks on the image. This must be assigned a unique id because the automatic slideshow will update this link each time a new image is shown.
The image is the initial image that the user will see when they open the page. Again this must be assigned a unique id because the automatic slideshow will need to change the image as the slide show progresses.
For the example above, the id for the div is "
EmilyDiv", the id for the link
EmilyLink" and the id for the image is "
EmilyPicture". These ids are used
You only need to include this once even if you have multiple slideshows on the page.
The final step is to establish what images are to be shown as part of the slideshow, the links to go with them and how long each image is to be displayed before moving onto the next one. By way of illustration, this page uses the following:
SlideShowWithLinks.Run" function and below the image placeholder.
The divID is the unique identifier given to the div. This identifies the container in which the slideshow will run.
The pictureID is the unique identifier given to the image. This identifies the image in which to run the slide show. This image will be replaced with each slide show image in turn. (The ID was specified as part of step 1 above "An image placeholder and link".) In the HTML the picture name is specified by including a statement of the form:
The linkID is the unique identifier given to the link. This identifies the link that is to be updated as the slide show runs. (The ID was specified as part of step 1 above "An image placeholder and link".)
This is a string containing the names of the source files for each image to be displayed and the link to associate with each one. It should be build up containing the path to the image file, followed by a semi-colon, followed by the link that goes with the image, followed by a semi-colon then the next image and link pair and so on.
Note that the final semi-colon should be omitted. If you place a semi-colon at the end of the string then the slideshow will play through once and stop.
It is very important that each image is the same size (height and width) as the original - or that it has the same aspect ratio (ratio of height to width) as the original. This is because each image is loaded into the same area or space that the original image occupied. If this images are not the same size then the browser will stretch the image to fit (and for example thus give the impression of very fat or very thin people) and this may be undesirable.
So, in the example above, four images and four links are defined:
- emily01.jpg, with a link to http://www.cryer.co.uk/emily.
- emily02.jpg, with a link to the same image file.
- emily03.jpg, with a link to the same image file.
- emily04.jpg, with a link to the same image file.
This is the number of seconds that each image is to be displayed for.