...

View Full Version : mouseover on toggling image button



xelawho
12-13-2010, 05:24 PM
Hi,

I have this button:

<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:


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 (http://www.xelawho.com/map/moving2.htm) if you want to have a look

jmrker
12-14-2010, 03:29 AM
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.

xelawho
12-14-2010, 06:40 AM
... 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 (http://xelawho.com/map/moving.htm)

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

jmrker
12-14-2010, 04:13 PM
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! :D

xelawho
12-14-2010, 05:51 PM
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! :D

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 (http://xelawho.com/?p=3244) explaining them.

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

or can it?

xelawho
12-14-2010, 10:39 PM
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.

jmrker
12-14-2010, 10:46 PM
Take out the test comments and test displays and see if this works for you.


<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.
:)

xelawho
12-15-2010, 12:46 AM
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. :thumbsup:

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?

jmrker
12-15-2010, 01:51 AM
Have you tried just 'reset'ting the program?

See: http://ilovethecode.com/Javascript/Javascript-Tutorials-How_To-Easy/Javascript_Reset_Form.shtml
or: http://www.roseindia.net/javascript/javascript-reset-method.shtml
or: http://www.javascript-coder.com/javascript-form/javascript-reset-form.htm
or other sites with a google search of "javascript reset()"

xelawho
12-15-2010, 02:44 AM
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:


map.panTo(p);
marker.setPoint(p);

but how to do that has got me stymied. Completely.

jmrker
12-15-2010, 03:11 AM
Which link is the most current version located?

xelawho
12-15-2010, 03:19 AM
this one (http://www.xelawho.com/map/moving2.htm)

jmrker
12-15-2010, 04:14 AM
this one (http://www.xelawho.com/map/moving2.htm)

I'm not sure I'm seeing the problem at this link. What is the sequence of mouse clicks that demonstrates the problem? :confused:

I'm using FF browser and assume the "Start" button (which I could not find :confused: ) 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 :eek:, 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. :thumbsup:

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.

xelawho
12-15-2010, 03:23 PM
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 :(

jmrker
12-15-2010, 07:20 PM
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! :thumbsup:

xelawho
12-15-2010, 07:29 PM
That way you avoid the two bus problem altogether! :thumbsup:

true, but not the north-pointing bus on its second run problem. I have a somewhat similar solution here (http://www.xelawho.com/map/moving15.htm) (and yes, that's test page 15... and counting...) that sidesteps both problems by turning the "start" button into a "reload page" button once it is pressed.

Which is OK as a last resort I guess. Seems a little hokey to me, but if there is no option (leaving aside drastic measures like actually learning javascript) I guess I can live with it.

xelawho
12-15-2010, 08:00 PM
just get rid (http://www.xelawho.com/map/moving5.htm) of the stupid start button altogether :eek:

jmrker
12-16-2010, 02:55 AM
true, but not the north-pointing bus on its second run problem. I have a somewhat similar solution here (http://www.xelawho.com/map/moving15.htm) (and yes, that's test page 15... and counting...) that sidesteps both problems by turning the "start" button into a "reload page" button once it is pressed.

Which is OK as a last resort I guess. Seems a little hokey to me, but if there is no option (leaving aside drastic measures like actually learning javascript) I guess I can live with it.

Why are you worrying about a north-pointing bus when it goes upside down for half the route while travelling west?
How many users are going to complain about any non-realities of the program?

Just go with the one that works the best for you. :thumbsup:

xelawho
12-16-2010, 06:46 PM
How many users are going to complain about any non-realities of the program?

I know. I'm just getting finicky at this point. thanks for your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum