Changing the Color

One way to modify an element's appearance on the page is to set its style object's properties. For example, the following element changes its color to tan when moused over:

Mouse over me to see my over color. Then mouse out to see my out color.

Here is the HTML code that implements it:

<H1 onMouseOver="this.style.color = 'tan';"
 onMouseOut="this.style.color = 'purple';">
   Mouse over me to see my over color.
 Then mouse out to see my out color.</H1>

Notice that the text has three colors. The first color is the default color (black) which is being used upon loading (and reloading) of the page. The other two colors ("purple" and "tan") are set by the onMouseOver() and onMouseOut() events.

The second way to modify an element's appearance on the page is to change one of its object's properties. Each property reflects an attribute of the HTML element. The following image switches every time you mouse over and out of it:

Here is the HTML code for the above IMG element:

<IMG SRC="../bc.gif" onMouseOver="this.src = '../gl.gif';"
 onMouseOut="this.src = '../gr.gif';">

Notice that we display here three GIFs. The first one (../bc.gif) appears upon loading (and reloading) of the page. The left arrow image (../gl.gif) is invoked when the user mouses over the image. The right arrow (../gr.gif) is called whenever the user mouses out of the element.

Every object fires a PropertyChange event when one of its properties changes. You can use the onPropertyChange() event handler to do any additional actions, following the property change. The left image in the following pair behaves as the image above. The right image in the following pair is programmed to do an extra action whenever one of its properties changes. It sets the left image to its initial gif, (../bc.gif). Play around with the images:

Here is the code that implements the above pair of images:

<IMG ID = "leftImg" SRC="../bc.gif"
 onMouseOver="this.src = '../gl.gif';"
 onMouseOut="this.src = '../gr.gif';">
<IMG SRC="../bc.gif" onPropertyChange="leftImg.src = '../bc.gif';"
 onMouseOver="this.src = '../gl.gif';"
 onMouseOut="this.src = '../gr.gif';">

Notice how we access other elements. The left image is labeled with ID = "leftImg". The right image accesses the left image's SRC attribute as leftImg.src.

How to change the font (size and family)