JavaScript and Accessibility. Pt. 2. | 2

[previous]

JavaScript and Accessibility. Pt. 2

Our JavaScript now can be updated to check for letters only if “letOnly” is one of the classes of the current input field in the loop, or check for numbers only if “numOnly” is one of the classes of the current input field in the loop.

<script type="text/javascript"><!--
  function validateForm(f){
    var regex = /^\s*$/;
    var let = /^[a-zA-Z]+$/i;
    var num = /^[0-9]+$/;
    var e = f.elements;
      for(var i=0; i<e.length; i++){
        if(regex.test(e[i].value)){
          alert("Please fill in all fields.");
          e[i].focus();
          return false;
       }
       if(e[i].className.indexOf("letOnly")!=-1 && !let.test(e[i].value)){
          alert("Please enter letters only.");
          e[i].focus();
          return false;
      }
      if(e[i].className.indexOf("numOnly")!=-1 && !num.test(e[i].value)){
         alert("Please enter numbers only.");
         e[i].focus();
         return false;
     }
   }
  return true;
}
//--></script>

This script tests for the class names “letOnly” and “numOnly”; if either is present, it will validate and only allow letters or numbers. Most often, this type of validation is sufficient and effective.

Rollover, Rover!

JavaScript image rollovers are a classical issue – there have been many methods available to accomplish rollovers, but I think I’ve found what is likely to be the best. To begin with, you will preload your images with the “on” and “off” equivalents.

<script type="text/javascript"><!--
  var img1 = [], img2 = [];
  img1[0] = new Image(); img1[0].src = "https://localhost/html.gif";
  img1[1] = new Image(); img1[1].src= "https://localhost/html.jpg";
  img2[0] = new Image(); img2[0].src = "https://localhost/gif.gif";
  img2[1] = new Image(); img2[1].src= "https://localhost/jpg.gif";
  function roll(n,s){
    document.images[n].src = window[n][s].src;
  }
//--></script>

<img src="/html.gif" onmouseover="roll(this.name,1)" onmouseout="roll(this.name,0)" name="img1"><br>
<img src="/gif.gif" onmouseover="roll(this.name,1)" onmouseout="roll(this.name,0)" name="img2">

You will need to change the addresses on your own (be aware that these are from a local testing server). Start by deciding how rollovers you want to use for your images. In my case, there are two, so I create two new arrays, named “img1” and “img2” respectively. You can name your array variables anything you want and you don’t have to add numbers after them. Make sure, though, that your variable names and the names of your images are the same.

An explanation of the “roll” function: two values are passed to the “n” and “s” variables of this function. They are the name of the image and the state in which the image should be at this point. That is, when you put your mouse over the image, you give the name of the image (you can also just put “this.name” if the roll function is directly on the image) and whether you want the image to be in its original state (0) or its “over” state (1). The roll function will search for “document.images[n]” – that is, the image with the name “n” on the current web page – and change its SRC to “window[n][s].src,” or the sth index of the array that has the same name as the image you rolled over. This could also be written as eval(“n[s].src”); but it’s preferable to avoid using eval.

Let’s quickly run through our list from earlier:

1. Is this practical, or am I just trying to add something else to my web page? It is practical.
2. Do I need JavaScript to do this, or can I do it a different way? Hmm, can we?
3. Will this work if someone doesn’t have JavaScript available? If not, how can I provide an alternative? It won’t work for users without JavaScript, but the page can still be used without JavaScript. It is possible, however, to preload images and do rollovers without using JavaScript.
4. Am I designing this with the user in mind? In other words, will this make my web site difficult for people to see and/or read? Yes, the rollovers can be an enhancement to a web page and can be important for usability – it’s easier to see what you’re about to click when the appearance is different from other similarly designed images on the page.
5. Is it guaranteed to work cross-browser and cross-platform? If not, what can I do to provide an alternative? It has only been tested on Windows, but is likely to work fine on other operating systems. If it doesn’t work, the page can still be used without any major difficulties.

Following the above list, we met our criteria for the responsible use of JavaScript, but when an alternate technology is available, why not take advantage of it? Using Cascading Style Sheets, you can preload your rollovers. This will work for users who have JavaScript disabled, but have a browser with decent CSS support.

Next week, we conclude this series, beginning with Drop-down Navigation Selections. Other topics covered will be DHTML Menus, Proprietary Alternatives, Document.all, and innerHTML. See you then.

About the Author

Jonathan Fenocchi is a Web developer who primarily works in the fields of Web Design, client-side scripting, and PHP scripting. His web site is located at: www.cmmwebdesign.com

[previous]

Created: March 27, 2003
Revised: February 21, 2005

URL: https://webreference.com/programming/javascript/Jf/column9/1