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 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    56
    Thanks
    4
    Thanked 9 Times in 9 Posts

    Thumbs up help with on off button img swap

    Hi

    I'm trying to make an 'on' 'off' switch

    the idea is for imgA to 'toggle' with imgB onMouseDown (onclick is used to call a function)

    I can get the image to swap once but not back again. I have no idea if the way i'm attempting it is even close.


    Code:
    <script type="text/javascript">
    
    function imgswap(){
    
    if ( )
    {
    document.playbuttons_1.src="play.gif";
    }
    else
    {
    document.playbuttons_1.src="stop.gif";
    }
    }
    </script>

    From the body

    Code:
    <IMG src="play.gif" onclick="Book_ChangeAuto()" onMOuseDown="imgswap()" name="playbuttons_1" border="0" >

    Any help would be fantastic
    thanks
    Last edited by Damo; 03-24-2009 at 11:48 AM. Reason: resolved

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,133
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb Try this ...

    Code:
    <script type="text/javascript">
    
    function imgswap(imgName){
    
      if (imgName == 'stop.gif') {
        document.playbuttons_1.src="play.gif";
      } else {
        document.playbuttons_1.src="stop.gif";
      }
    }
    </script>
    From the body

    Code:
    <IMG src="play.gif" onclick="Book_ChangeAuto()" onMouseDown="imgswap(this.src)" name="playbuttons_1" border="0" >

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    56
    Thanks
    4
    Thanked 9 Times in 9 Posts
    Thanks for the reply

    unfortunately didn't work for me.

    The image changes once on first onMouseDown ---- but fails to change back again on next one.

    IF anybody has any idea why this is i'd be very interested to know. The above code is what I have.

    Thanks
    Damo

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,133
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb Trying again ...

    OK, but it would be nice to see the rest of your code to be assured the problem does not lie elsewhere.

    Try this to see if it closer to what you want:
    Code:
    <html>
    <head>
    <title>Image Swap</title>
    
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?p=797117#post797117
    
    function imgswap(imgName){
        document.getElementById('PlayStop').src=imgName;
        document.getElementById('PlayStop').alt=imgName;
    }
    </script>
    </head>
    <body>
    <IMG id="PlayStop" src="stop.gif" alt="stop.gif" onclick="alert('Book_ChangeAuto()')"
         onMouseover="imgswap('play.gif')" onMouseout="imgswap('stop.gif')" name="playbuttons_1" border="0" >
    </body>
    </html>
    Remove the "alert()" put in for testing purposes.

  • #5
    New Coder
    Join Date
    Jan 2009
    Posts
    56
    Thanks
    4
    Thanked 9 Times in 9 Posts

    Unhappy

    Thanks once more

    no i'm not looking to onMouseOver


    I've put up a page for you to see ----

    http://www.englishfreaks.com/

    The flip book is running on page load

    so button is on red for stop

    onMouseDown it changes image to 'play' (since the book is now stopped)

    on next onMouseDown book plays again but image doesn't swap back to red stop image.

    Hope you can see what i'm trying to do.

    thanks for your time n effort

    damo.

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    <img src="play.gif" onclick="Book_ChangeAuto()" onmousedown="this.src='stop.gif'" onmouseup="this.src='play.gif'" name="playbuttons_1" border="0">

    no need for the function

  • #7
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    set a global variable. Add 1 to it every time the button is clicked. Every time through you use modulus 2 on the var.

    variable%=2;

    this will always give you odd or even. 1 or 0
    so if var ==1 src=stop
    if var==0 src=play

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>test_flipbook</title>
    
    <script type="text/javascript" src="cat_2.js">/*(c) Ger Versluis 2003-2004*/</script>
    
    
    <script type="text/javascript">
    var switchNumber=1;
    function imgswap(){
    switchNumber+=1
    switchNumber%=2;
      if (switchNumber == 0) {
        document.playbuttons_1.src="stop.gif";
      }  if (switchNumber == 1) {
        document.playbuttons_1.src="play.gif";
      }
    }
    </script>
    
    
    <style type="text/css">
    
    #Book {
    position:relative;
    width:404px;
    left:450px;
    top:50px;
    border:2px solid #FFA500
    }
    
    #Bookbtns{
    position:relative;
    top:200px;
    left:200px;
    width:230px;
    height:60px;
    border:2px solid #FF8C00;
    padding:10px;
    }
    #playbtns{
    position:absolute;
    top:300px;
    border:2px groove #FF0000;
    width:150px;
    height:50px;
    }
    
    
    
    </style>
    
    </head><body onload="ImageBook()">
    
    	
    
    	
    		<div id="Book">	
    			<img src="cell.gif" width="404" height="147">
    		<img src="soulmans.jpg" style="border: 1px solid white; position: absolute; z-index: 1; left: 0px; top: 0px; height: 150px; width: 200px; cursor: pointer;"><img src="adamosmll.jpg" style="border: 1px solid white; position: absolute; z-index: 0; top: 0px; left: 201px; height: 150px; width: 200px; cursor: pointer;"><img src="quebles.jpg" style="border: 1px solid white; position: absolute; z-index: 2; top: 0px; left: 161px; height: 150px; width: 39px; cursor: pointer;"></div>
    	
    	
    	
    <div id="playbtns">
       <img src="play.gif" onclick="Book_ChangeAuto();imgswap();"  name="playbuttons_1" border="0">
    </div>
    
    </body></html>
    Last edited by TinyScript; 03-24-2009 at 07:52 AM. Reason: It works

  • Users who have thanked TinyScript for this post:

    Damo (03-24-2009)

  • #8
    New Coder
    Join Date
    Jan 2009
    Posts
    56
    Thanks
    4
    Thanked 9 Times in 9 Posts

    Thumbs up

    Special Thanks to TinyScript

    also thanks to jmrker

    Works perfectly --- exactly as wished

    I did try adding a var with switch based on odd even -- but my lack of JS skills let me down --- many many hours were lost.

    well done all.

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,133
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb

    Quote Originally Posted by Damo View Post
    I did try adding a var with switch based on odd even -- but my lack of JS skills let me down --- many many hours were lost.
    Just to check where you might have gone wrong.
    Code:
    <html>
    <head>
    <title>Play/Stop Button</title>
    <script type="text/javascript">
    // From: http://codingforums.com/showthread.php?t=161978
    
    var cntr = 0;
    function DoSomething() {
      if ((cntr % 2) == 0) { alert('Do something'); }
                      else { alert('Do something else'); }
      cntr++;
    }
    
    function imgswap(imgName){
      if (imgName == 'http://www.englishfreaks.com/stop.gif') {
        document.playbuttons_1.src="http://www.englishfreaks.com/play.gif";
      } else {
        document.playbuttons_1.src="http://www.englishfreaks.com/stop.gif";
      }
    }
    </script>
    </head>
    <body>
    
    <IMG src="http://www.englishfreaks.com/stop.gif" alt="http://www.englishfreaks.com/stop.gif"
     onclick="DoSomething()" onMouseDown="imgswap(this.src)" name="playbuttons_1" border="0" >
    
    </body>
    </html>


  •  

    Posting Permissions

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