Multiple Event Handlers for ONMOUSEOVER and ONMOUSEOUT

On this page: Test 1 | Test 2 | Test 3 | References | About these tests

Nearby: More HTML 4.01 Tests | UAAG 1.0 Test Suite

UAAG 1.0 Requirement

Checkpoint 1.2 Activate event handlers (Priority 1 ): Provision 2 : In order to satisfy provision one of this checkpoint, the user must be able to activate as a group all event handlers of the same input device event type. For example, if there are 10 handlers associated with the onmousedown event type, the user must be able to activate the entire group of 10 through keyboard input alone, and must not be required to activate each handler separately.

Test 1 :

Procedure

Using the keyboard or an assistive technology that emulates the keyboard, navigate to the image link and activate both ONMOUSEOVER events.
Using the keyboard or an assistive technology that emulates the keyboard, navigate off the image link and activate both ONMOUSEOUT events.

Run test

Expected results

Both images swap with keyboard command

Source code

<table border="1" cellpadding="10" summary="">
  <tr>
    <td rowspan="1" colspan="1">
      <a href="../action/return.html" shape="rect">
        <img id="lamp1" onmouseover="imgChange1('../images/tn_desklamp1.gif'); imgChange2('../images/tn_desklamp1.gif')" onmouseout="imgChange1('../images/desklamp2.gif'); imgChange2('../images/desklamp2.gif')" src="../images/desklamp2.gif" height="32" width="25" alt="Lamp turned off" border="0" name="lamp1"></img>
      </a>
    </td>
    <td rowspan="1" colspan="1">
      <a href="../action/return.html" shape="rect">
        <img id="lamp2" onmouseover="imgChange1('../images/tn_desklamp1.gif'); imgChange2('../images/tn_desklamp1.gif')" onmouseout="imgChange1('../images/desklamp2.gif'); imgChange2('../images/desklamp2.gif')" src="../images/desklamp2.gif" height="32" width="25" alt="Lamp turned off" border="0" name="lamp2"></img>
      </a>
    </td>
  </tr>
</table>

Test Script Code

				function imgChange1( img ) 
				{
   				document.lamp1.src = img;
				}	
				function imgChange2( img ) 
				{
   				document.lamp2.src = img;
				}		
			

Test 2 :

Procedure

Using the keyboard or an assistive technology that emulates the keyboard, navigate to the image and activate both ONMOUSEOVER events.
Using the keyboard or an assistive technology that emulates the keyboard, navigate off the image and activate both ONMOUSEOUT events.

Run test

Expected results

Both images swap with keyboard command

Source code

<table border="1" cellpadding="10" summary="">
  <tr>
    <td rowspan="1" colspan="1">
      <img id="lamp3" onmouseover="imgChange3('../images/tn_desklamp1.gif'); imgChange4('../images/tn_desklamp1.gif')" onmouseout="imgChange3('../images/desklamp2.gif'); imgChange4('../images/desklamp2.gif')" src="../images/desklamp2.gif" height="32" width="25" alt="Lamp turned off" border="0" name="lamp3"></img>
    </td>
    <td rowspan="1" colspan="1">
      <img id="lamp4" onmouseover="imgChange3('../images/tn_desklamp1.gif'); imgChange4('../images/tn_desklamp1.gif')" onmouseout="imgChange3('../images/desklamp2.gif'); imgChange4('../images/desklamp2.gif')" src="../images/desklamp2.gif" height="32" width="25" alt="Lamp turned off" border="0" name="lamp4"></img>
    </td>
  </tr>
</table>

Test Script Code

				function imgChange3( img ) 
				{
   				document.lamp3.src = img;
				}	
				function imgChange4( img ) 
				{
   				document.lamp4.src = img;
				}	
			

Test 3 :

Procedure

Using the keyboard or an assistive technology that emulates the keyboard, navigate to the form element and activate both ONMOUSEOVER events.
Using the keyboard or an assistive technology that emulates the keyboard, navigate off the form element and activate both ONMOUSEOUT events.

Run test

Expected results

Button color changes from red to white with keyboard command
Text value color changes from white to red with keyboard command

Source code

<form action="../action/return.html" method="get" enctype="application/x-www-form-urlencoded" name="form1" id="form1">
  <input style="background-color: red; color: white; font-weight: bold;" type="button" value="Test Button" onmouseover="changeBackColor(this); changeTextColor(this)" onmouseout="changeBackColor(this); changeTextColor(this)" name="button1" id="button1"></input>
</form>

Test Script Code

				function changeBackColor() 
				{
					if (document.form1.button1.style.backgroundColor == "red")
					 	document.form1.button1.style.backgroundColor = "white"
					else
					 	document.form1.button1.style.backgroundColor = "red"
				}
				function changeTextColor() 
				{
					if (document.form1.button1.style.color == "white")
					 	document.form1.button1.style.color = "red"
					else
					 	document.form1.button1.style.color = "white"
				}							 	
			

References

About this test suite

This test is part of a test suite for the User Agent Accessibility Guidelines (UAAG) 1.0 . This work is conducted by the User Agent Accessibility Guidelines Working Group , which is part of W3C's Web Accessibility Initiative (WAI) . Please send comments on this test to w3c-wai-ua@w3.org ( public archive ).

Test created by:

Dominique Kilman
Colin Koteles

Last modified: $Date: 2003/04/02 23:46:28 $ by $Author: jongund $