Javascript: third lesson


In this lesson I'm going to show you the way to change the background color of an HTML page. Place the cursor over (DON'T CLICK!) one of these colors:

RED WHITE YELLOW BLACK

And this is the HTML source:

<HTML><HEAD><SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript

function myfunction(mickeymouse) {

document.bgColor=mickeymouse

}

// - End of JavaScript - -->
</SCRIPT></HEAD>

<BODY>

<a href="blahblah" onmouseover="myfunction('red')">RED</a>

<a href="blahblah" onmouseover="myfunction('white')">WHITE</a>

<a href="blahblah" onmouseover="myfunction('yellow')">YELLOW</a>

<a href="blahblah" onmouseover="myfunction('yellow')">YELLOW</a>

</BODY>
</HTML>

Do you need any explanation?

Document is an object. This HTML page is the Document object! BgColor is one of several Document object's properties. In fact bgColor is the HTML page's (the Document object) background color. Whenever the MouseOver event occurs (you, visitor, move the cursor over the RED link, for example), the OnMouseOver event-handler calls the 'myfunction' function. In other words, by means of the Javascript language, you can 'talk' to the browser. In this case, you are saying to the browser: 'browser, perform the 'myfunction' function'. What's happen inside of that function? Well, you are saying to your browser: 'please, browser, assign the 'red' value to the bgColor Document's property. You need a variable to do this job. In fact, the 'mickeymouse' variable can contain: 'red', 'white', 'yellow' or 'black'. You can't know where the user will place the cursor, so you can't assign a fixed value to the BgColor property (such as 'white' for example); you have to assign a value to a variable (mickeymouse) depending on where the user will place the cursor...


Index           Home  Back       About  Contact us!

Copyright (c) 1998-2006 Wowarea