Use of the Mouse to Change Your Web Page

Introduction to Dynamic Html -- Using Event Handlers

Event handlers let you create web pages that can change with a mouse click. Event handlers can be used to trigger scripts, written in languages such as JavaScript. In this section we use them without scripts, to change html properties.

Event handlers have had browser support since Internet Explorer version 5, Netscape version 6, and Firefox version 1.

Note: Browsers or firewalls may block event handlers. If the examples on this page do not work, that is the first thing to suspect.

Some Event Handlers Supported by Html

Page Related	onload onunload
Mouse Related	onclick ondblclick onmouseover onmouseout onmousedown onmousemove onmouseup onselect
Keyboard Related	onkeydown onkeyup
Related to Forms	onfocus onblur onchange onsubmit

Event handlers are considered to be attributes, but they do not have values, as most attributes do. Instead, the event handler is set equal to a statement of what is to happen when the event occurs. We will call this the event statement.

onclick="event statement"

The event statement assigns a new value to an html DOM property. When the event occurs, the html DOM property will change to the new value, thus changing the web page. This is called Dynamic Html.

Use of Event Handlers to Change Images

For our first example, we will use mouse clicks to change an image.

The image is changed by changing the source file. The code is:

<img src="hackanm.gif" width="12%"  
   onclick="src='boy.gif'" 
   ondblclick="src='hackanm.gif'">

Note the use of single quotes within the event statements.

This example is deceptively simple, because "src" is an attribute of <img>, and it appears that the event statement "src='boy.gif'" is simply resetting the attribute. This is not true. It works only because "src" also happens to be the DOM name for the src attribute.

Use of Event Handlers to Change Text

In this example, "innerHTML" is the DOM name for the text of the paragraph.

<p onclick="innerHTML='Something new to say'">
<b>Click the mouse on this text to see what happens</b>
</p>

Click the mouse on this text to see what happens.

Use of Event handlers to change style

Colors

In this example, text color is changed by moving the mouse.

<p style="color:blue "onmouseover="style.color='red'"
onClick="style.color='green'">
<b>Move the mouse over this text. Click it.</b></p>

Move the mouse over this text. Click it.

This example makes clear the distinction between the attribute statement setting the original color of the paragraph, and the event statements. When "style" is used as an attribute, the correct format is:

style="color:blue"

When "style" is used as a DOM name the correct format is:

style.color='red'
style.color='green'

This example also shows that more than one event handler can be used simultaneously.

Visibility

The visibility property can be used with event handlers to make visible text invisible.

<p onclick="style.visibility='hidden'"
    onmouseout="style.visibility='visible'">
<big>Click the mouse on this text to see what happens</big></p>

Click the mouse on this text to see what happens

However the reverse will not work. Invisible text can be made visible, but not by reversing this process. The invisible text below will not become visible with a click, a mouseover or a mouseout.

<p style="visibility:hidden" onclick="style.visibility='visible'">
onmouseover="style.visibility='visible'" onmouseout="style.visibility='visible'"
<big>This invisible text is supposed to become visible, but it doesn't.</big>
</p>

onmouseover="style.visibility='visible'"onmouseout="style.visibility='visible'" This invisible text is supposed to become visible, but it doesn't.

Text-transform

Text-transform is one of those many properties whose spelling as an attribute name differs from its spelling as a DOM name.

<p style="text-transform:lowercase" 
   onmouseover="style.textTransform='uppercase'"
   onmouseout="style.color='blue'">
<b>Move the mouse over this text to see what happens</b></p>

Move the mouse over this text to see what happens

Font-size

The attribute name font-size changes its spelling to the DOM name fontSize. I also changed the line height; this is necessary because I have a line height directive in my style file. Note that here I used two style changes with one event handler, by separating them by semicolons.

<p onmouseover="style.fontSize='40px'; style.lineHeight='40px'"
onmouseout="style.color='blue'">
<b>Mouse over this text to see what happens</b></p>

Mouse over this text to see what happens

Using Event Handlers to invoke window methods

The window provides a set of methods (or functions) which are useful in scripting languages. Of these, I have found three, which can be implemented in html, without using script tags. They are:

the window.alert() method

<p onclick="window.alert('False alarm')">
  Click on this Text for a Big Surprise!
</p>

Click on this Text for a Big Surprise

the window.document.write() method

<p onclick="window.document.write('Another False alarm')">
  Click on this Text
</p>

Click on this Text

the window.print() method

<p onclick="window.print()">
  Print this page.
</p>

Print this page.

Note: The window.document.writeln() method is supposed to skip a line after the text is written. It works for me unpredictably. I use instead
window.document.write('text', <br>)
which can be counted on to skip a line.