Your Electronic Books

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
186
Required files The gallery-completed folder from the chapter 5 folder.
What you??™ll learn Without context, some pictures are meaningless, so this exercise
shows how to take the gallery created in the previous exercise and
add a caption to each image.
Completed files The gallery-captions folder in the chapter 5 folder.
1. Edit the script. Add the elements shown in bold to your script (in gallery.js).
These will enable you to target an element on the page with an id value of
caption, loading new text into it when a thumbnail is clicked.
function swapPhoto(photoSRC,theCaption) {
var displayedCaption = document.getElementById("caption");
displayedCaption.firstChild.nodeValue = theCaption;
document.images.imgPhoto.src = "assets/" + photoSRC;
}
2. Add a caption. Under the main image in the gallery.html file, add a paragraph
with an id value of caption, along with the caption text for the default image.
?? alt="Main photo" />

Some sheep, grazing.

3. Edit the thumbnails. For each thumbnail, add some caption text, as shown following.
Ensure that there??™s a comma between the two swapPhoto values you now have.
?? src="assets/image-1-t.jpg" alt="sheep" width="100"
?? height="75" />
Some characters are invalid for captions, because they terminate the script early.


Pages:
256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280