SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    new to using standards based javascript...please help!

    Hi,

    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">
      <head>
        <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');
     
          }
     
     
     
     
        </script>
      </head>
      <body>
        <input type="image" src="over.gif" value="submit" />
      </body>
    </html>

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    For your mose_over and mouse_out functions, you should use this instead of button. This is fine for addEventListener but not for attachEvent (see this). So you would have to do something like this:
    Code:
    function mouse_over() {
      if (window.event) var tg = window.event.srcElement;
      else tg = this;
      var src = tg.src.replace(/(\.[^.]+)$/, '_over$1');
    }

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI,

    thanks for the prompt reply and the link . Ive put the code you posted in to my functions and am alerting the value in the src variable ( in the mouseover function) and it does indeed alert a file path with the file file_over.gif at the end so the regex is working.....but the image does not change to the file_over.gif in the browser.

    Am i missing something?!

    HEres my complete code....i cant fathom this but it might be something im overlooking:

    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">
      <head>
        <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() {
          if (window.event) { var tg = window.event.srcElement;
          }
          else { var tg = this;
          }
          var src = tg.src.replace(/(\.[^.]+)$/, '_over$1');
          alert(src);
          }
     
     
     
     
          function mouse_out() {
          if (window.event) { var tg = window.event.srcElement; 
          }
          else { var tg = this;
          }
          var src = tg.src.replace(/_over(\.[^.]+)$/, '$1');
          }
     
     
     
     
     
     
        </script>
      </head>
      <body>
        <input type="image" src="over.gif" value="submit" />
        <img src="over_over.gif" />
      </body>
    </html>
    Last edited by elduderino; Jul 8, 2007 at 09:19.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ah, forgot that, you have to assign it to the actual src:
    Code:
    function mouse_over() {
      if (window.event) var tg = window.event.srcElement;
      else tg = this;
      var s = tg.src.replace(/(\.[^.]+)$/, '_over$1');
      tg.src = s;
    }

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thats great, thanks for your help raffles


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •