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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,765
    Thanks
    55
    Thanked 518 Times in 515 Posts

    mouseover on toggling image button

    Hi,

    I have this button:
    Code:
      <input type="image" src="pause.png" onmouseover="src='pauseon.png'" onmouseout="src='pause.png'" onclick="togglePause()" id="pauseBtn"/>
    which changes from the play image to the pause image when clicked, using this function:

    Code:
    function togglePause(){
    	if (paused){
    		paused=false;
    		document.getElementById('pauseBtn').src="pause.png";
    		setTimeout("animate("+(continueStep)+")", tick);
    	} else {
    		paused=true;
    		document.getElementById('pauseBtn').src="play.png";
    	}
    }
    but it doesn't really work how I want it to - first off, I can't get the same mouseover and mouseout effect working for when the button is on the "play" image

    secondly, the button reverts to the pause image regardless of if it is in play or pause state.

    I'm kind of lost - can someone throw me a line?

    the page I'm working on is here if you want to have a look

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts
    Why the onmouseover and onmouseout image changes.

    Would be better to just show the pause until pressed,
    then show play after calling the start of the action for the route selected.

    The play would remain until clicked again to go back to the pause image
    and stop the bus movement action.

    BTW, at the end of the route the bus looks like it goes the wrong
    way down a one way street? Hopefully, no cars are coming at that time.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,765
    Thanks
    55
    Thanked 518 Times in 515 Posts
    ... yes, but I want it to change color, like with a normal js button you can see a faint yellow ring around the button on mouseover. If I understand you correctly, I've got what you're talking about working here

    as to your other question - this is Guatemala. Road rules are more suggestive than prescriptive here

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Arrow

    I believe the actual color of the button is the color of the image (.png).
    You will need to change the color of the image, not the button holding the image.

    BTW: Remind me to not bother getting a Guatemala license or "Rules of the Road" manual!

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,765
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Quote Originally Posted by jmrker View Post
    I believe the actual color of the button is the color of the image (.png).
    You will need to change the color of the image, not the button holding the image.

    BTW: Remind me to not bother getting a Guatemala license or "Rules of the Road" manual!
    ah. I just made two images for each type - one with a yellow bit, the other normal. Are you saying that I can change the color of the image in the code and use one image? That doesn't sound right, as the mouseover button just needs to be yellow in parts...

    If you are developing a sincere interest in Guatemalan road "rules", we just published an article explaining them.

    but really... this button thing can't be as complicated as it seems...

    or can it?

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,765
    Thanks
    55
    Thanked 518 Times in 515 Posts
    perhaps I'm not explaining it right, and the problem seems to be more complex than it is.

    The button needs to have 4 states:
    - pause (grey)
    - pause mouseover (with yellow bits)
    then once it's clicked it changes to
    - play (grey)
    - play mouseover (with yellow bits)

    and if it's clicked it goes back to pause (grey)

    I have the necessary graphics files - I just need the code to switch between them, depending on the click or mouseover.

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb Try this ...

    Take out the test comments and test displays and see if this works for you.
    Code:
    <html>
    <head>
    <title>Guatamala Play-Pause Button</title>
    <script type="text/javascript">
    // From: http://codingforums.com/showthread.php?p=1027903#post1027903
    
    var paused = true;
    
    function btnAction() {
      var currentBtn = document.getElementById('pauseBtn').src;
      var currentPath = currentBtn.substring(0,currentBtn.lastIndexOf('/'));
      var currentInfo = currentBtn.substring(currentBtn.lastIndexOf('/')+1);
    
      if (paused == true){
        paused=false;
        if (currentInfo == "pause.png") { currentInfo = 'play.png'; }
        if (currentInfo == 'pauseON.png') { currentInfo = 'playON.png'; }
        document.getElementById('pauseBtn').src = currentPath+'/'+currentInfo;
        alert('Pause actions');
    //    setTimeout("animate("+(continueStep)+")", tick);
      } else {
        paused=true;
        if (currentInfo == "play.png") { currentInfo = 'pause.png'; }
        if (currentInfo == 'playON.png') { currentInfo = 'pauseON.png'; }
        document.getElementById('pauseBtn').src = currentPath+'/'+currentInfo;
        alert('Play actions');
      }
      document.getElementById('test').value = currentInfo;
    }
    function checkON() {
      var currentBtn = document.getElementById('pauseBtn').src;
      var currentPath = currentBtn.substring(0,currentBtn.lastIndexOf('/'));
      var currentInfo = currentBtn.substring(currentBtn.lastIndexOf('/')+1);
      document.getElementById('test').value = currentPath+'/'+currentInfo;
      
      var tmp = currentBtn;
      if (currentInfo == 'pause.png') { tmp = currentPath +'/'+ 'pauseON.png'; }
      if (currentInfo == 'play.png') { tmp = currentPath +'/'+ 'playON.png'; }
      document.getElementById('pauseBtn').src = tmp;
    }
    function checkOFF() {
      var currentBtn = document.getElementById('pauseBtn').src;
      var currentPath = currentBtn.substring(0,currentBtn.lastIndexOf('/'));
      var currentInfo = currentBtn.substring(currentBtn.lastIndexOf('/')+1);
      document.getElementById('test').value = currentInfo;
    
      var tmp = currentBtn;
      if (currentInfo == 'pauseON.png') { tmp = currentPath +'/'+ 'pause.png'; }
      if (currentInfo == 'playON.png') { tmp = currentPath +'/'+ 'play.png'; }
      document.getElementById('pauseBtn').src = tmp;
    }
    
    </script>
    </head>
    <body>
    <button onmouseover="checkON()" onmouseout="checkOFF()" onclick="btnAction()">
     <img id="pauseBtn" src="pause.png">
    </button>
    <input type="text" id="test" value="" size="60">
    </body>
    </html>
    It took me a while to get hold of your graphic images for testing as you did not originally supply them.

    If you are developing a sincere interest in Guatemalan road "rules", we just published an article explaining them.
    This may be the same rule book the drivers in S.Florida are using.
    Last edited by jmrker; 12-14-2010 at 11:46 PM.

  • Users who have thanked jmrker for this post:

    xelawho (12-15-2010)

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,765
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Quote Originally Posted by jmrker View Post
    This may be the same rule book the drivers in S.Florida are using.
    quite likely. From what I hear there are more Guatemalans there than there are here.

    Thanks for the code. I didn't realise it was such a complicated procedure, but It worked a treat once I got my head around it.

    You wouldn't happen to be willing to join the ranks of thousands (well, five, I think) who have looked for a way to make the bus start over when you press the start button would you?

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Question

    Have you tried just 'reset'ting the program?

    See: http://ilovethecode.com/Javascript/J...set_Form.shtml
    or: http://www.roseindia.net/javascript/...t-method.shtml
    or: http://www.javascript-coder.com/java...reset-form.htm
    or other sites with a google search of "javascript reset()"

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,765
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Quote Originally Posted by jmrker View Post
    Have you tried just 'reset'ting the program?
    I have - in every logical (and I suspect many illogical) place.

    the problem from what I see in the debugger is that functions and variables don't have a method 'reset'... and everywhere else I put it it just tells me that reset is not defined. From what I have read it seems that reset is just for forms.

    But I could be using it wrong, or in the wrong place.

    Haven't had much luck with enter; clearOverlays or reinitializing the global variables either.

    But I could be using them wrong, or in the wrong place too.

    The variable p seems to be something that would be worth resetting - it appears in this code:

    Code:
    map.panTo(p);
    marker.setPoint(p);
    but how to do that has got me stymied. Completely.

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts
    Which link is the most current version located?

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,765
    Thanks
    55
    Thanked 518 Times in 515 Posts

  • #13
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Arrow Some observations ...

    Quote Originally Posted by xelawho View Post
    I'm not sure I'm seeing the problem at this link. What is the sequence of mouse clicks that demonstrates the problem?

    I'm using FF browser and assume the "Start" button (which I could not find ) you are referring to is the "Show Bus Route 1" button.

    It seems to follow the same route every time I push the button, without or without a pause/play sequence.
    The play/pause button does not seem to change colors as you requested in the original post , but I assume you have yet to add that feature.

    Also, once you play and then push "Show ..." again, the play/pause button remains in play display rather than going to pause.
    But the display appears to correctly put the bus back at the start/stop terminal.

    Don't know if this helps, but perhaps the observations will help you decipher what is going on when the problem occurs at your end.

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,765
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Quote Originally Posted by jmrker View Post
    What is the sequence of mouse clicks that demonstrates the problem?
    I'm obviously explaining myself badly again. Sorry about that.

    There are two problems, but they seem to be interconnected and I'm hoping that solving one will somehow magically solve the other.

    The first is that if you click the "Show Bus Route 1" button while the bus is already in movement, it keeps running the original function and starts a new bus off from the starting point. But you can see that the 2nd bus follows the movements (dictated by the bearing function in the code) of the first one. What I want is for that second click to wipe the first bus and start a new bus that follows the road turns correctly.

    The second problem (which seems to me to be related) is that if you let the bus run to the end of its course then click the "Show Bus Route 1" button again, the bus will start off from the right spot, but will remain with its original bearing - pointing north in this case.

    The first problem is the big one for me - trying to make this as idiot-proof as possible. The second one is not such a drama, but like I say, I'm hoping that the solution to (1) will also clear up problem (2)...

    I guess I'm looking for a way to say "stop everything and start over", but I don't know how to say that in javascript

  • #15
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb Something to consider ...

    Why not just HIDE the "Show Bus Route 1" button until the journey is complete (or the user starts over with a F5 or shift-F5)?
    Then SHOW the hidden button at the end of the traversed route!

    That way you avoid the two bus problem altogether!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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