JavaScript page

Site hosted by Angelfire.com: Build your free website today!

In order to make use of the information in this section, you have to have SOME knowlege of html coding, or else you won't know what to do with the scripts. However, it's pretty self-explanatory really. I will outline how you can make use of JavaScript to make your website more impressive, in the best ways that I know of (there are loads of different scripts, but I consider a lot of them unnecessary). The sections covered are:

What is JavaScript?
OnMouseover image swap
Day-of-the-week image displayer
JavaScript resources

Part 1 - What is JavaScript?

JavaScript is a scripting language which is based along the same lines as the programming language, Java. But where Java is a programming language, and has all the associated functions (almost anything you can imagine), JavaScript is basically for writing fancy bits in webpages. Having a wider range of functions, as is necessary for a programming language, Java is more versatile and you can do more stuff with it, but JavaScript is quite sufficient for writing a fairly complicated webpage. Java can be used in webpages, mostly in the form of applets, which do specific things. But mainly you'll find JavaScript (and dynamic html, which I know nothing about) in webpage sources. To use any of these scripts you need to go to 'edit page source' on the edit menu in Composer, and I'd imagine there was a similar function in most other webpage editors.

Part 2 - OnMouseover image swap

The first and most important script which I used is the 'OnMouseover' command. That's the one which changes the colour of buttons / changes an image when the user moves the mouse over them. This is probably the most popular JavaScript function, and there are various ways of achieving it. This is the way I found most suitable. If you don't agree, just try one of the other sites listed under JavaScript resources. To see an example of this script, move your mouse cursor over the title of this page. Unfortunately, this script will only work with IE or Netscape 4.x

First, the images need to be pre-loaded (so that the graphics switch instantly when the mouse cursor is moved over them). To do this the following is added to the HTML source code within the <head> tags.

<Script LANGUAGE="JavaScript">

</SCRIPT>

Then, having loaded the images, the script needed to alternate them (and take them to the specified link) needs to be added to the <body> section of the source. And that, my friends, is this:

<A HREF="linkedpage.htm" onmouseover="document.graphicholder.src = graphic2.src" onmouseout="document.graphicholder.src = graphic1.src">
<IMG ALT="Alternative text" SRC="image1.JPG" BORDER=0 ALIGN=bottom name="graphicholder"></A>

That script is all very well for a single button, but doesn't work for a button list, as I have on my 'home' page. In order for each button to change individually, the script in the <head> section must be:

<Script LANGUAGE="JavaScript">
<!--
var graphic1a = new Image();
graphic1a.src = "image1a.JPG";
var graphic1b = new Image();
graphic1b.src = "image1b.JPG";

var graphic2a = new Image();
graphic2a.src = "image2a.JPG";
var graphic2b = new Image();
graphic2b.src = "image2b.JPG";
// -->
</SCRIPT>

And following that the tags in the <body> section should be changed accordingly:

<A HREF="linkedpage1.htm" onmouseover="document.graphicholder1.src = graphic1b.src" onmouseout="document.graphicholder1.src = graphic1a.src"> <IMG ALT="Alternative text" SRC="image1a.JPG" BORDER=0 ALIGN=bottom name="graphicholder1"></A>

<A HREF="linkedpage2.htm" onmouseover="document.graphicholder2.src = graphic2b.src" onmouseout="document.graphicholder2.src = graphic2a.src"> <IMG ALT="Alternative text" SRC="image2a.JPG" BORDER=0 ALIGN=bottom name="graphicholder2"></A>

And so on... What I have done is specified the 'graphicholder' to correspond to the graphics which I want displayed.

Part 3 - Day-of-the-week image displayer

I rather like this script - I used it on another site to display an image related to the origin of the name of the current day. I actually got it from Website Abstraction, which offers free cut-and-paste JavaScripts and which is featured under other resources. Still, I'll put it in here so that you don't even have to make the effort to click on the link.

It's a nice simple one - all you have to do is insert this into the <body> of the HTML code for the page:

<script>

var mondayimg="monday.gif"
var tuesdayimg="tuesday.gif"
var wednesdayimg="wednesday.gif"
var thursdayimg="thursday.gif"
var fridayimg="friday.gif"
var saturdayimg="saturday.gif"
var sundayimg="sunday.gif"

That takes care of the images - the next bit deals with finding out which image to display:

var mydate=new Date()
var today=mydate.getDay()
if (today==1)
document.write('<img src="'+mondayimg+'">')
else if (today==2)
document.write('<img src="'+tuesdayimg+'">')
else if (today==3)
document.write('<img src="'+wednesdayimg+'">')
else if (today==4)
document.write('<img src="'+thursdayimg+'">')
else if (today==5)
document.write('<img src="'+fridayimg+'">')
else if (today==6)
document.write('<img src="'+saturdayimg+'">')
else
document.write('<img src="'+sundayimg+'">')
//-->
</script>

Et voila - one image for each day of the week. In order to do what I did: have a graphic of the name of the day as well as display a corresponding picture, you need to change mondayimg to mondayimg1, mondayimg2 etc. accordingly.

Part 4 - Other resources

Website Abstraction - a really user-friendly site which offers cut&paste JavaScripts.
JavaScript intro by Voodoo - a quick intro to the wonders of JavaScript, a few basic scripts.
JavaScript City - free JavaScripts
FreeWebHelp - does exactly what it says on the tin.