In this lesson you will modify the home page for your game.  You will learn how to make pages change in response to users action by using dynamic HTML (DHTML). 

Web pages can be programmed to change when an event occurs.  An event is something that happens to the web page. For example, when the user clicks on a tag on a page, the onclick event fires.  The onclick event can be programmed so that a property of an element changes.

Line 4 illustrates the onclick event.  When the user clicks on the <div>, the onclick event is fired.  The code in line 4 causes the text color of the <div> to change to blue when the onclick event fires.  The this word refers to the <div> tag.  The expression this.style.color refers to the color style property of the <div> tag referred to by this.  The new value of the color property is set to "blue". Notice that the value blue is in single quotes and that the entire action for the onclick event is in quotes. 

event = "action"

onclick = "this.style.color = 'blue'"

Lines 5 to 7 show another way to change the properties of an element (tag).  In Line 5, the <div> tag is assigned an ID.  Every tag on a page can be given its own unique ID.  ID's can be used in code to refer to the tag. Be aware that ID's are case sensitive which means that D1 is different than d1 .  In line 6 the onmouseover event sets the font size of the <div> tag to "large".  Rather than using this to refer to the tag, the method document.getElementById() is used.  This method accepts the ID of an element in quotes between the parentheses.  Line 7 is very similar to line 6 except that the onmouseout event is defined.  Be aware that document.getElementById() is case sensitive meaning that you must type it in exactly as shown with the letters E, B and I uppercase.

Modify your home page for your game as follows.  Add onmouseover and onmouseout events so that the background color of the <div> changes when the user moves the mouse over the <div> and then changes back to its original color when the user moves the mouse off of the <div>. Your page should look similar to the page shown below.