| Tutorial
1
How to create mouse events
Since the mouse is the primary pointing device for web
navigation, mouse events enhance the appearance of a Web page. There are several mouse
events:
- onmouseover
- onmouseout
- onclick
- onmousemove
This tutorial demonstrates how to create mouse over and mouse out
events which take place when the mouse pointer is moved across objects on the page.
Step 1: Use
Notepad to create an HTML document, using opening and closing HTML tags:
<HTML>
...
</HTML>
Step 2: Use
a style rule to define the default appearance of the document. In this case, we want to
create a style for the default text using 24 point Verdana font and the text will be red
on a black background, as follows:
<STYLE>
BODY { background-color: black; color: red; font: 24pt verdana; }
</STYLE>
Step 3:
Insert another rule between the STYLE tags for the "mouse over" event which will
change the color of the text to white:
.Effect { color: white; }
Note that there is a period "."
before "Effect". We are using the CSS Class property.
Step 4:
Create the BODY information for the HTML document.
<BODY>
<H1>Dynamic HTML Tutorials</H1>
<H2>Tutorial 1</H2>
<H2>Tutorial 2</H2>
<H2>Tutorial 3</H2>
</BODY>
Step 5: Add
the event names into the tags where the events are desired and access the style rules
through the className property.
<BODY>
<H1>Dynamic HTML Tutorials</H1>
<H2 onmouseover="this.className='Effect'"
onmouseout="this.className=';'">Tutorial 1</H2>
<H2 onmouseover="this.className='Effect'"
onmouseout="this.className=';'">Tutorial 2</H2>
<H2 onmouseover="this.className='Effect'"
onmouseout="this.className=';'">Tutorial 3</H2>
</BODY>
Note that we are restoring the text to the default
setting on "mouse out", by setting the className for the element equal to an
"empty string" containing a semicolon.
Step 6:
Check your coding for error and save the document. Your document should look like this example. |