SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,329
    Mentioned
    191 Post(s)
    Tagged
    4 Thread(s)
    Why not approach this in a simpler way?
    Code:
    <a href="indexpg.htm"
    onMouseDown="this.src='images/download_pressed.png';return true;" 
    onMouseUp="this.src='images/download.png';return true;" 
    onMouseOut="this.src='images/download.png';return true;" 
    onClick="return true;"><img id=downloadbtn width=422px height=80px border=0 
    alt="Download" src="images/download.png" /></a>
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,329
    Mentioned
    191 Post(s)
    Tagged
    4 Thread(s)
    Why not approach this in a simpler way?
    Code:
    <a href="indexpg.htm"
    onMouseDown="this.src='images/download_pressed.png';" 
    onMouseUp="this.src='images/download.png';" 
    onMouseOut="this.src='images/download.png';" 
    onClick="return true;"><img id=downloadbtn width=422px height=80px border=0 
    alt="Download" src="images/download.png" /></a>
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  4. #4
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because I don't know javascript lol. Really that's what I'm trying to do is find the simplest way to do this, especially without adding a new id number to every download image even though they are the exact same. Anyway I tried inserting your code but the image doesn't change when clicked, was I supposed to change the header javascript code as well?


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
  •