SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing input image state

    I have some inputs with images that I'm changing the source for onmouseover and onfocus. I want to move the js from the HTML and use a script that does the same thing for all instances of the buttons throughout the site (there's only two at the moment). So far I've got this:

    PHP Code:
     function buttons() {
         var 
    goBtn document.getElementById("go-btn");
         var 
    subBtn document.getElementById("submit-btn");
         
    goBtn.onmouseover=function() { action(this,"go","on"); }
         
    goBtn.onfocus=function() { action(this,"go","on"); }
         
    goBtn.onmouseout=function() { action(this,"go","off"); }
         
    goBtn.onblur=function() { action(this,"go","off"); }
         
    subBtn.onmouseover=function() { action(this,"submit","on"); }
         
    subBtn.onfocus=function() { action(this,"submit","on"); }
         
    subBtn.onmouseout=function() { action(this,"submit","off"); }
         
    subBtn.onblur=function() { action(this,"submit","off"); }
         
         function 
    action(ID,name,state) { ID.src='/images/'+name+'-button-'+state+'.gif'; }
     }
     
     
    window.onload=buttons
    That doesn't look very lean and it works erratically. On a page where both buttons exist, it works in Firefox but only one of the buttons works in IE (the second one) and in Firefox the script won't work if the first button is not present on the page. So what would be the best way to do it?

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A different approach which works better but still with a problem:

    PHP Code:
     function buttons() {
         var 
    inputs document.getElementsByTagName("input");
         var 
    i=0;
         var 
    input;
         for (
    i=0i<inputs.lengthi++) {
             
    input inputs[i];
             if(
    input.getAttribute('type') == 'image') {
                 
    inputID input.getAttribute('id');
                 
    inputID inputID.substring(0,(inputID.length-4));
                 
    input.onmouseover=function() { action(this,inputID,"on"); }
                 
    input.onfocus=function() { action(this,inputID,"on"); }
                 
    input.onmouseout=function() { action(this,inputID,"off"); }
                 
    input.onblur=function() { action(this,inputID,"off"); }
             }
         }
     }
     
     function 
    action(obj,name,state) { obj.src='/images/'+name+'-button-'+state+'.gif'; }
     
     
    window.onload=buttons
    This time I'm collecting all inputs on the page and checking to see if they're type=image. Then I'm getting the input's ID and using its name to form part of the image name that needs changing. This works fine for the first input on the page, but the 2nd one also gets the same src as the first when you rollover it. I thought the loop would pick up the ID of each input as it moves through so what am I missing?


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
  •