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 2 of 2
  1. #1
    Registered User
    Join Date
    Jun 2007
    Posts
    39
    Thanks
    1
    Thanked 0 Times in 0 Posts

    script simplification help needed.

    I wrote a code, what I want to achieve is that there are 4 images,
    when the mouse is clicking down the image changes the picture, and when mouse up, it changes back.
    and I wrote the longest junk ever:
    Code:
    <head>
    <script>
    </function imgChanger(argee,back)
        {
            if(!(back)){
                   if(argee=="a"){
                     document.getElementById(argee).setAttribute("src","a_down.png");}
                   else if(argee=="b"){
                     document.getElementById(argee).setAttribute("src","b_down.png");}
                   else if(argee=="c"){
                      document.getElementById(argee).setAttribute("src","c_down.png");}
                   else{
                      document.getElementById(argee).setAttribute("src","d_down.png");}
            }
            else
            {
                   if(argee=="a"){
                     document.getElementById(argee).setAttribute("src","a.png");}
                   else if(argee=="b"){
                     document.getElementById(argee).setAttribute("src","b.png");}
                   else if(argee=="c"){
                     document.getElementById(argee).setAttribute("src","c.png");}
                   else{
                     document.getElementById(argee).setAttribute("src","d.png");}
            }
        
        }</script>
    <head>
    <body>
    <img src="a.png" onmousedown="imgChanger('a');" onmouseup="imgChanger('a',true);" id="a"/>
            <img src="b.png" onmousedown="imgChanger('b');" onmouseup="imgChanger('b',true);" id="b"/>
          <img src="v.png" onmousedown="imgChanger('c');" onmouseup="imgChanger('c',true);" id="c"/>
          <img src="d.png" onmousedown="imgChanger('d');" onmouseup="imgChanger('d',true);" id="d"/>
    </body>

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by noPCtoday View Post
    I wrote a code, what I want to achieve is that there are 4 images,
    when the mouse is clicking down the image changes the picture, and when mouse up, it changes back.
    and I wrote the longest junk ever:
    i dont think it will get much shorter than this:

    Code:
    <head>
    <script>
    
    function imgChanger(argee,back) {  
    document.getElementById(argee).setAttribute("src", argee+(back?"_down.png":".png"))
    }
    
    
    </script>
    <head>
    
    <body>
    <img src="a.png" onmousedown="imgChanger('a');" onmouseup="imgChanger('a',1);" id="a"/>
            <img src="b.png" onmousedown="imgChanger('b');" onmouseup="imgChanger('b',1);" id="b"/>
          <img src="v.png" onmousedown="imgChanger('c');" onmouseup="imgChanger('c',1);" id="c"/>
          <img src="d.png" onmousedown="imgChanger('d');" onmouseup="imgChanger('d',1);" id="d"/>
    </body>
    
    
    /* alternate dom0 version, slightly more compact, slightly less compatible.    */
    
    function imgChanger(argee,back) {  
    document.getElementById(argee).src=argee+(back?"_down.png":".png")
    }







    got about 20 lines of code into 1 line, hope it helps.
    cheers!
    Last edited by rnd me; 07-19-2007 at 07:48 AM.


  •  

    Posting Permissions

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