Picture Swapper

Example

Basic Features

Step 1: From the Cloud9 dashboard: Create a new workspace
Fill in the following text boxes on the form:
→ Workspace name: picture-swapper Copy
→ Clone from Git or Mercurial URL: https://github.com/studentmrcode/picture-swapper.git Copy
Click Create workspace button
Open index.html and click Run

Step 2: Think about the design of your program and write pseudocode.
Hint: Click here for a pseudocode example.

Step 3: Write actual code from your pseudocode.
Hint: If you're having trouble, look at your Slideshow project.

Hints

For adding an event listener to each image, use the same function, and the keyword this to get the image that was clicked:
image1.addEventListener("click", clickImage);
image2.addEventListener("click", clickImage);
image3.addEventListener("click", clickImage);

function clickImage() {
    // add a selected class to the image that was clicked
    this.classList.add("selected");
}
For swapping two images, the easiest way is to swap their src attributes:
// this is how you get an image's src attribute
var someSrc = someImage.getAttribute("src");

// this is how you set an image's src attribute
someImage.setAttribute("src", someSrc);

Complete this illustration to learn how to swap.

Debugging help

Last topic Next topic