I’m looking for a method or technique that I’m guessing could exist in a stack somewhere whereby if there was Image-A on a page, and if a site visitor moused over or rolled over Image-A–then Image-B would pop up.
I’ve got a project that involves some complicated cause-and-effect content, and if I could show cause is Image-A, then a mouseover/rollover would demonstrate the result is effect in Image-B.
I think I’ve seen something like this somewhere but can’t remember where.
This is what I use now to show before and after… because mouseovers won’t work on tablets and phones. https://stacks4stacks.com/imagecompare/ @willwood offers it. Shoot him a donation if you like it
By default, only the static layer is shown on touch devices. Want to display both layers on touch devices? Then simply change that option in the stack settings. It’s the first option shown in the HoverBox settings.
I don’t know what your background knowledge of Stacks is. If you are new to the idea of RapidWeaver and Stacks I would certainly recommend you take a look at the tutorials here:
The settings for a stack (like HoverBox) can be accessed in the Page Inspector, when the stack is selected in edit mode.
RW6 and RW7 will let you preview what the completed page will look like on iPhone and iPad - so you can see how the completed page will look and function. Previewing ‘modes’ are available from the drop-down menu, in the uppermost RW toolbar.
Will: I understand that I have to change the default settings in the stack to make it work on a touchscreen, what I’m asking for is an example on the www that I can go to on an iphone or ipad and see how hoverbox works for a touchscreen device, a smartphone, that type of thing. Do you know of a URL where I could evaluate because you don’t have that set up on the s4s page for hoverbox. It would be nice if you did. Even if it didn’t work very well because that would help potential buyers like me make a decision. Thanks.
One Little Designer makes an interesting stack called Augment Flip that have interesting effects for photographs and images and text. All the effects work well on an iphone and ipad and other smartphones as well. http://onelittledesigner.com/rapidweaver-stack/augment_Flip/
That’s very similar to the 1ld Augment stack. I like it. Thanks for your help. I looked on Joe’s site before under the Image and Mediahttps://joeworkman.net/rapidweaver/image-media/ section but nothing like that shows up so I didn’t know about Quickflip. Joe doesn’t have a search box either so I wouldn’t know how to find this withot you’re help.
Another simple image hover / rollover solution is the Tivoli Stack.
It’s made with another purpose in mind, but can be used to reveal a different image on mouseover / hover.
How: Add a background image to the Tivoli Stack > Turn off the animation > Drop an image to the Tivoli Stack > Set opacity on hover/mouseover to 0.0% (see settings).
In the example attached the end opacity is not set to 0.0 which is why the two images on mouseover blend.
