NN 6, IE 5
You want to let users choose the relative font size for the content of the page.
Create a user interface element that lets users select from three or
four different font sizes. Each choice invokes the
function shown in the Discussion. This
function enables a style sheet whose ID is passed as an argument and
disables the rest. All of the related style sheets apply themselves
body element. As an added bonus, the
changeSizeStyle( ) function calls upon the
cookies.js library (Recipe 1.9) to preserve the
setting to be applied to the page the next time the user visits.
This is a three-part solution, involving HTML for the font size controller, style sheets, and scripts. The result is a small controller on the page that lets users select from three font size bases upon which the rest of the page renders, as shown in Figure 12-1.
Figure 12-1. Text size controller for users
HTML for the controller defines one surrounding
div element and several nested
img elements. Three of the
elements are surrounded by links, whose
event handlers invoke the
function. To prevent blank space from occurring between the images,
avoid source code line breaks between elements. The following HTML
code inserts line breaks inside element tags:
<div id="textSizer"> <img src="fontSizer.jpg" ...