External JavaScript File

Now you can link all your javascript functions to an external final. Two pages can also share the same script (cuts down on disk space). Here's how it's done. The same part of the script that goes in the <head></head> tag goes in the external file minus the <script></script> tags. I'll use the Changing Image Script to explain how this is done.

First Step:
Create a blank page and name it anything you want, but with an exstension of ".js". I will name my file "changeimg.js"

Second Step:
Copy the <script></script> tag, leave out the acctually tag. For example, for the Changing Image script you would copy this (also changing the appropriate material).


var NN3 = false;
image1= new Image();
image1.src = "IMAGE FILE OFF";
image1on = new Image();
image1on.src = "IMAGE FILE ON";
image2= new Image();
image2.src = "IMAGE FILE OFF";
image2on = new Image();
image2on.src = "IMAGE FILE ON";

function on3(name)   {
        document[name].src = eval(name + "on.src");
}
function off3(name)  {
        document[name].src = eval(name + ".src");
}
NN3 = true;

function on(name)  {
        if (NN3) on3(name);
}
function off(name)  {
        if (NN3) off3(name);
}

See, no tags! Now save the file.

Third Step:
Open the page that you want to put the actual changing images to occur. In other words this page will call the functions in the ".js" file. In your <head></head> you need to input this, but change YOUR EXTERNAL JS FILE NAME (this tells the page where the external file is).

<script src="YOUR EXTERNAL JS FILE NAME"></script>

Now here are the images that change (This is what calls the functions in the external file). You input those just as you would any other script.

<a href="YOUR LINK" onmouseover="on('image1');" onmouseout="off('image1')"><img src="IMAGE FILE OFF"  border="0" name="image1"></a><br>
<a href="YOUR LINK" onmouseover="on('image2');" onmouseout="off('image2')"><img src="IMAGE FILE OFF"  border="0" name="image2"></a>

That's all there is to it! Good Luck!