HTML 4 Kids: Lesson Week 12

Adding JavaScript

JavaScript can be added to your pages to create interesting effects. Although JavaScript is a complete programming language and takes time to master, there are a few types of scripts that can be used without knowing the language.

Mouse Over Rollovers

This script is used to change an image when the mouse passes over it. This is often used to make navigation buttons light up when the user points to them.

1. Pre Load the images in the Head

   < script language="javascript">
    
   image1=new Image(136,34)
   image1.src="bookson.gif"
    
   image2=new Image(136,34)
   image2.src="booksoff.gif"
    
   < /script>
   

2. Flip the image in the body when the mouseOver event occurs

   < a href="#books" 
   onMouseOver="document.button1.src='bookson.gif'"
   onMouseOut="document.button1.src='booksoff.gif'">
   < img src="booksoff.gif" border="0" name="button1" width="136" height="34" > < /a>
   

3. Change the message in the status bar when a mouseOver and mouseOut events occur.

< a href="#books" 
onMouseOver="document.button1.src='bookson.gif';
		window.status='books';
		return true"
onMouseOut="document.button1.src='booksoff.gif';
		window.status='Vickys Page';
		return true">
< img src="booksoff.gif" border="0" name="button1" width="136" height="34" > < /a>

Cut and Paste JavaScript Aps

Many JavaScripts are available for anyone to use in their web page. Sometimes the script has two parts; one that goes in the head section and another that goes in the body section. If the script makes use of a graphic, you will need to copy the graphic also, and put that in the folder for your web page. You can adapt these to your own uses by substituting your own graphic and changing the filename in the script.

Here is a partial list of sites that offer free JavaScripts:

Website Abstraction

Dynamic Drive

JavaScript Mall

JavaScript World

JavaScript

Return