Today is . Page created 03/27/07
 Document Magnifier 2.0 
|
This script takes full advantage of IE5.5's [ zoom-in ] feature to allow you to selectively magnify any area of a webpage.
This magnifier works really well if the text has to be for whatever reason defined extrmely small and hard to read. Drag the magnifier across these words and see how well it enlarges the text to a readable size.
We have tested the code in IE7.0, Firefox2.0.0.3, Opera9.10, Netscape8.1.2 and AOL Explorer1.5. This script worked well in IE7.0 and AOL Explorer1.5. In all other platforms it will not be visible. It degrades well and you will not get any error messages.
Depending 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. It also makes use of an external .js script, an upload of seven (7) images as well as an upload of an HTML document(zoom.html)*. Everything needed is included in a zip file you will download from the script site.
* This HTML document (zoom.html) contains only one (1) line of code (see below) - nothing else. It does not have any HTML tags such as opening and closing html tags, <HEAD> and <BODY> tags etc. "Do Not" add anything to this page. This is for all intensize purposes the little page that is the Magnifier.
<div id=writeToMe></div>
When you upload all the images into your directory, be sure that they are uploaded into your "Top" or main directory. Reason being is quite simple. The way zoom.js is configured, all the images are being called from that directory. Instead of trying to explain howto reconfigure the zoom.js file, it is much easier to just use your top directory. You can upload the zoom.js file into any directory you want. Just make the reconfiguration in the <HEAD> section of code to reflect this.
Point Of Information This question has been asked of us and to answer in a word, "No". You "do not put the code" from the "readme" instructions page on the zoom.html page (See above*). You put these codes on the page you want to have areas viewed under magnification.
For your Information: Contained within the "Zip" file you will upload, there is a "readme" text document. This contains all the instructions on howto add the "Document Magnifier" into your page(s).
On the "readme" instructions page it states:
- "......STEP 4: Finally, inside "zoom.js" make sure variable "iframeSrc" correctly points to the path of "zoom.html" You can open zoom.js using any text editor......" See below what that is explaining:
- *******************************
*/
//configure iframe src for zoom box
var baseDir="";//configure this to the directory you wish to keep the magnifier files in i.e. /magnifyfile/
var zoomFactor=20;//percentage int[1-100]
var startZoom='120%';//percentage string[>= 0]
//DO NOT EDIT BELOW THIS LINE
//---------------------------
var iframeSrc = "zoom.html";
By default, you should not have to reconfigure this. It should be as is. It is just better to be safe than sorry and verify it is as it should be.
- Also notice on the above code the 20 and the 120. This you can reconfigure. These reconfigurations are for the zoom factor or in other words, each time you click on the little
icon what percentage will it magnify. The 120 is the point that when the page opens, what percentage of magnification is already set in the magnifier.
When you are editing this effect in an editor such as "Angelfire", when you "Preview" the page, the effect "Will Not" work and you will get an error message in the task bar. The error message will be "Error on page" with the little yellow triangle. Do not be concerned, this is normal. When you view the effect on a page without calling it from the cgi/auth/webshell, it will function perfectly with no error message.
We 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 ]