Image rollover


#1

Is it possible to have an image rollover lets say when the user rolls over a grayscale image it appears in colour ?

Cheers

Chris


#2

Yes, if you know a little JS it’s possible. It won’t render in app but you can write somthing up and attach it to run with the page. There is no non-coding way.


#3

Hi Chris (& Norm)

I’ve just found a non-code way of doing an image rollover! :slight_smile:

First create the two images that you want to use, the “normal” one and the “rollover” one, and make sure that they’re exactly the same size. ALSO create a completely transparent PNG image that’s exactly the size!

Using an Image Bric set its image as the transparent PNG.

In the Class Manager add a new class for this rollover, say something like “image1rollover”, and in the style settings section (the one that looks like a paint brush) click on the square blank Image frame and select your “normal” image from the file dialog box. Now click on the “class state” dropdown at the top of the Class Manager window, select “:hover”, click on the square blank Image frame again and select your “hover” image. Click on Done.

Finally click on your image Bric again and select the “image1rollover” option when you click in the “Classes” field.

Preview in your browser of choice to see the rollover working! :smile:

Note: You’ll have to create a separate class for each rollover image on the page.

Check out my mobile apps website to see this in action:
www.roddysimpson.com/mobileapps

(and if you click on my name (also a rollover) then that’ll take you to my moving image and photography site - made with Blocs too!


#4

Hi Macrod,

When you say completely transparent PNG image, what transparent image?
is it the transparent image of the ‘normal’ or ‘rollover’


#5

Sorry for the delay in replying… set the image bloc’s image to the transparent PMG.