HTML and CSS Reference
In-Depth Information
Complete the following:
1. Using your text editor, open
twinstxt.htm
,
tlmtxt.css
, and
fonttxt.js
from the
tutorial.13\case1 folder. Enter
your name
and
the date
in the head section, and then
save the files as
twins.htm
,
tlm.css
, and
fontsizer.js
, respectively.
2. Go to the
twins.htm
file in your text editor and add a
script
element linking to the
fontsizer.js
ile.
3. Scroll down the file and locate the
fontbuttons
div
element, which contains two
image buttons. Place both image buttons in the
fontsizer
class. Set the values associ-
ated with those buttons to
-0.1
for the
fontdown.png
image and
0.1
for
fontup.png
.
4. Save your changes to the file, and then go to the
tlm.css
file in your text editor.
5. At the bottom of the file, insert a style rule to set the width of the inline image within
the figure box in the
article
element to
12em
.
6. Add another rule to set the font size of paragraph text within the
article
element to
1em
.
7. Save your changes to the file, and then go to the
fontsizer.js
file in your text editor.
8. Add a command to run the startup() function when the page is initially loaded by the
browser.
9. Create the
startup()
function. The purpose of this function is to apply
onclick
event
handlers to the two font resize buttons. Create the
fontbuttons
variable containing
all of the page elements that belong to the
fontsizer
class. Loop through that collec-
tion and add an event handler to each item in the collection to run the resizeText()
function when clicked.
10. Create the
resizetext()
function. The purpose of this function is to change the default
font size of the document body based on the value of the font button being clicked.
When that value is changed, all object sizes based on
em
units automatically will be
resized. Add the following commands to the function:
a. Using the
parseFloat()
function, store the numeric value of the button being
clicked in the
fontchange
variable.
b. Next, you must determine whether an inline style has been used to set the default
document body font size. First, test whether the font size of the document body
is equal to an empty text string. If it is, set the font size to
1.0em
. (Hint: Use the
reference
document.body
to reference the document body.)
c. Use the
parseFloat()
function to store the numeric value of the document body
font size in the
currentFontsize
variable.
d. Change the document body font size to the text string
current font size
+
font change
+ "em"
where
current font size
is the value of the
currentFontSize
variable and
font
change
is the value of the
fontChange
variable.
11. Document your code with appropriate comments throughout.
12. Save your changes to the file, and then load
twins.htm
in your Web browser. Verify
that when you click the buttons to increase or decrease the font size, the paragraph
text and the size of the author's photo change in response, but no other part of the
Web page changes in size.
13. Submit your completed files to your instructor, in either printed or electronic form,
as requested.
