|
|
|
|
|
|
|
| |||||
|
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
N.B. This next page is different to the one below, which scrolls to the next section! Sorry if this causes confusion!
|
