Lets get start with a small program of DHTML, 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
Here you can learn how to create mouse over and mouse out events which take place when the mouse pointer is moved across objects on the page.
Use Notepad to create an HTML document, using opening and closing HTML tags
<HTML>
..
</HTML>
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; } <p>
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
Create the BODY information for the HTML document.
<BODY><H1> Dynamic HTML Tutorials <H2> Tutorial 1 <H2> Tutorial 2 <H2> Tutorial 3 </BODY>
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=';'">
Tutorial1</H2>
onmouseover="this.className='Effect'"onmouseout="this.className=';'">
Tutorial2</H2> onmouseover="this.className='Effect'" onmouseout="this.className=';'">Tutorial 3 </BODY>
Please 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.
lionsgate
MemberNAT Warrior
