PDA

View Full Version : Image Swap and Persist on OnClick?

gorilla1
03-06-2003, 12:43 AM
Is it possible to take an image swapper script, swapping images on onmouseover and onmouseout, and have it stay with the onmouseover image on onclick? This is in a single web page. So if I could have a variable that persisted, I guess it would be easy to do. Is there way to have a variable that is global in that way - across mouse events?
G
cheesebagpipe
03-06-2003, 01:18 AM
You don't need a 'global' variable (window property)...just a 'non-local' one (flag). Easiest thing is to make it a property of each image object itself - a logical namespace:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
</head>
<body>
<img src="http://www.codingforums.com/images/newthread.gif"
onmouseover="if(!this.latched)this.src='http://www.codingforums.com/images/reply.gif'"
onmouseout="if(!this.latched)this.src='http://www.codingforums.com/images/newthread.gif'"
onclick="this.latched=!this.latched">
</body>
</html>

You can change the onclick handler to "this.latched=true" if you don't want the 'latch' to be reversible. Can't illustrate how to use this approach with a rollover script without seeing the script.
gorilla1
03-06-2003, 03:40 AM
Thanks much, Cheesebagpipe. That works very nicely. However, I am doing something more involved, too. I have a number of images, and they swap and stay swapped as you go left to right with the mouse. Now when I use your switch, clciking a given image keeps the whole swap set on - until you mouse back down the chain. So I guess I need the switch to apply to collections, I think... Here is the way I used your code...

img name="xxx1" src="xxx.gif" onmouseover="if(!this.latched) Swap ('xxx1', 'xxx_over.gif');" onmouseout="if(!this.latched) quickSwap ('xxx1', 'xxx.gif');" onClick="this.latched=!this.latched;">

<img name="xxx2" src="xxx.gif" if(!this.latched) onmouseover="if(!this.latched) {Swap ('xxx1', 'xxx_over.gif'); Swap ('xxx2', 'xxx_over.gif');}" onmouseout="if(!this.latched) {Swap ('xxx1', 'xxx.gif'); Swap ('xxx2', 'xxx.gif');}" onClick="this.latched=!this.latched;">
gorilla1
03-06-2003, 02:16 PM
Looks like I need to set a latch for each image and toggle them appropriately on each event:

img name="xxx1" src="xxx.gif" onmouseover="if(!this.latched1) Swap ('xxx1', 'xxx_over.gif');" onmouseout="if(!this.latched)1 Swap ('xxx1', 'xxx.gif');" onClick="this.latched1=!this.latched1; this.latched2=!this.latched2;">

<img name="xxx2" src="xxx.gif" if(!this.latched2) onmouseover="if(!this.latched2) {Swap ('xxx1', 'xxx_over.gif'); Swap ('xxx2', 'xxx_over.gif');}" onmouseout="if(!this.latched2) {Swap ('xxx1', 'xxx.gif'); Swap ('xxx2', 'xxx.gif');}" onClick="this.latched2=!this.latched2; this.latched1=!this.latched1">

etc., etc.
Mr J
03-06-2003, 07:34 PM
Will any if these help?
I have two scripts.

Script One:

Onmouseover the image is changed from pic1 to pic2.
Onmouseout the image changes from pic2 to pic1
Onclick the image stays on. This image can be the same as onmouseover or differents.

All links use the same images.


Script Two:

Same as above but different images can be used with any link.

For example see



www.huntingground.freeserve.co.uk/webplus/buttons/imglink2.htm
gorilla1
03-07-2003, 01:07 PM
Thanks. Very nicely done. I was able to use the switch logic earlier in the thread to get it to work. The difficulty really centered on having to write the code over a multi-dimension array using asp, so that each mouse event statement became a loop inside of two other loops. Too much for my feeble brain.
G
p.s. I will come back and link this once it is a published page - can't do so now.