I could have used a function for each thumbnail but since all that changes from thumbnail to thumbnail is the name of the image and the id of the thumbnail (and I used the image name for the id), I wrote a single function that took the id as an argument and used that to create the appropriate image name by adding ".jpg" to it. I called my function displayLarge.
// change the large image
imageName=id + ".jpg";
// set the style of the previous thumbnail back to the default
// make note of the id before we change it
// mark the thumbnail as current with the current style
In order for this function to work the first time, I also had to give an initial definition for oldID, the variable I am using to remember the original id of the thumbnail that is currently selected. All this code goes in the head section of the web page, so that it is loaded before the page loads.
Finally, I changed the HTML for the thumbnails to call my function. The HTML for my slideshow now looks like this:
<img class="thumbs" id="current" src="simone_thumb.jpg" onClick='displayLarge("s
imone")' alt="Thumbnail of Dog with EARTH Sticker"/>
<img class="thumbs" id="julie" src="julie_thumb.jpg" onClick='displayLarge("julie")' alt="Thumbnail of laptop with EARTH Sticker"/>
<img id="largeImage" src="simone.jpg" alt="Larger verson of selected thumbnail"/>
You can see a working example of this code here.
If you need a refresher (or first pass) at HTML and CSS, check out my favorite HTML and CSS book, HTML Dog: The Best-Practice Guide to XHTML and CSS and its accompanying website https://www.htmldog.com.
This site needs an editor - click to learn more!
You Should Also Read:
Editor's Picks Articles
Top Ten Articles
Content copyright © 2022 by Julie L Baumler. All rights reserved.
This content was written by Julie L Baumler. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.