...

View Full Version : Resolved help with on off button img swap



Damo
03-23-2009, 03:21 PM
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.



<script type="text/javascript">

function imgswap(){

if ( )
{
document.playbuttons_1.src="play.gif";
}
else
{
document.playbuttons_1.src="stop.gif";
}
}
</script>


From the body


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


Any help would be fantastic
thanks

jmrker
03-23-2009, 05:57 PM
<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



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

Damo
03-24-2009, 04:57 AM
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

jmrker
03-24-2009, 05:40 AM
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:


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

Damo
03-24-2009, 06:29 AM
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.

TinyScript
03-24-2009, 07:41 AM
<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

TinyScript
03-24-2009, 07:47 AM
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



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

Damo
03-24-2009, 08:29 AM
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.

jmrker
03-24-2009, 06:59 PM
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.


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum