The Zoom Five Option

Check out this neat little script that allows users to zoom in a number of different ways.

We have tested the code in IE 7.0, Firefox 2.0.0.6, Opera 9.23, Netscape 9.0b3, Netscape 8.1.3, AOL Explorer 1.5 and Safari 3.0.2. This script worked well in all platforms with no variations observed.

System Requirements: IE 5.5, 6, 7, 8, FireFox, Opera, Chrome, 1 2 and Safari.

This script makes use of absolute positioning for the map. (This part of the code is located within the <BODY> section and we will show you further down where and howto reconfigure). If you need a little refresher on howto, grab the below link and it is all explained.
[ Absolute Positioning ]

D epending on your knowledge of HTML and javascripts, this is an easy three (3) 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 file you need to save and upload into your directory.

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 ]

For your Information: If you are not comfortable or prefer not to use the external.js file, you can use the traditional cut/copy and paste instead of the external .js file. If you need a little refresher on what is required to achieve this, grab the below link and it is fully explained.
[ Traditional Cut/Copy and Paste ]

Step One Since the site where you get the script does not give you a way to access the zoom.js file, you can get it from [ Here ]

Step Two Whichever above method (external.js or Traditional Cut/Copy and Paste) of adding a section of code into the <HEAD> section you select to use, there are "No" reconfigurations to be made in this section.

Step Three Now you need to upload into your root* or top* directory your graphic that you are going to use in this effect and name it "carte.gif"**

* Reason for being uploaded into that specific directory is simple. there are too many reconfigurations to be made within the external.js file and <BODY> section. It is much easier to just upload it into that directory.
** Same reasoning as above.

Step Four Once the above is done, you can now paste the <BODY> section of code where you want the effect to be visible and start with the reconfigurations (see below) such as absolute positioning etc.

<------Start Section of Code (<BODY>) You Need To Be Concerned With ------>

<------End Section of Code (<BODY>) You Need To Be Concerned With ------>

<div style='height:400px;width:500px; ---------------- This is the size of the area that the graphic is located, Not the size of the graphic itself. Our graphic is 800px by 800px. The script itself resizes it for obvious reasons.
* We suggest you leave these reconfigurations as is because it plays well with outhers at this size.
position:absolute;left:10px;top:200px; ---------------- This is where your knowledge of absolute positioning comes into play. These are the settings for where on the page the effect will be positioned. These you need to play around with until you get the position that works for you.
background-color:black' ---------------- This is the background color behind your graphic.
<img id='divim'src='carte.gif' ---------------- This is the graphic you uploaded earlier.
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 ] [ Scripts In Conflict ]