Im making an effort to write some standards based javascript. Ive written this script to create rollovers on input buttons as i need them for a site im working on. Ive got the event listeners in there and they work fine in that they try to run the functions that i want to run onmouseover and onmouseout. Problem is i get an error saying that the button variable is not defined on the lines inside the mouseover and mouseout functions.

Usually id just use the 'this' keyword when the function is called from within the html and pass that in to the function but now i cant do that with this standards based code im a little stuck.

Any suggestions?

Code JavaScript:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <title>Detect mouseover</title>
    <script type="text/javascript">
    function addEvent(element, evType, fn, useCapture)
      // cross-browser event handling      
        if (element.addEventListener) {
          element.addEventListener(evType, fn, useCapture); 
          return true; 
        } else if (element.attachEvent) {
          var r = element.attachEvent('on' + evType, fn); 
          return r; 
        } else {
          element['on' + evType] = fn;
       //add a listener on page load
       addEvent(window, 'load', addListeners, false);
        function addListeners() {
        var allButtons = document.getElementsByTagName("input");
        for(i=0;i< allButtons.length; ++i) {
         var button = allButtons[i];
         var button_type = button.getAttribute("type");
         if(button_type = 'image') {
          addEvent(button, 'mouseover', mouse_over, false);
          addEvent(button, 'mouseout', mouse_out, false);
      function mouse_over() {
       var src = button.src.replace(/(\.[^.]+)$/, '_over$1');
      function mouse_out() {
      	 var src = button.src.replace(/_over(\.[^.]+)$/, '$1');
    <input type="image" src="over.gif" value="submit" />