# Using redundant keyboard and mouse event handlers

ID: SCR2

Technology: client-side-script

Type: Technique

## When to Use

HTML with scripting support.

## Description

The objective of this technique is to demonstrate using device independent events to change a decorative image in response to a mouse or focus event. Use the `onmouseover` and `onmouseout` events to change a decorative image when the mouse moves on top of or away from an element on the page. Also, use the `onfocus` and `onblur` events to change the image when the element receives and loses focus.

The example below has a decorative image in front of an anchor element. When the user mouses over the anchor tag, the decorative image in front of the anchor is changed. When the mouse moves off of the anchor, the image is changed back to its original version. The same image change effect occurs when the user gives keyboard focus to the anchor element. When focus is received the image changes, when focus is lost the image is changed back. This is accomplished by attaching `onmouseover`, `onmouseout`, `onfocus` and `onblur` event handlers to the anchor element. The event handler is a JavaScript function called `updateImage()`, which changes the `src` attribute of the image. The `updateImage()` is called in response to the `onmouseover`, `onmouseout`, `onfocus`, and `onblur` events.

Each image is given a unique `id`. This unique `id` is passed to `updateImage()` along with a boolean value indicating which image is to be used: `updateImage(imgId, isOver)`;. The boolean value of true is passed when the mouse is over the anchor element or it has focus. A false value is passed when the mouse moves off of the anchor element or it loses focus. The `updateImage()` function uses the image `id` to load the image and then changes the `src` attribute based on the boolean value. Note that since the image is for decorative purposes, it has a null `alt` attribute.

It is best to use images that are similar in size and to specify the height and width attributes on the image element. This will prevent any changes to the layout of the page when the image is updated. This example uses images which are identical in size.

## Examples

    <!doctype html>
      <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Changing Image Source in a Device Independent Manner</title>
        <script>
           /* This function will change the image src of an image element.
            * param imgId - the id of the image object to change
            * param isOver - true when mouse is over or object has focus,
             false when mouse move out or focus is lost
           */
           function updateImage(imgId, isOver) {
           var theImage = document.getElementById(imgId);
           if (theImage != null) {
             if (isOver) {
               theImage.setAttribute("src","yellowplus.gif");
             }
             else {
               theImage.setAttribute("src","greyplus.gif");
             }
           }
         }
        </script>
      </head>
      <body>
        <p>Mouse over or tab to the links below and see the image change.</p>
        <a href="https://www.w3.org/WAI/"
           onmouseover="updateImage('wai', true);" onfocus="updateImage('wai', true);"
           onmouseout="updateImage('wai',false);" onblur="updateImage('wai',false);">
           <img alt="" id="wai" src="greyplus.gif">
           W3C Web Accessibility Initiative</a> &amp;
        <a href="https://www.w3.org/International/" onmouseover="updateImage('i18n', true);"
           onfocus="updateImage('i18n',true);" onmouseout="updateImage('i18n',false);"
           onblur="updateImage('i18n',false);">
           <img alt="" id="i18n" src="greyplus.gif">
           W3C Internationalization</a>
      </body>
    </html>

## Tests

### Procedure

Load the Web page and test the events using a mouse and via the keyboard.

1. Check that the "standard" image is displayed as expected when the Web page is loaded.

2. Using the mouse:

   1. Move the mouse over the element containing the event handlers (in this example it is an anchor element). Check that the image changes to the expected image.
   2. Move the mouse off of the element. Check that the image changes back to the "standard" image.

3. Using the keyboard:

   1. Use the keyboard to set focus to the element containing the event handlers. Check that the image changes to the expected image.
   2. Use the keyboard to remove focus from the element (generally by moving focus to another element). Check that the image changes to the "standard" image.
4. Verify that the layout of other elements on the page is not affected when the image is changed.

### Expected Results

- All of the steps for the above checks are true.