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 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2009
    Location
    Milton Keynes, England
    Posts
    54
    Thanks
    4
    Thanked 4 Times in 4 Posts

    function change() - On link click, image changes from one to another.

    Firstly, sorry for the title. I found it difficult trying to put a short and concise title for you all to understand.

    My problem: Basically, I have an image (its a + sign), when clicked I need this + to change to a -. When clicked again, it needs to return to being a +.

    Below is the current code I am using:

    Code:
    <script type="text/javascript">
    imgs=Array("positive.PNG","negative.PNG");
    var x=0;
    
    function change() {
      var item = document.getElementById("test").src=imgs[++x];
    
    if (x==1) {
    x=-1;
    }
    }
    if (!imgs[x+1]) {
    x=-1;
    }
    </script>
    Code:
    <p><a href="#"><img src="positive.PNG" alt="" onmousedown="change()" id="test" border=0></a></p>
    This code works fine if I just have one instance of it. But If I want multiple ones, one stops working and the other functions instead.

    I tried the following:

    Code:
    <p><a href="#"><img src="positive.PNG" alt="" onmousedown="change()" id="test" border=0></a></p>
    
    <p><a href="#"><img src="positive.PNG" alt="" onmousedown="change()" id="test" border=0></a></p>
    This causes the problem I explained above.

    I also tried specifying an id in the function change() syntax, but I couldn't get that to work.

    Appreciate any help I do recieve on this matter and thanks in advance for reading.

    Kind Regards,

    Nick
    Last edited by nick1988; 03-06-2009 at 02:23 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    <script type="text/javascript">
    function change(obj) {
      if(obj.src=='positive.PNG')
         obj.src='negative.PNG';
      else
         obj.src='positive.PNG';
    }
    </script>
    Code:
    <p><a href="#"><img src="positive.PNG" alt="" onclick="change(this)" ></a></p>
    <p><a href="#"><img src="negative.PNG" alt="" onclick="change(this)" ></a></p>
    Last edited by abduraooft; 03-06-2009 at 12:08 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Mar 2009
    Location
    Milton Keynes, England
    Posts
    54
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Hello abduraooft, thanks for you swift response.

    I am not clear about the code you posted. I have replaced my code, with the one you have suggested.

    Am I meant to change it in anyway, or is it ready to go?

    I have tried it, the first link is always stuck on the + image.

    The second switches from - to +, but doesn't swap back to -.

    Regards,

    Nick

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Um... the src would contain the entire path, so try it like
    Code:
    var pos=obj.src.indexOf('positive.PNG');
     // alert(pos);
      if(pos!=-1)
         obj.src='negative.PNG';
      else
         obj.src='positive.PNG';
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    nick1988 (03-06-2009)

  • #5
    New Coder
    Join Date
    Mar 2009
    Location
    Milton Keynes, England
    Posts
    54
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Thanks!!

    Works great, much appreciated abduraooft.

    Regards,

    Nick

  • #6
    New Coder
    Join Date
    Mar 2009
    Location
    Milton Keynes, England
    Posts
    54
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Hello, me again - sorry for troubling again.

    The script is working fine, however I need it to do one more thing.

    Code:
    <script type="text/javascript">
    function change(obj) {
      var pos=obj.src.indexOf('positive.PNG');
     // alert(pos);
      if(pos!=-1)
         obj.src='negative.PNG';
      else
         obj.src='positive.PNG';
    }
    </script>
    Code:
    <p><a href="#"><img src="positive.PNG" alt="" onclick="change(this)" border=0>CLICK ME</a></p>
    <p><a href="#"><img src="negative.PNG" alt="" onclick="change(this)" border=0>CLICK ME</a></p>
    I have added some text to go beside the image, the text or the image can be selected to click the link. However, the image only changes if you click the image and not if you click the text. Is there anyway to change this? I tried nesting the onclick="change(this)" in the <a href="#"> but it didn't work.

    Thanks in advance for any replies.

    Kind regards,

    Nick

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Move the event handler to the anchors, like

    Code:
    <p><a href="#" onclick="change(this)"><img src="positive.PNG" alt=""  >CLICK ME</a></p>
    <p><a href="#" onclick="change(this)"><img src="negative.PNG" alt=""  >CLICK ME</a></p>
    and change your script like
    Code:
    <script type="text/javascript">
    function change(obj) {
     var img=obj.getElementsByTagName('img')[0];
      var pos=img.src.indexOf('positive.PNG');
      //alert(pos);
      if(pos!=-1)
         img.src='negative.PNG';
      else
         img.src='positive.PNG';
    }
    </script>
    PS: attribute border is deprecated, use a CSS selector like
    Code:
    a img{
    border:none;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    nick1988 (03-06-2009)

  • #8
    New Coder
    Join Date
    Mar 2009
    Location
    Milton Keynes, England
    Posts
    54
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Thanks again, also for the information about the attribute border.

    Regards,
    Nick


  •  

    Posting Permissions

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