OnClick Issue: it works only with first click, cannot return to the original status

Discussion in 'JavaScript' started by divbox, Mar 5, 2009.

0
  1. #1
    Hello EB
    :)
    I got this

    <script type="text/javascript" language="JavaScript">

    if (document.images) {
    var su = new Image(); // for the inactive image
    su.src = "photo1.jpg";
    var gius = new Image(); // for the active image
    gius.src = "photo.jpg";
    }



    function act() {
    if (document.images)
    document.images.giu.src = gius.src;
    }

    function inact() {
    if (document.images)
    document.images.giu.src = su.src;
    }



    </script>


    .....<HTML>


    <div class="box"> <a href="#" onClick="act()"; onClick="inact();">
    <img src="photo1.jpg" name="giu" border="0" alt="Netscent Advantages"></a></div>

    The first function works, and show the image I want. (photo.jpg) when i clikc the mouse.
    But if i want to return to the previous image, clicking again, It does not works
    :confused:
    is there a part. reason? Did i write it uncorrectly., and if yes, where?
    thx,:)

    bye
     
    divbox, Mar 5, 2009 IP
  2. lp1051

    lp1051 Well-Known Member

    Messages:
    163
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    108
    #2
    Hi divbox,

    your logic is OK, but the implementation in JS is a quite different.
    When you write the 2 events "onclick" into one element, like you did, the first onclick is executed before the second, so when you click you always see result from function inact(). To achieve the effect you want, you need to define one onclick event with reference to function that will have to find out what image is currently open and switch into another.
    One possibility :

    <script type="text/javascript" language="JavaScript">

    if (document.images) {
    var su = new Image(); // for the inactive image
    su.src = "photo1.jpg";
    var gius = new Image(); // for the active image
    gius.src = "photo.jpg";
    }



    function act_inact(){
    if (document.images){
    var current_image = document.images.giu.src; //here you have the current image path
    document.images.giu.src = (current_image == su.src)?gius.src :su.src; //if condition true display gius.src, else su.src (it is using conditional/ternary operator)
    }
    }

    </script>


    <div class="box"> <a href="#" onClick="act_inact()";>
    <img src="photo1.jpg" name="giu" border="0" alt="Netscent Advantages"></a></div>

    Hope it makes sense.
     
    lp1051, Mar 5, 2009 IP
  3. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #3
    var su = new Image(); // for the inactive image
    su.src = "photo1.jpg";
    var gius = new Image(); // for the active image
    gius.src = "photo.jpg";

    ...

    why instigate new image objects at all, you don't replace the 'gui' with your new instance - you pretty much use it for string storage. if that's the case, just do var images = ["photo1.jpg","photo.jpg"]; and swap the target's src property... you may benefit from doing new Image() for the inactive once in order to preload it.
     
    dimitar christoff, Mar 6, 2009 IP
  4. divbox

    divbox Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Dimitar, Lp, thanks really for helping me, it's a noob here, you understand:)

    Bye ah thx again
     
    divbox, Mar 13, 2009 IP