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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts

    how to change the image?

    Hi guys,

    I need your help, I want to change the image using with a javascript when i press on the up and down keyboard arrow button.


    Code:
    <html>
    <body>
    
    
    <style type="text/css">
     
    body {background:url('images/blue_background.jpg') no-repeat center center fixed;}
     
    </style>
    
    
    <div id="image1" style="position:absolute; overflow:hidden; left:415px; top:157px; width:114px; height:81px; z-index:0"><img src="/images/image_blue.jpg" alt="" title="" border=0 width=114 height=81></div>
    
    
    <script>
    
    document.onkeydown = checkKey;
    
    function checkKey(e) {
    
        e = e || window.event;
    
        if (e.keyCode == '38') {
        
           var path ="/images/image_blue.jpg";
           
             if(document.getElementById("image1").src="/images/image_blue.jpg") {
                document.getElementById("image1").innerHTML=.src="/images/image_yellow.jpg";
             }
             else {
               document.getElementById("image1").src="/images/image_blue.jpg";
    }
        }
        else if (e.keyCode == '40') {
            window.alert('down arrow')
        }
    }
    
    </script>
    
    
    </body>
    </html>

    When I press on the keyboard, it doesn't change the image.

    Does anyone know how i can do this?

    thanks in advance

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,029
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Totally bogus:
    Code:
    document.getElementById("image1").innerHTML=.src="/images/image_yellow.jpg";
    Kill the code in red.

    Also, the keycode will *NEVER* be either '38' or '40'. It *CAN* be 38 or 40. NUMBERS not strings. The strings will work, but only because Javascript allows you to be sloppy. Don't be sloppy.

    Also, the .src of an image, as retrieved in your code, will likely be the FULL URL to the image (e.g., "http://www.yoursite.com/images/image_blue.jpg") so of course it won't match the shortened form. You need to use match or index of, instead of comparing for equals.

    May I suggest tightening up your code?
    Code:
    <script>
    
    document.onkeydown = checkKey;
    
    function checkKey(e) {
        var key = ( e || window.event ).keyCode;
        var image = document.getElementById("image1");
    
        if ( key === 38 )
        {
            if ( image.src.match( /_blue\.jpg$/ )
            {
                image.src="/images/image_yellow.jpg";
            } else {
                image.src="/images/image_blue.jpg";
            }
        }
        else if ( key === 40 )
        {
             alert('down arrow');
        }
    }
    </script>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Sep 2008
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much for your help, but i have two problems right here. When I press on the up arrow button, it change the image, but when I press on the up button again, it doesn't change the image. I think the loop did not get pass it. Can you help?

    And do you know how i can resize the image using with this code?

    Code:
    document.getElementById("image1").innerHTML="<img src='"+path1+"'/>";

    here is the update code:

    Code:
    function checkKey(e) {
    
        e = e || window.event;
        
        if(e.keyCode == '38') {
        
           if (document.getElementById("image1").src="/images/image_blue.jpg") {
             window.alert('back to yellow')
             var path ="/images/image_yellow.jpg";
             document.getElementById("image1").innerHTML="<img src='"+path+"'/>";
          }
          else {
            
            if (document.getElementById("image1").src="/images/tvguide_yellow.jpg") {
             window.alert('back to blue')
             var path1 ="/images/image_blue.jpg";
             document.getElementById("image1").innerHTML="<img src='"+path1+"'/>";
            }
          }
        }

    thanks in advance

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 498 Times in 492 Posts

    Lightbulb

    Alternate solution, with ability to expand image displays ...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    </head>
    <body>
    <img id="image1" src="">
    
    <script type="text/javascript">
    // Modified from:  http://www.codingforums.com/showthread.php?p=1318971#post1318971
    
    document.onkeydown = checkKey;
    
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';  // path to images to be displayed
    var imgCount = 0;
    // var imgList = ['11.jpg','12.jpg'];                             // two image display limit
       var imgList = ['11.jpg','22.jpg','33.jpg','44.jpg','55.jpg'];  // unlimited displays
    
    function checkKey(e) {
      var key = ( e || window.event ).keyCode;
      var image = document.getElementById("image1");
    
      if ( key === 38 ) {
        imgCount--;  if (imgCount < 0) { imgCount = imgList.length-1; }
      } else 
        if ( key === 40 ) {
          imgCount++;  if (imgCount > imgList.length-1) { imgCount = 0; }
    //     alert('down arrow');
        }
      image1.src = baseURL + imgList[imgCount];
    }
    window.onload = function() {
      document.getElementById('image1').src = baseURL + imgList[0];
    }
    </script>
    
    </body>
    </html>

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,029
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    *SIGH*

    READ READ READ what I wrote:
    Also, the .src of an image, as retrieved in your code, will likely be the FULL URL to the image (e.g., "http://www.yoursite.com/images/image_blue.jpg") so of course it won't match the shortened form. You need to use match or index of, instead of comparing for equals.
    You also completely ignored what I said about '38' versus 38.

    I get the feeling there was no point in me answering.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Regular Coder
    Join Date
    Sep 2008
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks Old Pedant, but there is a problem. The code you post is not working. I cannot get pass on the if statement.

    Code:
    if (image.src.match( /_blue\.jpg$/)
            {


    here is the update code:

    Code:
    <script>
    
    document.onkeydown = checkKey;
    
    function checkKey(e) {
        var key = ( e || window.event ).keyCode;
        var image = document.getElementById("image1");
    
        if(key == 38 )
        {
           if (image.src.match( /_blue\.jpg$/)
           {
              window.alert('back to yellow')
           }
           
        }
    }
    </script>
    Any idea how I can solve it?

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 498 Times in 492 Posts

    Question

    Quote Originally Posted by Old Pedant View Post
    *SIGH*

    READ READ READ what I wrote:

    You also completely ignored what I said about '38' versus 38.

    I get the feeling there was no point in me answering.
    @mark103

    Why do you continue to use what will not work?
    Try...
    Code:
    //       if (image.src.match( /_blue\.jpg$/)
             var imgFilename = image.src;
             if (imgFilename.indexOf('_blue.jpg') != -1) 

  • #8
    Regular Coder
    Join Date
    Sep 2008
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    @mark103

    Why do you continue to use what will not work?
    Try...
    Code:
    //       if (image.src.match( /_blue\.jpg$/)
             var imgFilename = image.src;
             if (imgFilename.indexOf('_blue.jpg') != -1) 
    i have copied and paste but now it dont work.

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by mark103 View Post
    i have copied and paste but now it dont work.
    OK, copy and paste what you have that does not work or provide a link to the active code.
    Let us see the code you are REALLY using, not just the code provided in earlier posts.

    Also, specify exactly what you think doesn't work,
    ie: what should happen that does not or what does not happen that should.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,029
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    I just noticed! This is *TOTALLY BOGUS*!!!
    Code:
    <div id="image1" style="position:absolute; overflow:hidden; left:415px; top:157px; width:114px; height:81px; z-index:0">
        <img src="/images/image_blue.jpg" alt="" title="" border=0 width=114 height=81>
    </div>
    The id needs to go *ON THE <img> TAG*! Not on the <div> tag!

    ************

    JMrkr: Why do you say this code doesn't work?
    Code:
           if (image.src.match( /_blue\.jpg$/)
    Tested, and it works perfectly. .indexOf() will also work, of course, but I think the whole problem is that the id was/is on the wrong element.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Regular Coder
    Join Date
    Sep 2008
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    if you don't believe me then here is the full code:


    Code:
    <html>
    <body>
    
    
    <style type="text/css">
     
    body {background:url('http://www.myste.com/images/blue_background.jpg') no-repeat center center fixed;}
     
    </style>
    
    
    <div id="image1" style="position:absolute; overflow:hidden; left:415px; top:157px; width:114px; height:81px; z-index:0"><img src="/images/image_blue.jpg" alt="" title="" border=0 width=114 height=81></div>
    
    
    <script>
    
    document.onkeydown = checkKey;
    
    function checkKey(e) {
        var key = ( e || window.event ).keyCode;
        var image = document.getElementById("image1");
    
        if(key == 38 )
        {
           var imgFilename = image.src;
           if (imgFilename.indexOf('image_blue.jpg') != -1)
           {
             window.alert('back to yellow')
           }
           
        }
    }
    </script>
    </body>
    </html>

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,029
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Now go read *MY* post #10 and FIX YOUR CODE.

    If, for some reason, you need the ID to be on the <div>, then either add ANOTHER ID for the <img> **OR**r do this in the JS code:
    Code:
        var image = document.getElementById("image1").getElementsByTagName("img")[0];
    Though why you put an id of "image1" on a <div>, in the first place, is beyond me.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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