SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Location
    australia
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    cant get image to change when clicked

    im trying to get a image to change everytime its clicked, visa-versa. now it will change once, but thats it. Its driving me mad, any ideas where im going wrong?

    thanks

    Code JavaScript:
    <script type="text/javascript">
      function toggle_visibility(id) {
    	 var f = document.getElementById('helptext2');
    	 if(f.src == 'assets/expand_help.png')
    		f.src = 'assets/expand_help.png';
    	  else
    		f.src = 'assets/expand_help_down.png';
      }</script>

    Code HTML4Strict:
             <a href="#" onClick="toggle_visibility('helptext')">
                <img src="assets/expand_help.png"  id="helptext2" /> change image  </a>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Take a closer look at the logic of your if/else statements.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aside from the logic problem there's the "src contains the full path" issue. Also if you're going to pass an ID you may as well use it, and why not make the function reusable?:
    Code:
    <script type="text/javascript">
    
    function toggle_visibility(id, a, b) 
    {
     var f = document.getElementById( id );
    
     f.src = ( f.src.indexOf( a ) > -1 ) ? b : a;
    }
    
    </script>
    
    <a href="#" onClick="toggle_visibility('helptext2', 'assets/expand_help.png', 'assets/expand_help_down.png')">
                <img src="assets/expand_help.png"  id="helptext2" /> change image  </a>
    Tab-indentation is a crime against humanity.

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    another option

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script type="text/javascript">
     
    var picPaths = ['pic1.jpg','pic2.jpg'];
    var currPic = 0;
     
    function toggleImage(elem) {
        currPic = (currPic == 0)? 1 : 0;
        elem.src = picPaths[currPic];
    }
     
    </script>
    </head>
    <body>
     
    <div>
            <img src="pic1.jpg" alt="" onclick="toggleImage(this)" />
    </div>
     
    </body>
    </html>

  5. #5
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    Code:
     <script type="text/javascript">
     
    var picPaths = ['pic1.jpg','pic2.jpg'];
    var currPic = 0;
     
    function toggleImage(elem) {
        currPic = (currPic == 0)? 1 : 0;
        elem.src = picPaths[currPic];
    }
     
    </script>
    </head>
    <body>
     
    <div>
            <img src="pic1.jpg" alt="" onclick="toggleImage(this)" />
    </div>
    That creates two unnecessary global objects, and the hard coded array name restricts the function to one use. Not always an option.
    Tab-indentation is a crime against humanity.

  6. #6
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no problem

    I said it's just another option, not the way it must or should be done by anyone else.

    in the absence of any more specific details from the op regarding their requirements, it's the way I will always choose to do it.

  7. #7
    SitePoint Member
    Join Date
    Dec 2010
    Location
    australia
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you both for your help, worked great.
    but then i thought i might try optimise my code i have elsewhere.
    Basicly you click the image, it changes and also hides/unhides a div id...
    I tryed to reference the code you gave me, and tryed a few changes but i can get it to show (from its default hidden). but i cant get it to hide again etc.

    <script type="text/javascript">

    Code JavaScript:
    function toggle_visibility(id, a, b) 
    {
     var f = document.getElementById( id+'img' );
     var e = document.getElementById( id );
     f.src = ( f.src.indexOf( a ) > -1 ) ? b : a;
     e.style.display =  ( e.style.display > -1 ) ? 'none' : 'block';
    }
     
    </script>

  8. #8
    SitePoint Member
    Join Date
    Dec 2010
    Location
    australia
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
     e.style.display =  ( e.style.display.indexOf( 'block' ) > -1 ) ? 'none' : 'block';

    ok, so i played a little more and found this works,


Bookmarks

Posting Permissions

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