Changing Images with Even Handlers

The idea of the following three image-switching codes is the same:

1. Put image 1 into the browser window.
2. If X happens at location A, tell the JavaScript interpreter to replace image 1 with image 2.
3. If Y happens at location A, tell the JavaScript interpreter replace image 2 with image 1.
4. If Z happens at location B, it's none of my business.

Hence, in order to get an action performed, we have to

• call an agent, who will perform the action,
• identify the location that the agent should monitor,
• specify the event to which the agent has to react,
• and tell the agent what actions to take if the event occurs

The agent in all our cases is JavaScript, and we are invoking the agent via a <script> tag, a protocol handler, or a URL. The location must be an HTML entity that can handle the event we are expecting. The event must be a standard, HTML-specified event. (And it must be implemented, of course, by the browser. If the browser isn't programmed to handle the event we are looking for, we are out of luck. It won't happen just because we said so.) The action will be specified in our JavaScript code.

1. Simple rollover with "onmouseover" and "onmouseout"

JavaScript activated by form-action; move your mouse pointer across the image

Invocation: <form action="javascript:;">
Location: <td>
Events:: onmouseover, onmouseout

Code:

<form action="javascript:;" id="form1">
<table>
<tr><td>
  <a href="javascript:;" style="text-decoration: none"
  
  onmouseover="document.images['imageRollover1'].src='../images/bars/red_1px.jpg'"
  onmouseout="document.images['imageRollover1'].src='../images/bars/blue_2px.jpg'">
  
  <img id="imageRollover1" src='../images/bars/blue_2px.jpg' height="50" width="50" border='0'>
</td></tr>
</table>
</form>

2. "onclick" and "onmouseout"

Same thing as before, but here the second image appears after an "onclick" event. The first image is consists just of white color. JavaScript is activate with an <a> link.

Invocation: <a href="javascript:;">
Location: <a>
Events:: onclick, onmouseout

Click here

Code:

<table border="1" cellspacing="2" cellpadding="2" align="left" bgcolor="#FFFFFF">
  <tr align="left" valign="bottom">
    <td width="80">
      <a href="javascript:;" 
      
       onclick="document.images['framedPicture'].src='../images/pictures/cat2.jpg'; return true;" 
       onmouseout="document.images['framedPicture'].src='../images/pictures/whiteBlank.jpg'; return true;">

       Click here</a>
    </td>
    
  <td>
    <img id="framedPicture" src='../images/pictures/whiteBlank.jpg' border='0' width="203" height="153" >
  </td>
</tr>
  
</table>

3. "onmousedown" and "onmouseup"

Here the images change "onmousedown" and "onmouseup" to visually suggest a clicking event.

Invocation: <a href="javascript:;">
Location: <a>
Events:: onmousedown, onmouseup

Code:

<table border='0' width='74' height='73'>
<tr align="center" valign="center">
<td>

<a href="javascript:;"
  onmousedown="document.images['pushB'].src='../images/rollovers/otherOn.gif'; return true;"
  onmouseup="document.images['pushB'].src='../images/rollovers/otherOff.gif'; return true;">
<img src="../images/rollovers/otherOff.gif" align="middle" id="pushB">
</a>
</td>
</tr></table>