[javascript]

Javascript Text Links

A very simple and easy to maintain way of adding text links to a site is by using a .js file. Below is an example of a javascript text link file:

Copy the above line of code into a new file in your HTML editor and save as links.js. Put the file in a subdirectory of your website called 'scripts'. Then type the following code into any page in your web site directory at a point where you wish to call the text links on the page:

Now, when you view your page, you should see a text link saying Homepage at the point you inserted the above code. Now add as many links to the file as you want - that's all there is to it!

I know, I know...there's always a catch, right? Well, as in all other areas of web design, there are a few rules you need to follow when creating your JavaScript Text Link file.

» RULE 1

Each row of links must be written on one row in your .js file - CARRIAGE RETURNS CANNOT BE USED.

If you require more than one row of text links, you must finish the first row by inserting a <br> just before the "); at the end of the line. Each new row of links must start with document.write("

If you remember to start all .js files like this: document.write(""); then all you have to do is type your links as normal inbetween the 2 quotes ("")

» RULE 2

Because JavaScript uses quotes as part of it's syntax, you must not put your links inside quotes as you normally would when writing HTML. So, a row of links in a .js file would look something like this:

You may also want to make your links look more attractive by using a character to create a 'break' or applying CSS styles. Below are an assortment of layouts which can all been created using .js files:

Here are the CSS styles used for each example:

and here are the scripts used for each one:

You will notice in the JavaScript code, all special characters are referenced using their ASCII code and not simply typed in from the keyboard, i.e., typing &curren; will give you ¤.

Dont forget to replace the href #'s with your own anchor references, i.e. index.htm for the home link or javascript:history.back(); for the back link.

As long as you stick to the basic rules of keeping all your code on one line and not using "" 's around your href text or classes, you should be able to experiment with all kinds of layouts to get a desirable effect on your page - AND THE GREATEST PART IS...when you need to change a link, you only have to change ONE FILE - not every page on your site!