Transition FX change background image

Freeway
1

Is it possible to use the “Transition FX” action to change the background image of a page?

E.g. When user hovers over ‘Item A’, background changes to ‘Image A’, then when user hovers over ‘Item B’, background changes to ‘Image B’, preferrably with a smooth fade.

All help much appreciated,

Zac

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Not with Transition FX, but it would be pretty simple to do with
Protaculous Observer.

Code alert!

Use blank unlinked pages to upload additional background images (or
use Upload Stuff or similar for the same effect.)

Make note of the current path and filename of your background, as
well as the filenames that Freeway has generated for your alternate
backgrounds.

Apply Observer to your button object (whatever you want to catch
hover events from).

Add ‘mouseover’ (without the quotes) in the first Event field, and
then paste the following code into the first Function Body dialog:

document.body.style.backgroundImage.src = 'path/to/bg.jpg';

Obviously, change that path to be a real file path.

Now do the same in the second Event field, changing the event to
‘mouseout’;

document.body.style.backgroundImage.src = 'path/to/original.jpg'

That should get you the effect you want. Note that if the object you
observe contains any child objects, this effect will not work
predictably, so stick to simple images as the trigger.

Walter

On Oct 31, 2008, at 11:47 AM, zacbest wrote:

Is it possible to use the “Transition FX” action to change the
background image of a page?

E.g. When user hovers over ‘Item A’, background changes to ‘Image
A’, then when user hovers over ‘Item B’, background changes to
‘Image B’, preferrably with a smooth fade.

All help much appreciated,

Zac

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Oh, sorry, missed the graceful fade part. Here’s how to add that.

When you add the Observer, switch the Library setting to scriptaculous or scriptaculous-packed from the default of prototype.

Now, change your function to be thus:

$(document.body).morph({backgroundImage:'path/to/bg.jpg'});

The default timing for morph is 1 second cross-fade.

If this (or the previous fast-switch) doesn’t work for some reason, then you may have to make a background declaration rather than a backgroundImage declaration. The background tag combines all the properties of background-color and background-image in one.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options