onMouseover
If you are looking to do something interesting with the 'onMouseover' command then this will help!

What is the 'onMouseover' command? Well, take a look at the bottom line of your browser bar (the status bar) when you place the cursor arrow over this part of the sentence. If you look at the browser bar you will see what I mean.

Not sure where to look? The bottom line of your browser that usually says (in Internet Explorer) 'Done' and has a small 'E' logo next to it. When you passed the cursor arrow over the link you should see a short message. The cursor arrow also changes to a 'hand', signifying that it was pointing to a link. When you move the mouse off, you will see 'Welcome to Tactical Panda Websites'.

This isn't the real Javascript bit, but it leads us nicely into it. To understand the advanced stuff, it's a good idea to understand the basics of what you have just done first.

The example above, when clicked, took you back to the first page of the Javascript examples. If you clicked on it - welcome back! The codes for navigating around a site can be found in the HTML pages, so we won't repeat them here. Suffice to say we start with a code that re-directs your visitor to the destination page.

Here's the code. <a href="javatp.html">Javascript Page</a> This is a 'local' code, in other words it re-directs to another page within your site. It's just as easy to re-direct to another website, but you will require the 'full' code. Want an example? Here's one that is the re-direct to my ATC Squadron's website.

You may have noticed the addition of 'http://' which re-directs you to the internet.

Anyway, back to mouseovers. If you were to place your mouse arrow over an active hyperlinks you would see the entire link in the browser bar - exactly as written. With the 20 Squadron example you would see http://www.takeoff.to/20sqn. But what if you want to say something else like 'The best Air Cadet website in the world!' How do you do that?

Easy, let's go back to the code.

<a href="http://takeoff.to/20sqn">20 Squadron</a>

This time add the following coding AFTER http://takeoff.to/20sqn"

IMPORTANT! Ensure there is a space between .../20sqn" and onMouseover. So the entire code then looks like this:

<a href="http://takeoff.to/20sqn" onMouseover="self.status='The best Air Cadet website in the world';return true">20 Squadron</a>

This will give you the onMouseover command only. What about when you move the mouse arrow away? This is the onMouseout command.

After the return true" command, you then tell it what to say onMouseout. Another simple line of coding is added that goes like this:

Remember, you can say virtually anything at all, but NEVER use a single apostraphy (') in the text itself unless it is preceeded by a back slash (\). If you do accidentaly use an apostrophe, the code will not work and you will get a Javascript error message. Again, place a space after return true" following the onMouseover command, and the start of the onMouseout command.

Therefore the entire code will look like this:

<a href="http://takeoff.to/20sqn" onMouseover="self.status='The best Air Cadet website in the world';return true" onMouseout="self.status='Welcome to Tactical Panda';return true">20 Squadron</a>

Looks complicated doesn't it? Be assured that after you have done this a few times it gets really easy! I will re-write the code below and highlighted in red the areas you can alter to suit your own site.

<a href="http://www.takeoff.to/20sqn" onMouseover="self.status='The best Air Cadet website in the world';return true" onMouseout="self.status='Welcome to Tactical Panda';return true">20 Squadron</a>

If you have trouble with onMouseover commands then re-check the code carefully. The usual problems encountered with this are -

forgetting to put in '; before return true", and forgetting to put in " before self.status. We will cover other navigation system in more detail in the HTML pages.

Having said that...
Now that I have said all that you don't have to use the onMouseout command! The easy way to use a default message every time a page is loaded is in the <BODY> line. How? Like this:

By using this command, the message come up in the bottom browser bar as soon as the page loads, and returns to this message every time you move the cursor off a link!