Description
New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 14 Case 1 New Accents Photography
After you have completed all of the tutorials in Chapter 14, turn to page 1001 in your textbook and do Case Problem 1, New Accents Photography. Make sure all files are uploaded to cPanel and submit your URL for the accents.htm file when you are finished.
Use JavaScript to create a dynamic style sheet switcher.
Data files needed for this Case Problem: accentstxt.htm, base.css, elegant.css, elegant.png, elegant_back.png, elegant_small.png, innovative.css, innovative.png, innovative_back.png, innovative_small.png, joyous.css, joyous.png, joyous_back.png, joyous_small.png, modernizr-1.5.js, nalogo.png, romantic.css, romantic.png, romantic_back.png, romantic_small.png, styletxt.js, zany.css, zany.png, zany_back.png, zany_small.png
New Accents Photography Christine Drake is the owner and chief photographer at New Accents Photography, a photography studio in Ashland, Oregon, that specializes in wedding photos. Wedding portraiture is a competitive business. and Christine wants to improve the design of her Web site’s opening page to help interest couples in viewing her work. Christine is proud of the many and varied styles of portraiture that New Accents Photography offers, and she would like to create an interactive style sheet switcher that loads different style designs based on her photos.
Christine envisions making several style sheets, and she wants to limit the amount of work she’ll have to do when updating the HTML code as she adds new sheets to her site. She would like your help with writing a JavaScript app that examines the list of style sheets in the site’s home page and creates a figure box of clickable thumbnail images for each sheet design. A preview of the page you’ll create for Christine is shown In figure 14-66.
Christine already has written the style sheet code and most of the HTML code. Your job will be to write the JavaScript code to enable her customers to switch from one style design to another.
Complete the following:
1. Using your text editor, open accentstxt.htm and styletxt.js from the tutorial.14\case1 folder. Enter your name and the date in the comment section of each file, and then save the files asaccents.htm and stylebox.js, respectively.
2. Go to the accents.htm file in your text editor. Currently, Christine has only one persistent style sheet linked to her document. Create a link to the preferred style sheet romantic.css and give it the title romantic.
3. Create links to the following alternate style sheets: elegant.css, joyous.css, innovative.css, and zany.css. Give the style sheets the titles elegant, joyous, innovative, and zany, respectively. Do not disable any of these style sheets at this time.
4. Create a link to the styleBox.js file. Take some time to study the rest of the HTML code and then close the file, saving your changes.
5. Go to the styleBox.js file in your text editor. Below the comments, declare a global variable named allSheets and set it equal to an empty array. The purpose of the allSheets variable will be to store references to each preferred and alternate style sheet in the document.
6. Add a command to run the loadStyles() function when the page is initially loaded.
7. Create the loadStyles() function. The purpose of this function is to load all of the preferred and alternate style sheets into the allSheets variable. Add the following commands to the function:
a. Declare the links variable referencing all link elements in the document.
b. Loop through the contents of the links object collection. For each item, determine whether it represents a preferred or alternate style sheet with a defined title.
c. Disable each alternate style sheet, but leave the preferred style sheet enabled.
d. Use the push() array method to add each preferred or alternate style sheet to the allSheets array.
e. After the completion of the for loop, call the displayThumbs() function.
8. Create the displayThumbs() function. The purpose of this function is to display thumbnail images of each style sheet design from the allSheets array. Add the following commands to the function:
a. Create an element node for the figure element and store it in the figBox variable.
b. Set the id of the figBox element node to the text string thumbnails.
c. Loop through each item in the allSheets array, and do the following for each item:
i) create an element node for the img element and store it in the sheetImg variable;
ii) set the source of the sheetImginline image to the file title_small.png, where title is the title value of the current style sheet in the loop; iii)set the title attribute of the inline image to match the title attribute of the current style sheet;
iv) add an onclick event handler to the inline image to run the showSheet() function when clicked; and
v) append sheetImg to the figBox node.
d. After the for loop has completed, append the figBox node to the document element with the id main.
9. Create the showSheet() function. The purpose of this function is to change the style sheet used in the document. Add the following commands to the function:
a. Declare the variable sTitle, setting it equal to the title attribute of the inline image that called the showSheet() function. (Hint: Use the this keyword to reference the inline image.)
b. Loop through all of the sheets in the allSheets array. Enable the style sheet whose title attribute equals sTitle and disable all of the others.
10. Document your work with descriptive comments throughout your code.
11. Save your changes to the file, and then open accents.htm in your Web browser. Verify that five inline images have been added near the bottom of the Web page. Click each thumbnail image and verify that it loads a different style sheet. (Note: If you are using Safari for Windows or Macintosh Version 5.1.2, this style sheet switcher will not work.)
12. Submit your completed files to your instructor, in either printed or electronic form, as requested.
Reviews
There are no reviews yet.