Zoom buttons are those tiny icons we see on many websites that concede your readers to change the rise distance of the page on the fly. CSS wizz buttons use CSS to change the rise sizes and JavaScript to make the change. The pivotal to zooming with CSS is regulating swap stylesheets to set the sizes of your fonts on the page. Then we use a elementary to switch between the stylesheets when a opposite distance is chosen.
For my page, we combined 3 sizes. The default distance is “small” or “S”, with a “medium” (“M”), and “large” (“L”) chronicle for easier reading. we used the stylesheet switcher found on the About.com JavaScript site though we can also use a if we like.
My page is really simple, we usually styled 3 elements.
- My title (h1)
- The physique paragraphs
- The 3 wizz buttons
For my default stylesheet, we set the rise sizes at:
- h1 { font-size: 1.2em; }
- p { font-size: 1em; }
- #zoom { width:6em; }
In the middle stylesheet, we set them a small larger, and in the vast stylesheet even incomparable still. The outcome is that when we click on the S, M, or L on the page, the categorical page calm gets larger. .
Once you’ve created the 3 stylesheets, we need to insert them to your HTML. You do this by environment the categorical one as your primary stylesheet, and the other dual as swap stylesheets.
couple href="z_css_zoom_main.css" rel="stylesheet" type="text/css" title="main" media="screen" /
couple href="z_css_zoom_alt1.css" rel="alternate stylesheet" type="text/css" title="medium" media="screen" /
couple href="z_css_zoom_alt2.css" rel="alternate stylesheet" type="text/css" title="large" media="screen" / Make certain we use the same titles in your JavaScript.
You must log in to post a comment.