Today is . Page created 06/03/06, updated 06/16/06

Magnify Text Zoom (Magnify) Text Magnify Text

Zoom Text increases the font size of any section of text. Very easy to set-up and use. Eliminates extra style sheets. "Click anywhere in the below paragraph to see the effect work". This is a good effect if you have visually impaired visitors that use your site and need the text magnified to assist them in reading your information.

Notice Nothing Moves Below This Paragraph!
We the People of the United States, in order to form a more perfect union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the blessings of Liberty to ourselves and our posterity do ordain and establish this Constitution for the United States of America.

For Your Information For your Information:     As you have noticed in the above paragraph that we have configured to magnify on mouse click, there is a space top and bottom. Reason being is quite simple. The space is caused by us adding a height defined <table> </table> around the paragraph. If we did not add the table, all the material below the effect would jump to make room for the magnification of the text. To remove that little annoyance and to elevate the level of professionalism by not having everything move, we suggest you add the height defined <table> </table> surrounding the paragraph(s) you want magnified. [ Further Down ] we will show you where and howto add the defined table. If you would like to see the effect without the added table, just grab the below link and see what we are explaining.
[ Effect Without Defined Table ]

We have tested the code in IE6.0, Firefox1.5.0.3, Opera8.54, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

D epending on your knowledge of HTML and javascripts, this is an easy four (4) part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document. You must also save as and upload a "Blank"* image into your directory along with the use of an external .js script you need to save and upload into your directory.

* The "Blank" image that will be called is located in the external zoomText.js file you need to save and upload. See the below on where it is located and once you upload it, you need to change the path of the image to that of your own and not use the default already located within the external .js file.

// **** Customising Variables

var zxcBlankImg='Path To Uploaded Blank.gif Image'; // a blank .gif as a background image or null if not required null;


// Functional Code - NO NEED to Change

B elow inside the table is the "Blank.gif" you need to save as and upload into your directory.
"Do Not Forget" once you have uploaded it to change the image path to that of your own. The only reason you see a border around the image is because we defined it as border="1". The image itself is clear and for all intensive purposes "invisible". We defined the border="1" so you could see what to click on in order to save it.

Blank Image To Be Saved As (Blank.gif) And uploaded
Save As Blank.gif

Warning Logo     Note Of Importance:     If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

O nce you have made and uploaded the zoomText.js into your directory, now you need to add a snipplet of code into the <HEAD> section of your document to call the external zoomText.js. If you have uploaded this file into a different directory, you may need to change the path of the file.

<script type="text/javascript" src="zoomText.js"></script>

O nce all the above is done, now you need to surround the text you want to be able to be magnified. This part surrounds any and all text you want this effect to work within the <BODY> section of your document.

<div id="demo" onclick="zxcZoomText(this,14,20,10);">
Place Text Here To Be Magnified
</div>

N otice in the above the closing </div> tag. If you remove it and what you want magnified is not surrounded by a height defined table, you can click anywhere down the page to make that original paragraph still become magnified. In other words, "Do Not remove it.

Add-On Not Included In Script Little Extra Not Included In The Script:     If you want to add the height defined table around any/all text you want to magnify, see the below on howto:

<table bgcolor="#000000" border="0" height="?" cellpadding="4" cellspacing="3">
<tr>
<td bgcolor="#000000" align="left" colspan="3">
<div id="demo" onclick="zxcZoomText(this,14,20,10);">
Add Your Text Here
</div>
</tr></td>
</table>

[ Return Whence You Came ]

W here the "?" is, you need to substitute a pixel value that will make it work for the material you place within the effect. This you need to experiment with until you do not get any jump below the effect.

Warning Logo     Note Of Importance:     This effect will "Not" work on any text that is defined with a font size. In other words if the section of material has a defined font size attribute included in the font tag as shown below, the effect won't work.

Will Not Work:
<div id="demo" onclick="zxcZoomText(this,14,20,10);">
<font face="georgia,arial,helvetica"size="3"color="#fff0f5">
<p>Some text Here</font></p>
</div>

This Text Will Not Magnify
Click Me To See

Will Work:
<div id="demo" onclick="zxcZoomText(this,14,20,10);">    
<font face="arial,georgia,helvetica"color="#fff0f5">    
<p>Some text Here</font></p>
</div>

This Text Will Magnify
Click Me To See

A ll we did was to remove the attribute for size="3" to make the effect work

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]   [ Rate This Page ]