Page 1 of 1

using events to swap image

Posted: Wed Feb 03, 2021 12:25 am
by LJLachance
I have read "using events to create roll-over images" and have that working using the mouseover/mouseout events, but... Can I use events to swap images. I have two identically sized .jpg images. What I want is to have the user click (I assume using the on-click event) the image and display the second image in it's place. Actually I have that working as well but... Now I want them to be able to click a second time so that it toggles the image back to the original. Tried using "onclick toggle" but the first image doesn't go away ... any insight appreciated.

Re: using events to swap image

Posted: Wed Feb 03, 2021 7:14 am
by Pablo
There is no standard solution for this, because there is no way to keep track of the current state of the images without JavaScript.
So, you wiill need to write a script to implement this functionality.

Re: using events to swap image

Posted: Wed Feb 03, 2021 9:51 am
by WWBman
Can't you use the following, or have I misunderstood what's required.

Image1: OnClick Hide + OnClick Show Image2
Image2: OnClick Hide + OnClick Show Image 1

That works for me, only one click on each image required.

Re: using events to swap image

Posted: Wed Feb 03, 2021 1:30 pm
by LJLachance
WWB, your solution works with just a minor issue. Clicking causes a slight "jump" in the in the screen but I think I can live with that. I may search to see if I can find a javascript to to do the same thing if it would be a smooth transition but for now, thanks for offering up this solution.

L

Re: using events to swap image

Posted: Wed Feb 03, 2021 1:54 pm
by WWBman
What do you mean by a "slight" jump in the screen?

Re: using events to swap image

Posted: Wed Feb 03, 2021 2:13 pm
by LJLachance
Not sure how to explain that - when you click in a browser (chrome in this case) as the switch between images is made, it's a "jump" like the screen does an "offset" for a millisecond - just enough to perceive what you're looking at move a bit. Not just the image but the entire page. Maybe the word "blip" is better - like an extremely brief power interruption - anyway - it still works and thanks for letting me know about it.

Re: using events to swap image

Posted: Wed Feb 03, 2021 2:17 pm
by WWBman
LJLachance wrote: Wed Feb 03, 2021 2:13 pm Not sure how to explain that - when you click in a browser (chrome in this case) as the switch between images is made, it's a "jump" like the screen does an "offset" for a millisecond - just enough to perceive what you're looking at move a bit. Not just the image but the entire page. Maybe the word "blip" is better - like an extremely brief power interruption - anyway - it still works and thanks for letting me know about it.
OK, you're welcome.
I don't see that effect on my desktop.

Re: using events to swap image

Posted: Wed Feb 03, 2021 7:18 pm
by LJLachance
So it took me a while trying various javascripts which I can't figure out how to actually include in an event...my bad - BUT, the effect I wanted is achieved perfectly using the "rollover image" built-in to WB. Just had to place it in my layout grid, select the second image as the "hover image" and then "trigger" using click instead of "hover". Sometimes I feel like Homer Simpson ... Doh! Anyway, this is a perfect fix to swap two images back and forth with a click and no adverse effects I can find.