Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Swap Image Button OnClick not OnMouseOver 2
- Thread starter soonkhoo
- Start date
-
1
- #2
Yes, just use OnClick instead. To enable the button to know whether it is down or up, you will have to set a variable.
...
function imageSwap(){
if(!document.myImg.isOn){
swap to other image, and set isOn to true}
else if(document.myImg.isOn){
swap back and set isOn to false}
}
...
<a href="javascript:imageSwap()"><img src="..." name="myImg" isOn=false></a>
Here I have added a variable to the image simply by writing it inside the img tag, I am not sure if this will cause probs somewhere, but if so you will need to create one using prototype. It worked for me though. Access it in the usual way:
document.imageName.isOn
NOTE: to enable these things for NN, you will need to make it a link like I have done. NN will not read events from an img. This is why I have done this above.
href="javascript:function" makes the link call a function instead of acting as a link "Alright whatever man, I'll hook up the hair, but I aint touchin the ring...Cause I'm still a pla--yer"
...
function imageSwap(){
if(!document.myImg.isOn){
swap to other image, and set isOn to true}
else if(document.myImg.isOn){
swap back and set isOn to false}
}
...
<a href="javascript:imageSwap()"><img src="..." name="myImg" isOn=false></a>
Here I have added a variable to the image simply by writing it inside the img tag, I am not sure if this will cause probs somewhere, but if so you will need to create one using prototype. It worked for me though. Access it in the usual way:
document.imageName.isOn
NOTE: to enable these things for NN, you will need to make it a link like I have done. NN will not read events from an img. This is why I have done this above.
href="javascript:function" makes the link call a function instead of acting as a link "Alright whatever man, I'll hook up the hair, but I aint touchin the ring...Cause I'm still a pla--yer"
- Thread starter
- #3
Hi bangers,
I understand your concept... but I don't understand how you swap the images and to set the isOn to true. Do you do all this in the <head> tag?
And in the <body> tag, do you type in this way?
<a href="javascript:imageSwap()">
or do you include the image src after the href link.
OR do you include the image src in the function?
Soon
I understand your concept... but I don't understand how you swap the images and to set the isOn to true. Do you do all this in the <head> tag?
And in the <body> tag, do you type in this way?
<a href="javascript:imageSwap()">
or do you include the image src after the href link.
OR do you include the image src in the function?
Soon
- Thread starter
- #4
- Thread starter
- #6
In bangers code,
function imageSwap(){
if(!document.myImg.isOn){
How do you swap to other image here? and set to True?
else if(document.myImg.isOn){
swap back and set isOn to false}
}
...
<a href="javascript:imageSwap()"><img src="..." name="myImg" isOn=false></a>
function imageSwap(){
if(!document.myImg.isOn){
How do you swap to other image here? and set to True?
else if(document.myImg.isOn){
swap back and set isOn to false}
}
...
<a href="javascript:imageSwap()"><img src="..." name="myImg" isOn=false></a>
Oh I'm sorry, I thought you had that code sorted. The concept is, that you have an image, and it's src property holds the source for the data it will display.
By changing the src, it will display a different image, while keeping all other attributes the same; name, isOff etc. So the image remains referencable from the same name.
So supposing we have an image called myImage, and it has an image src called "ButtonImage.gif". We are going to swap this for another one, or back, depending on some conditions:
<head>
<script language="JavaScript">
var myImageOn = new Image();
myImageOn.src = 'Button_On_Image.gif';
function imageSwap(){
if(document.MyImage.isOff){
document.myImage.isOff = false;
document.myImage.src = myImageOn.src;
}
else if(!document.bang.isOff){
document.myImage.isOff = true;
document.myImage.src="ButtonImage.gif";
}
}
</script>
</head>
<body bgColor="black">
<a href="javascript:imageSwap()"><img border="0" name="myImage" isOff=true src="ButtonImage.gif" width="60" height="60" ></a>
</body>
Note: We have switched the logic and used isOff now because I found the effect did not work on the first click of the button, but did on subsequent clicks.
This is something to do with setting the variable to false when initialising. Now it works right form word go.
We have used the Image() constructor to hold an image.An image cannot be displayed purely using the constructor, only by giving it's src to an existing one.
By using an internal variable it will make it easier toi modify the function to cope with multiple changing images.
I hope this has clarified it a bit.
Let me know if you want to modify it to accept multiple images.This will involve storing images in Arrays.
-Ben "Alright whatever man, I'll hook up the hair, but I aint touchin the ring...Cause I'm still a pla--yer"
By changing the src, it will display a different image, while keeping all other attributes the same; name, isOff etc. So the image remains referencable from the same name.
So supposing we have an image called myImage, and it has an image src called "ButtonImage.gif". We are going to swap this for another one, or back, depending on some conditions:
<head>
<script language="JavaScript">
var myImageOn = new Image();
myImageOn.src = 'Button_On_Image.gif';
function imageSwap(){
if(document.MyImage.isOff){
document.myImage.isOff = false;
document.myImage.src = myImageOn.src;
}
else if(!document.bang.isOff){
document.myImage.isOff = true;
document.myImage.src="ButtonImage.gif";
}
}
</script>
</head>
<body bgColor="black">
<a href="javascript:imageSwap()"><img border="0" name="myImage" isOff=true src="ButtonImage.gif" width="60" height="60" ></a>
</body>
Note: We have switched the logic and used isOff now because I found the effect did not work on the first click of the button, but did on subsequent clicks.
This is something to do with setting the variable to false when initialising. Now it works right form word go.
We have used the Image() constructor to hold an image.An image cannot be displayed purely using the constructor, only by giving it's src to an existing one.
By using an internal variable it will make it easier toi modify the function to cope with multiple changing images.
I hope this has clarified it a bit.
Let me know if you want to modify it to accept multiple images.This will involve storing images in Arrays.
-Ben "Alright whatever man, I'll hook up the hair, but I aint touchin the ring...Cause I'm still a pla--yer"
- Thread starter
- #8
This is COOL!!! Thanks! But one thing though, now that I have your code to swap images I can't get my buttons to work for my mp3 player. I have a script written in VBscript and the Play and Stop button has its own name:
BtnPlay and BtnStop.
In your code, it is written keeping the name of the src constant. How then can I change the name?
BtnPlay and BtnStop.
In your code, it is written keeping the name of the src constant. How then can I change the name?
- Thread starter
- #9
Ben,
Here is the source code for the WMP. It's Half VBscript Half Javascript. Is it possible to call a function from another language to another function?? Or just forget about the VBscript and use MediaPlayer1.Play to play? If so, where??
--Soon(desperate)
<HTML>
<HEAD><TITLE>Windows Media Player Test</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub BtnPlay_OnClick
MediaPlayer1.Play
End Sub
Sub BtnStop_OnClick
MediaPlayer1.Stop
MediaPlayer1.CurrentPosition = 0
End Sub
-->
</SCRIPT>
<script language="JavaScript">
<!--
var myImageOn = new Image();
myImageOn.src = 'Images/play.gif';
function imageSwap(){
if(document.BtnStop.isOff){
document.BtnStop.isOff = false;
document.BtnStop.src = myImageOn.src;
}
else if(!document.BtnStop.isOff){
document.BtnStop.isOff = true;
document.BtnStop.src="Images/stop-up.gif";
}
}
//-->
</script>
</HEAD>
<BODY bgcolor="#EEEEEE">
<BR>
<object id="MediaPlayer1" width=0 height=0
classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"
codebase=" nsmp2inf.cab#Version=6,4,5,715"
standby="Loading Microsoft® Windows Media™ Player components..."
type="application/x-oleobject" align="middle">
<param name="FileName" value="C:\My Music\Bosson - One in a Million (From Miss Congeniality Soundtrack).mp3">
<param name="ShowControls" value="False">
<param name="AutoRewind" value="True">
<param name="AutoStart" value="True">
<embed name="MediaPlayer1" width="27" height="17" filename="C:\My Music\Bosson - One in a Million (From Miss Congeniality Soundtrack).mp3" showcontrols="False" autorewind="True" autostart="True" src="C:\My Music\Bosson - One in a Million (From Miss Congeniality Soundtrack).mp3" align="middle">
</embed>
</object>
<a href="javascript:imageSwap()"><img border="0" name="BtnStop" isOff=true src="Images/stop-up.gif"></a>
<br><br><br><br>
<img src="Images/play.gif" width="27" height="23" name="BtnPlay" value="Play" border="0">
<img src="Images/stop-up.gif" width="27" height="23" NAME="BtnStop" VALUE="Stop"><br>
</BODY>
</HTML>
Here is the source code for the WMP. It's Half VBscript Half Javascript. Is it possible to call a function from another language to another function?? Or just forget about the VBscript and use MediaPlayer1.Play to play? If so, where??
--Soon(desperate)
<HTML>
<HEAD><TITLE>Windows Media Player Test</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub BtnPlay_OnClick
MediaPlayer1.Play
End Sub
Sub BtnStop_OnClick
MediaPlayer1.Stop
MediaPlayer1.CurrentPosition = 0
End Sub
-->
</SCRIPT>
<script language="JavaScript">
<!--
var myImageOn = new Image();
myImageOn.src = 'Images/play.gif';
function imageSwap(){
if(document.BtnStop.isOff){
document.BtnStop.isOff = false;
document.BtnStop.src = myImageOn.src;
}
else if(!document.BtnStop.isOff){
document.BtnStop.isOff = true;
document.BtnStop.src="Images/stop-up.gif";
}
}
//-->
</script>
</HEAD>
<BODY bgcolor="#EEEEEE">
<BR>
<object id="MediaPlayer1" width=0 height=0
classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"
codebase=" nsmp2inf.cab#Version=6,4,5,715"
standby="Loading Microsoft® Windows Media™ Player components..."
type="application/x-oleobject" align="middle">
<param name="FileName" value="C:\My Music\Bosson - One in a Million (From Miss Congeniality Soundtrack).mp3">
<param name="ShowControls" value="False">
<param name="AutoRewind" value="True">
<param name="AutoStart" value="True">
<embed name="MediaPlayer1" width="27" height="17" filename="C:\My Music\Bosson - One in a Million (From Miss Congeniality Soundtrack).mp3" showcontrols="False" autorewind="True" autostart="True" src="C:\My Music\Bosson - One in a Million (From Miss Congeniality Soundtrack).mp3" align="middle">
</embed>
</object>
<a href="javascript:imageSwap()"><img border="0" name="BtnStop" isOff=true src="Images/stop-up.gif"></a>
<br><br><br><br>
<img src="Images/play.gif" width="27" height="23" name="BtnPlay" value="Play" border="0">
<img src="Images/stop-up.gif" width="27" height="23" NAME="BtnStop" VALUE="Stop"><br>
</BODY>
</HTML>
-
1
- #10
Windows Media FAQ:
faq215-353
Sincerely,
Tom Anderson
CEO, Order amid Chaos, Inc.
faq215-353
Sincerely,
Tom Anderson
CEO, Order amid Chaos, Inc.
- Thread starter
- #11
Those are two completely unrelated tasks. OnClick, call one function to swap images and another to control your media player.
Sincerely,
Tom Anderson
CEO, Order amid Chaos, Inc.
Sincerely,
Tom Anderson
CEO, Order amid Chaos, Inc.
- Thread starter
- #13
- Thread starter
- #14
Is there a way then when the image is swapped, that means onclick, another function executes? Say, I have a WMP playing onload, clicking on the stop button would stop the music playing and the stop image is swaped to a play button, vice versa.?
Soon
Soon
<a href="javascript:stop_player()"><img src="stop.gif" name="stop"></a>
<script>
function stop_player()
{
swap(stop);
Player.stop();
}
function swap(img)
{
The code you discussed with bangers above.
}
</script>
Sincerely,
Tom Anderson
CEO, Order amid Chaos, Inc.
<script>
function stop_player()
{
swap(stop);
Player.stop();
}
function swap(img)
{
The code you discussed with bangers above.
}
</script>
Sincerely,
Tom Anderson
CEO, Order amid Chaos, Inc.
- Thread starter
- #16
hmmm for some reason, it didn't work... what is that var img?? Anyway, I thought of another way of swapping the images.... what if I use <div> tag instead? That way I have 2 layers overlapping each other. 1st layer has the stop.gif and the stop function to play the audio. After clicking on the stop button, the layer hides and the 2nd layer shows with the Play button. Then when clicking on the play button, the 2nd layer hides and the 1st layer shows...
Is it possible?? I'm using Dreamweaver, so it's fairly easy for me to layout the layer..
Is it possible?? I'm using Dreamweaver, so it's fairly easy for me to layout the layer..
Don't use layers, that's silly. Here's a more fleshed-out example:
<head>
<script>
var stop_on = new Image();
stop_on.src = "stop_on.gif";
var stop_off = new Image();
stop_off.src = "stop_off.gif";
var play_on = new Image();
play_on.src = "play_on.gif";
var play_off = new Image();
play_off.src = "play_off.gif";
var pause_on = new Image();
pause_on.src = "pause_on.gif";
var pause_off = new Image();
pause_off.src = "pause_off.gif";
function swap(img,which)
{
eval("document."+img+".src="+img+"_"+which+".src"
;
}
function stop_player()
{
swap("stop","on"
swap("play","off"
swap("pause","off"
Player.stop();
}
function pause_player()
{
swap("stop","off"
swap("play","off"
swap("pause","on"
Player.pause();
}
function play_player()
{
swap("stop","off"
swap("play","on"
swap("pause","off"
Player.stop();
}
</script>
</head>
<body>
<a href="javascript:stop_player()"><img src="stop_off.gif" name="stop"></a>
<a href="javascript
ause_player()"><img src="pause_off.gif" name="pause"></a>
<a href="javascriptlay_player()"><img src="play_off.gif" name="play"></a>
</body>
Sincerely,
Tom Anderson
CEO, Order amid Chaos, Inc.
<head>
<script>
var stop_on = new Image();
stop_on.src = "stop_on.gif";
var stop_off = new Image();
stop_off.src = "stop_off.gif";
var play_on = new Image();
play_on.src = "play_on.gif";
var play_off = new Image();
play_off.src = "play_off.gif";
var pause_on = new Image();
pause_on.src = "pause_on.gif";
var pause_off = new Image();
pause_off.src = "pause_off.gif";
function swap(img,which)
{
eval("document."+img+".src="+img+"_"+which+".src"
;}
function stop_player()
{
swap("stop","on"
;swap("play","off"
;swap("pause","off"
;Player.stop();
}
function pause_player()
{
swap("stop","off"
;swap("play","off"
;swap("pause","on"
;Player.pause();
}
function play_player()
{
swap("stop","off"
;swap("play","on"
;swap("pause","off"
;Player.stop();
}
</script>
</head>
<body>
<a href="javascript:stop_player()"><img src="stop_off.gif" name="stop"></a>
<a href="javascript
ause_player()"><img src="pause_off.gif" name="pause"></a><a href="javascript
lay_player()"><img src="play_off.gif" name="play"></a></body>
Sincerely,
Tom Anderson
CEO, Order amid Chaos, Inc.
That should be Player.play() in the play_player() function 
I've made a color-coded version of the swap function in faq215-373 to help distinguish the variables from the strings.
Sincerely,
Tom Anderson
CEO, Order amid Chaos, Inc.
I've made a color-coded version of the swap function in faq215-373 to help distinguish the variables from the strings.
Sincerely,
Tom Anderson
CEO, Order amid Chaos, Inc.
- Thread starter
- #19
Yes... but your code has more than 1 button... I need only 1 button. Is possible for you to take out the 2 buttons.. leave 1 there to swap. Since your function, say, stop-on button, when clicked it swaps with stop-off button. Therefore, can you replace your stop-off button with play-on button instead? Just like what bangers did.
Regards,
Soon
Regards,
Soon
Yes, you can do whatever you want.
Sincerely,
Tom Anderson
CEO, Order amid Chaos, Inc.
Sincerely,
Tom Anderson
CEO, Order amid Chaos, Inc.
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question