Sprites are not useful for this sort of fading technique, because they
only have two states, and they are mutually-exclusive. You might
experiment with using the same sprite image as the background for two
different HTML boxes, with different background-position offsets –
you would still get the benefits of faster loading inherent in the
technique, but you would still have to fade two separate elements in
and out.
I had a quick look at Transition FX, and discovered that while it has
a mouseover event, it doesn’t have the equivalent mouseout event, so
you can’t stack these up and get the look you want. The Observer
Action (part of Protaculous) allows you to do this, but at the price
of writing code to make it work.
Try the following in a blank page, just to get the idea.
-
Draw a graphics box on the page for your normal button. Give it a
color. In the Inspector, call it ‘normal’ using the Title field (don’t
include the quotes, naturally).
-
Apply the Observer Action to it. Set the Library picker to
scriptaculous-packed.
-
Set the top Event field to mouseover and click the Function Body
button to the right of that field.
-
Enter this line of code: $('over').appear({duration:0.3});
-
Duplicate the first box, name it ‘over’ and give the duplicate a
different color. In the Actions palette, change the event name to
mouseout, and change the code in the Function Body so it reads: $ ('over').fade({duration:0.3});
-
Apply the Protaculous Action to the page, set the Library picker to
scriptaculous-packed, and click the top Function Body button. Enter
this code: $('over').hide();
Finally, position these two identical graphics so that the “over”
image is directly above the “normal” image. Preview, and you should
see the images fading in and out when you mouse over and out.
Things to realize: a) This uses Scriptaculous and Prototype, so
(unlike jQuery or MooTools) it is completely compatible with Freeway’s
built-in effects. b) The names of the boxes are super-important. If
you duplicate this stacked pair of images, you will need to check the
Title field for each one, change it to something meaningful (products
and productsOver, for example) and then change the Observer functions
to match.
In your Protaculous Action code, you could use a shortcut like this: $ $('#homeOver, #productsOver, #aboutOver, #contactOver').invoke('hide'); to hide all of the “over” images at
once (using CSS notation for a collection of IDs) or you could just
put a separate line for each, like $('homeOver').hide(); if that
makes more sense to you. All that this code does is force the over
images to hide before the page finishes loading. As above, the names
(and the case of the letters of the names) is critically important.
Walter
On May 22, 2011, at 2:02 PM, stuart wrote:
Home
Really interesting thank you
But is there a way of applying the effect as a mouse over effect
instead
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