Mouseover/rollover image--then shows a different image?


(LabCoat Guy) #1

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.

Thanks for any and all suggestions.


(Lisa Sandler) #2

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


(LabCoat Guy) #3

Thank you. I’m looking at it.


(Konstantijn Van Calster) #4

@labcoatguy
You can also use the Compare stack from Doobox https://www.doobox.co.uk/stacks_store/demos/compare.html


(LabCoat Guy) #5

Will’s stack works very well on a mobile device, but it’s not real easy on a Mac trackpad.


(Will Woodgate) #6

Providing that the two images are the same size, you probably want something like this:
https://stacks4stacks.com/hoverbox/

It includes a choice of alternative methods for touch screens / devices without mouse input.


(LabCoat Guy) #7

That looks exactly like what I’m looking for except I cant make it work on an iphone. Do you have examples for an iphone?


(Will Woodgate) #8

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:

https://yourhead.zendesk.com/hc/en-us

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.


(LabCoat Guy) #9

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.


(LabCoat Guy) #10

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/


(Robert Ziebol 🖖🏼) #11

There is also the QuickFlip stack by Joe Workman
https://joeworkman.net/rapidweaver/stacks/quickflip/


(LabCoat Guy) #12

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 Media https://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.


(Robert Ziebol 🖖🏼) #13

Yeah, there will be a site re-do later this year. Glad you like it.


(DeFliGra) #14

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.

The Tivoli Stack can be downloaded at the bottom of defligra.com
Mouseover demo (bottom of page).