Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Briefly swap image on click, multiple instances on one page

    So I want to swap an image when it's clicked on (and then swaps right back after release) and currently I have working code for this, HOWEVER (and the reason for my post) I want this to be a redundant image, so it would be the same image used about 25 times on the page (same image, with same image swap effect) it's basically a download button then slightly changes it's style when clicked on. The problem is that my current code requires me to give each image it's own specific id / name and I have to recreate more sript code for each image id as well.

    The following example code would be what is currently required for just 2 images (they are the exact same image with exact same swap) but as you can see for every additional download button on the page I have to add a new id for it and a bunch of additional code, so it's quite ridiculous as to how much code is required for 25 of the exact same images on the page.

    in the header I have:
    Code:
    <script language="JavaScript">
    <!--
    // PRELOADING IMAGES
    if (document.images) {
     downloadbtn_down=new Image(); downloadbtn_down.src="images/download_pressed.png"; 
     downloadbtn_up  =new Image(); downloadbtn_up.src  ="images/download.png"; 
    }
    if (document.images) {
     downloadbtn2_down=new Image(); downloadbtn2_down.src="images/download_pressed.png"; 
     downloadbtn2_up  =new Image(); downloadbtn2_up.src  ="images/download.png"; 
    }
    
    // EVENT HANDLERS
    function pressButton(btName) {
     if (document.images)
      eval('document.'+btName+'.src='+btName+'_down.src');
    }
    
    function releaseButton(btName) {
     if (document.images)
      eval('document.'+btName+'.src='+btName+'_up.src');
    }
    //--></script>
    and for each image in the body I have (example is for 2 images):

    Code:
    <a href="indexpg.htm"
    onMouseDown="pressButton('downloadbtn');return true;" 
    onMouseUp="releaseButton('downloadbtn');return true;" 
    onMouseOut="releaseButton('downloadbtn');return true;" 
    onClick="return true;"
    ><img id=downloadbtn width=422px height=80px border=0 
    alt="Download"
    src="images/download.png"
    ></a>
    
    <a href="indexpg.htm"
    onMouseDown="pressButton('downloadbtn2');return true;" 
    onMouseUp="releaseButton('downloadbtn2');return true;" 
    onMouseOut="releaseButton('downloadbtn2');return true;" 
    onClick="return true;"
    ><img id=downloadbtn2 width=422px height=80px border=0 
    alt="Download"
    src="images/download.png"
    ></a>
    I want to be able to just use the same piece of code without having to add a new id for every download button on the page and tons of redundant code, especially since the image is the same it doesn't make sense to have to give each one a specific id and specific javascript for each of those id's.
    I would think this would be quite simple, but I know nothing about javascript, and I have searched a lot without any luck.

    PLEASE HELP ME!

  • #2
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could use CSS instead. Of their pseudo-classes they have :active which sounds like what you want without all the extra code.

    Code:
    <style type="text/css">
    #button {
    background : url(button.jpg);
    }
    
    #button : active {
    background : url(buttonClick.jpg);
    }
    For more info check out http://www.w3schools.com/css/css_pseudo_classes.asp
    Last edited by shaggykyle; 10-12-2011 at 09:00 PM.

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't think that works for images does it?

    I tried inserting the code and switched my image id's to classes, but it's not working.

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by alvarezcyberx View Post
    I don't think that works for images does it?

    I tried inserting the code and switched my image id's to classes, but it's not working.
    The active state would remain after release.

    I just modified some similar existing code.

    Include this function in a script block or as an external file.

    Code:
    <script type='text/javascript'>
    
    function SwapOnPress( cName, downImg, upImg )
    {
      function installHandler( obj, evt, func )
      {
        window.attachEvent ? obj.attachEvent( evt, func ) : obj.addEventListener( evt.replace(/^on/i, ""), func, false );
    
        return func;
      }  
    
      installHandler( document, 'onmousedown', function(e){ swap(e || window.event, 1 ) } );
      
      installHandler( document, 'onmouseup', function(e){ swap( e || window.event, 0 ) } );
       
      function swap( evt, action )
      {
        var srcElem = evt.srcElement || evt.target,
            rxp = new RegExp( '\\b' + cName + '\\b' );
          
        if( srcElem.nodeName == 'IMG' && srcElem.className.match( rxp ) )
          srcElem.src = action ? downImg : upImg ;      
      }
    }
    </script>
    Just apply a common class to the relevant images ( you can add a second name to any existing class ) then make the following function call, with your values substituted:

    Code:
    <script type='text/javascript'>
    
    SwapOnPress( 'myImageClass', 'downimage.gif', 'upimage.gif' );
    
    </script>


  •  

    Posting Permissions

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