HTML and CSS Reference
In-Depth Information
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 as
accents.htm
and
stylebox.js
, respectively.
2. Go to the
accents.htm
file in your text editor. Currently, Christine has only one per-
sistent 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 pre-
ferred and alternate style sheets into the
allSheets
variable. Add the following com-
mands 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 follow-
ing commands to the function:
a. Create an element node for the
figure
element and store it in the
igbox
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
vari-
able; ii) set the source of the
sheetImg
inline 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 ele-
ment 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 refer-
ence 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.
