JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



External JavaScript File

This is the way that you should insert javascripts into your pages because it keeps your pages clean and in order. View the source of this page to see an example. There are many external scripts being used on this page. Follow example below and create your external javascripts its easy and useful.


Insert into <HEAD>


Insert into <BODY>


Other Options
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