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
    New Coder
    Join Date
    Sep 2005
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to reverts 2 images back to original using onClick event

    I am trying to figure out how to reverts 2 images that was clicked the first time back to the original images in the second click.

    Example:

    A B

    click on A ---> change B to C
    click on B ---> change A to D

    now I need to figure how to get

    D C

    click on D ---> change C to B
    click on C ---> change D to A

    I tried different ways but I can't seem to figure out what I am doing wrong. I tried adding another function ....changeImgBack and did the same function as the first one...only change the document.images[ ].src... so forth...well that didn't work. Like I said I tried multiple ways but no luck! I know there got to be a simple way of doing it. As you can see...I am a beginner in javascript. I would appreciate any suggestion on this matter. Here is what I got so far...I got it where you can click on the images but it only change it once. I would like to have it where you can click on the images continuously


    var myImage = new Array() // list Images

    myImage[0] = new Image()
    myImage[0].src = "images/image1.gif"
    myImage[1] = new Image()
    myImage[1].src = "images/image2.gif"
    myImage[2] = new Image()
    myImage[2].src = "images/image3.gif"
    myImage[3] = new Image()
    myImage[3].src = "images/image4.gif"

    function changeImg(valueClick) {
    if (valueClick == 0) {
    document.images[1].src = myImage[2].src
    } else if (valueClick == 1) {
    document.images[0].src = myImage[3].src
    } else {
    alert("Houston, we have a problem")
    }
    return false; // prevent click from going anywhere
    }

    }


    <td><a href="Lab4.1.html" onClick="changeImg(0);return false;"><img src="images/image1.gif" name="img1" width="300" height="150" ></a></td>
    <td><a href="Lab4.1.html" onClick="changeImg(1);return false;"><img src="images/image2.gif" name="img2" width="300" height="150" ></a></td>
    PJ

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,722
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there pj59,

    here is a working example...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>image swapping</title>
    <base href="http://coothead.homestead.com/files/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <meta name="Content-Script-Type" content="text/javascript"/>
    <meta name="Content-Style-Type" content="text/css"/>
    <style type="text/css">
    <!--
    body {
         background-color:#eef;
         color:#000;
     }
    #a {
         width:100px;
         height:100px;
         border:2px solid #000;
         background-image:url(anim2.gif);
         margin:10px auto;
     }
    #b {
         width:360px;
         height:280px;
         border:3px solid #000;
         background-image:url(apple.jpg);
         margin:10px auto;
     }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
       var preloads=[];
    function preload(){
     for(var i = 0; i < arguments.length; i ++) {
         preloads[preloads.length] = new Image();
         preloads[preloads.length - 1].src = arguments[i];
      }
     }
    
    function swapImage(id,pic,pic1){
     if(document.getElementById(id).style.backgroundImage=='url('+pic1+')') {
        document.getElementById(id).style.backgroundImage='url('+pic+')';
     }
     else {
        document.getElementById(id).style.backgroundImage='url('+pic1+')';   
      }
     }
     preload('anim2.gif','anim3.gif','apple.jpg','banana.jpg');
    //-->
    </script>
    
    </head>
    <body>
    
    <div id="a" onclick="swapImage('b','apple.jpg','banana.jpg')">
    </div>
    <div id="b" onclick="swapImage('a','anim2.gif','anim3.gif')">
    </div>
    
    </body>
    </html>
    
    ...unfortunately, though, it does not work in Opera 8.5.

    coothead


  •  

    Posting Permissions

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