Zoom buttons are those small icons you see on many websites that allow your readers to change the font size of the page on the fly. CSS zoom buttons use CSS to change the font sizes and JavaScript to make the change. The key to zooming with CSS is using alternate stylesheets to set the sizes of your fonts on the page. Then you use a simple stylesheet switcher to switch between the stylesheets when a different size is chosen.
For my sample CSS zoom buttons page, I created three sizes. The default size is "small" or "S", with a "medium" ("M"), and "large" ("L") version for easier reading. I used the stylesheet switcher found on the About.com JavaScript site but you can also use a PHP stylesheet switcher if you like.
My page is very simple, I only styled three elements.
- My headline (<h1>)
- The body paragraphs
- The three zoom buttons
For my default stylesheet, I set the font sizes at:
- h1 { font-size: 1.2em; }
- p { font-size: 1em; }
- #zoom { width:6em; }
In the medium stylesheet, I set them a little larger, and in the large stylesheet even larger still. The result is that when you click on the S, M, or L on the page, the main page content gets larger. Try it for yourself.
Once you've written the three stylesheets, you need to attach them to your HTML. You do this by setting the main one as your primary stylesheet, and the other two as alternate stylesheets.
<link href="z_css_zoom_main.css" rel="stylesheet" type="text/css" title="main" media="screen" />
<link href="z_css_zoom_alt1.css" rel="alternate stylesheet" type="text/css" title="medium" media="screen" />
<link href="z_css_zoom_alt2.css" rel="alternate stylesheet" type="text/css" title="large" media="screen" />
Make sure you use the same titles in your stylesheet switcher JavaScript.
The HTML and JavaScript
Main CSS
Medium CSS
Large CSS
Sample Page
