Zooming Text and
Pictures
Zooming Text and Pictures
So you have a big picture that you want to shrink down or a small picture that you want to enlarge? Why not use the built-in sizing? Maybe you want the text to increase in size with the picture. Sure you could calculate everything, and even get the font size to work nicely. But then you realize that you did a lot of work and your background looks the same. This zoom feature will enlarge or shrink anything you tell it to. If you tell it to zoom the entire page, even the scroll bar will increase in size. Although this is used like CSS, it is a Microsoft® extension through IE. In other words, this only works on IE.
Zooming an Entire Page
If you want to enlarge your entire page (or make it smaller), you will need to use a stylesheet in your HTML document header. It should look something like the following:
<STYLE
TYPE="text/css">
BODY {ZOOM:
2;}
</STYLE>
This will double the size of the elements on the page. For more information on syntax, see the bottom of this article.
Zooming an Element or Elements
Maybe you only want to zoom only a picture, or several paragraphs. To do so, enclose the HTML tags within these tags:
<SPAN STYLE="ZOOM: 0.5;" ID="zoomCode" ><!-- Code goes here -->
</SPAN>
If you are not planning on adjusting the zoom with scripts, you do not need the "ID" part. This can be modified through scripts with "xxxx.style.cssText" with "xxxx" representing the ID or even document for zooming. Of course, other CSS changes can be made in the same way.
Syntax
Here are all the possible values for the zoom.
| Value | Descrption |
| x.y | A decimal value without the percentage is treated as a multiple. A value of 2 would yield an object twice as large, 0.5 would be half the size, etc. |
| x% | A percentage value would show the object at a percentage of the size. A value of 200% would yield an object twice as large, 50% would be half the size, etc. |
| normal | This is equal to a multiple of 1 or 100%. |
If you use the zoom on a page, use it sparingly as large pictures may cause noticable increases in time required to render the page.
A Cruel Trick: An Example
Do you know someone who has a 21 inch (53.34 cm) monitor who refuses to set their resolution higher than 640x480? Why not say something about them and make it really hard to read! Let's say the person is named Bob. Here is our example for Bob:
Before getting offended, scroll down.
A Zoom-Out button is provided so you can see the entire thing. Sure
this example is pointless, but the code reveals how the zoom works through
the use of scripts:
<HTML>
<HEAD>
<TITLE>Zoom Example for Bob</TITLE>
<STYLE TYPE="text/css">
BODY: {ZOOM: 3;}
</STYLE>
</HEAD>
<BODY>
<H1 ALIGN="LEFT">Bob sucks lollipops</H1>
<BUTTON onClick="zoomOut();" ID="Out" STYLE="ZOOM: 0.3;">Zoom-Out</BUTTON>
<SCRIPT LANGUAGE="JavaScript">
function zoomOut()
{
document.body.style.cssText="ZOOM:1;";
Out.style.cssText="ZOOM:1;";
Out.disabled=true
}
</SCRIPT>
</BODY>
</HTML>
This example works as long as the font size is not set to the largest setting.