[Pro] Solid CSS Rollover Method Yet?

Freeway
1

Hi All,

I have taken some time and read a post from a year ago discussing CSS Rollovers. I have looked at Paul’s action and read Walt’s method. Paul’s action states that it is experimental and Walt’s seems solid, just not as automated as one would hope for.

  1. Are the challenges and issues regarding CSS image rollovers in Freeway as they were a year ago or is there a simple solution to get this done.

  2. Is Walt’s method a solid approach with the only downside being it requires a little hand crafting?

  3. Is this still the best documentation on how to do all this by hand in Freeway?

http://scripty.walterdavisstudio.com/sprite/index.html

Thank you all in advance for you input,

TeamSDA_Dave

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

2

My vote goes to the sprites method.

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

3

Likewise Helveticus

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

4

Hi and thank you for your input,

Are you both referring to Walt’s method? Also can anyone address the three questions directly?

Thank You, Team SDA_Dave

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

5

2 & 3 == yes.

You will need to learn a bit about CSS to make sense of it, and break
out a calculator to figure out the offsets, but it is the way that
sprites get made, and sprites are an important technique to know when
wresting the last gasps of improvement out of a site. Large pages, or
pages that get a lot of hits, will see a measurable improvement in
terms of hosting and bandwidth costs. This is one reason why Apple and
YouTube and Yahoo all practice this technique. User’s perceived
performance is another great reason.

Walter

On Nov 7, 2010, at 9:23 PM, TeamSDA wrote:

Hi All,

I have taken some time and read a post from a year ago discussing
CSS Rollovers. I have looked at Paul’s action and read Walt’s
method. Paul’s action states that it is experimental and Walt’s
seems solid, just not as automated as one would hope for.

  1. Are the challenges and issues regarding CSS image rollovers in
    Freeway as they were a year ago or is there a simple solution to get
    this done.

  2. Is Walt’s method a solid approach with the only downside being it
    requires a little hand crafting?

  3. Is this still the best documentation on how to do all this by
    hand in Freeway?

Home

Thank you all in advance for you input,

TeamSDA_Dave

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

6

Hi Walt,

Thank you for the input, super helpful as always. I will try my hand at this over the next week. Also thank you for the link, you are an invaluable resource to the Freeway community.

Team SDA_Dave

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

7

Walter’s explanation covers it all nicely but here’s another example I
put together a while ago that may also be of help, <http://www.xiiro.com/demo/css_graphic_menu/index.html

. Given that FW has been updated a few times since I posted this
example some of the UI references may have changed slightly but it
should still work fine.

For what it’s worth…

Todd

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

8

Are you both referring to Walt’s method?

Yes!

Here’s a very simple site with sprites in the horizontal menu http://tinyurl.com/32k9dw6

Marcel

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

9

Thank You Everyone,

So appreciate your input.

TeamSDA_Dave

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

10

Hi,
the problem with my Action is that it needs to grab the graphics which Freeway outputs to make the sprite for the rollover. The problem here is that there doesn’t seem to be a reliable way to get the final published location on the Mac’s file system to do this. My Action takes the best guess that it can.

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

11

Hi Paul,

You offer some really cool stuff on your site. If you could bundle Walt’s approach up into an action that would be great.

Perhaps I am not understanding just how how all this works but isn’t the whole idea behind this to use a sprite (one image will all states on it) that is moved around via CSS X and Y coordinates? It would seem that an action interface could be developed to set up all fields and and such. Open to any further enlightenment any one has.

Thank You All,

TeamSDA_Dave

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

12

The issue with trying to Action-ize this is you would need to either
mash all the images together yourself (not simple within an Action) or
you would need an interface that could handle every possible offset
combination for as many different sprite sectors as you are likely to
use (also not something that Action interfaces work well for) and ask
the user to create their combo sprite first.

I’ve asked in the past if Freeway’s own core graphics engine could
“vacuum up” every image (not just those involved in Rollover effects)
under a certain threshold of dimensions and combine them into a
sprite. So far it hasn’t happened. It would be a very cool feature,
particularly if it didn’t need any user interaction to “Just Work” –
if Freeway just worked that way for any image below a threshold. I
could see a case where you’d also want a checkbox on the Image
Inspector to disable this behavior for cases where you want individual
images for some reason of your own.

