Find Out About Me Here My favourite downloads, and a selection of files that can be downloaded are here This is where you can find out loads of information about all kinds of things My HUGE list of links to all over the place What is new around here there and everywhere
Back To The Download SectionTo The Second Help Page


About Me
Help Pages
Help Page 2
Help Page 3
Info Pages
Email Me


Images Archive
Meets Section
Photos Section
Unreal Section


Simple Site
Em's Website
Unreal Website

Latest Links

Help Pages
Stylesheet Help
Lancaster Meet 1
Lancs 1 Photos
Lancaster Meet 2
Lancs 2 Photos

This page is going to offer all kinds of hints and tips and just Help! on a variety of topics. If there is anything you would like to share with us all, then please e-mail Me! and I will add it to this section. Only useful things will be added, so no spam!

For help on the PGPlus Talker Commands please view the Talker Help section.

Well here we are, on the help page. Now, perhaps a good place to start is to offer a few useful insights into how some of the effects have been created on these pages. The JavaScript mouse over effects for starters and maybe even moving into how the drop down box works too!

The JavaScript History Back effect

First though, before all that, how about that pretty good scrolling back of the browser history? How is that achieved? By use of a small piece of JavaScript no less! It really is very simple when you know how! Those of you who have read the source code for this page will already have seen the code. The whole chunk for the effect is:

A HREF='javascript:history.back()'

What this means is that the hyperlink ( the A HREF bit ) instead of calling a file, a URL or a TELNET link etc, should run this piece of code. The code is JavaScript, and the function is a command on the browsers history. Infact, the history should go back! The ending brackets show that there is no variable present. It is important to wrap this in the single ' rather than the usual " mark. To add more to this little piece of code, we are now going to give it a mouse over effect. Again this is very simple, you just need to make sure that you write the code in the correct manner taking note of the punctuation and capitalisation. The mouse over effect is a two stage process.

Stage 1: The onMouseOver event

The onMouseOver event instructs the browser to do something when the mouse pointer moves 'over' some area of the screen. It is important to recognise that the event MUST have the capital M and O. It is a function within JavaScript, and will only work when typed as in the title. The next part is what to do with this event. In this case we want to display a short message in the status bar usually found at the bottom of the browser window. You know, where it shows the location of files! To alter this we make use of the command status. This instructs the browser to make use of the status bar. After this comes what should be displayed, the message. Finally we finish the statement with a return true comment. This is just for completeness. The overall code is so far:

onMouseOver="status='Message to be displayed'; return true;"

Stage 2: The onMouseOut event

The onMouseOut event handles things that should happen when the mouse pointer moves away. In this way we can replace the message of the mouse over with either another message or nothing. A quick note; the actual task to carry out is held inside "quotation" marks, while the message uses just single (') marks. This is VERY important to recognise! The onMouseOut command is constructed in a similar way to the one before, giving us:

onMouseOut="status='Another message to be displayed'; return true;"

Stage 3: Combining it all

So, now we need to add it all together. By adding the onMouseOver and onMouseOut events INSIDE the two chevron ( < > ) marks, we can add the mouse over effect. The combined code look something like this:

< a href='javascript:history.back()' onMouseOver="status='Message to be displayed'; return true;" onMouseOut="status='Another message to be displayed'; return true;" >

Now all that is left to do is to create a hyperlink by closing the anchor HTML tag with a < /A > ( Remember to remove the spaces between the chevrons! ) So now we have when it is all put together:

< a href='javascript:history.back()' onMouseOver="status='Message to be displayed'; return true;" onMouseOut="status='Another message to be displayed'; return true;" > Click to go back a page < /a >

And this will give us a browser history back button! Try the examples below and notice the effect on the status bar in both instances. What is the difference?

Click to go back a page              Click to go back a page

To The Next Help PageWow! That's pretty cool! So what else can we do with this JavaScript stuff? Well, we can do a lot with it! WebPages can be made 'interactive' and exciting. By now you must have noticed that when you hover the mouse over the buttons on this page they change colour. If not, try it out now! Just point the mouse to one of the images and look at what happens. How is that effect created? Well this is quite a bit more complex, and I am NOT an expert ( as is probably evident already from the above bit! ) But I will try my best to explain it. So to find out more, please read the next page...

N.B. This next page is different to the one below, which scrolls to the next section! Sorry if this causes confusion!

Back To The Previous Page... Email Me Now with comments and suggestions To The Top Of The Page To The Next Page