Main Menu
Multiwingspan Home Page
Multiwingspan Games
Gnasher @ Multiwingspan
Multiwingspan Calendar
Multiwingspan Clock
About Multiwingspan
Programming
Visual Basic 6.0 Guide
Visual Basic 6.0 Examples
Turbo Pascal Guide
SWI Prolog Guide
Visual Basic 2005 Guide
Structured Query Language
Web Design
HTML Design Tasks
Introduction To HTML
Introduction To CSS
Introduction To Javascript
Notes
AS/A2 Level Computing

Cascading Stylesheets Guide
Event Handlers

Including one of HTML’s built-in event handlers among the attributes of an HTML tag can allow you to change the way that an element looks when the user clicks or moves the mouse over it. This creates the impression of interactivity without the need for knowledge of any special programming skills.

example code

<html>
<head>
<style type="text/css">
.red {
font-family: Arial;
font-size: 12pt;
color: red;
}
.black {
font-family: Arial;
font-size: 12pt;
color: black;
}
</style>
</head>
<body>
<p class="black" onmouseover=’this.className="red";’ onmouseout= ’this.className="black";’>
Move the mouse over this writing
</p>
</body>
</html>

Exercise 23

Copy the above code into a web page. Add a hyperlink with a mouseover effect as well.

Move the mouse over this writing to see how the above code works.

Other event handlers

onclick=" " when the user clicks on the element
onmousedown=" " the moment when the user clicks on the element
onmouseup=" " the moment when the user releases the mouse button
onmousemove=" " when the mouse is moved across an element

Exercise 24

Create a single web page which demonstrates the effects that can be created with event handlers and style sheets.

Return To CSS Guide || Return To Homepage