There’s a Web application that can automate this process for you, but
I haven’t used it before.

You might want to give it a try and see how it goes for you.

Walter

On Nov 9, 2010, at 12:50 PM, TeamSDA wrote:

Hi Paul,

You offer some really cool stuff on your site. If you could bundle
Walt’s approach up into an action that would be great.

Perhaps I am not understanding just how how all this works but isn’t
the whole idea behind this to use a sprite (one image will all
states on it) that is moved around via CSS X and Y coordinates? It
would seem that an action interface could be developed to set up all
fields and and such. Open to any further enlightenment any one has.

Thank You All,

TeamSDA_Dave

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

13

Hi Walt,

I am going to have to some more reading, thank you for the links. I seem to be missing something as I was thinking that the CSS is just moving one large image around in each of the html box’s. Not totally understanding why all the graphics box’s are built in freeway. It appears the online tool link assembles multiple images into one, if that is so I am a little confused as it would seem that making one graphic would be simpler to do in the first place.

If you have time and the patience to explain further I would appreciate it otherwise I will tinker with all the samples until the lightbulb goes on. This is all still a little fuzzy.

Yes it would be cool if Freeway could bundle this into there system. It is always so great when they provide these types of features as part of their releases.

Thank You,

TeamSDA_Dave

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

14

In my initial tutorial, I was using Freeway to generate the one large
graphic out of multiple individual graphic text boxes, so that’s why I
started with those there.

You are correct, the CSS is moving one big image around.

What I was musing about Freeway doing was to do that work for you –
to locate every image below a certain size threshold, say 64px in
either dimension, and moosh it together with all the other such images
on the page (in the site) to create a single global sprite image that
would be moved around by CSS.

The Web app I linked to does the same thing. The reason why they want
you to upload a zip full of separate images rather than a single
sprite is because by naming those images carefully and according to a
recipe, the CSS can be generated at the same time that the images are
mooshed together, and the names of the images become the classnames
within the resulting CSS file.

Since their server is both doing the CSS authoring and doing the
mooshing, it knows precisely what x/y offsets to include in the
resulting background-position tags, and it uses the names of the image
files to key everything together.

Walter

On Nov 9, 2010, at 2:46 PM, TeamSDA wrote:

Hi Walt,

I am going to have to some more reading, thank you for the links. I
seem to be missing something as I was thinking that the CSS is just
moving one large image around in each of the html box’s. Not totally
understanding why all the graphics box’s are built in freeway. It
appears the online tool link assembles multiple images into one, if
that is so I am a little confused as it would seem that making one
graphic would be simpler to do in the first place.

If you have time and the patience to explain further I would
appreciate it otherwise I will tinker with all the samples until the
lightbulb goes on. This is all still a little fuzzy.

Yes it would be cool if Freeway could bundle this into there system.
It is always so great when they provide these types of features as
part of their releases.

Thank You,

TeamSDA_Dave

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

15

OK… Seems to make sense.

I will have to try my hand at this. I think I would like to lay out a graphic to the exact pixel size and use the individual state coordinates in the CSS. Not to hard to build this this in Adobe Illustrator and get the exact X and Y coordinates.

  1. Would this mean I can skip your first freeway multiple graphics box step?

  2. Will the rest of your instructions still apply or do I need to do something different

Thank You Walt,

TeamSDA_Dave

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

16

Yes to 1, I am pretty sure. I used Freeway to generate the graphics,
so if you do that elsewhere you should be just fine. There is a
setting in Illustrator to snap to pixel grid – make sure that’s on,
or things will be fuzzy around the edges.

Everything else just stands. Remember to do all your math in negative
numbers from top-left.

Walter

On Nov 9, 2010, at 4:28 PM, TeamSDA wrote:

OK… Seems to make sense.

I will have to try my hand at this. I think I would like to lay out
a graphic to the exact pixel size and use the individual state
coordinates in the CSS. Not to hard to build this this in Adobe
Illustrator and get the exact X and Y coordinates.

  1. Would this mean I can skip your first freeway multiple graphics
    box step?

  2. Will the rest of your instructions still apply or do I need to do
    something different

Thank You Walt,

TeamSDA_Dave

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

17

Thank You Walt,

Also thank you for the sap to pixel grid tip for Illustrator. Very helpful.

TeamSDA_Dave

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