Open index.html and create a slide show based on the single image currently on the page.   You will need two more images related to the business and these have been provided by Pandora here and here.  A slideshow is just one image being changed for another (and at the end go back to the first).  So your script needs to change those attributes.  This can be timed and/or manual by clicking.  This practise does it manually but you might want to add the timer method later.

You have already changed an image by altering the attributes for the img element but now you need to add a level where you check what the image is now and change it to the next in order.  You could do this with a series of if or if/else statements but this is exactly what a switch is designed for.

The concept

An image element has at least two attributes - a src and an alt.  You might think it would be good to look at the file name to see what image is currently shown.  It is actually better to use the alt because file systems work differently with different operating systems.

The code will be structured like this:

get the current alt value and put it into a variable

if the variable value matches the alt from the first image:

    change the src to the second image

    change the alt tag as well

    break out of the switch as we found the match


if the variable value matches the alt from the second image:

    change the src to the third image

    change the alt tag as well

    break out of the switch as we found the match


if the variable value matches the alt from the third image:

    change the src to the original image

    change the alt tag back to the original one

    break out of the switch as we found the match

Remember when changing the src that the images should be in an images folder so you need to include that folder name in the src value.

The code

Use the pretend code above to guide you in how to create lines of code which do what is described.  Start with some preparation then do the switch:

  1. the event trigger:
    1. give the img element a unique id attribute
    2. create an event trigger (onclick, onmouseup or onmouseover?) in the img tag calling a function you will create next to swap the image
  2. the event handler:
    1. create an external JavaScript file called pandora.js
    2. add that file name as a src to the script tag in index.html if you did not already
    3. add a function to pandora.js with an alert so that you can test that the trigger successfully calls the function
    4. comment out or delete the alert used for testing
  3. the switch statement:
    1. use getElementById to get the existing alt value from the img and put it into a variable
    2. alert the variable it to test that you have successfully captured the alt value then comment out that alert as well
    3. create an empty switch statement complete with one case and a default
    4. the condition of the switch (the bit in normal brackets) needs to be the variable holding the alt
    5. the first case needs to be the alt as it is in your HTML
    6. have an alert in there for now which will show that the case has correctly identified the alt
    7. put a different alert message in the default which will tell you any time the case is not matched
    8. save both files and test (you should see the alert which shows that the first case was triggered)
    9. comment out that alert (but leave the last one in default)
  4. the first image swap:
    1. add a line under the commented out alert which changes the src of the image to your second image by using getElementById
    2. add another line to do the same to change the alt to something which describes the second image
    3. test it and the image should change, do it again and you should see the alert from the default
  5. swapping the second image to the third:
    1. copy the five lines which are the first case and paste them underneath (but before the default)
    2. change the text on the case line to the second alt text (which your code changes the alt to in the first case)
    3. change the next two lines to change the image to the third image src and alt
  6. swapping the third image back to the first:
    1. copy what you created for step 5
    2. change the case as before but this time it should be the alt of the third image
    3. do the same final two lines again but change the src and alt to the first image

Test it and you should be able to cycle through the three image forever.  You will not need a default in the switch statement as the image can only ever be one of the three so delete those two lines once you are sure the script is working.

You should have realised that adding more images would be easy by copying the middle case statement, pasting it and editing for the new image.