In another thread, Walter Davis helped initiate my investigation of CSS Sprites, which ultimately led me to the discussion here. Of course, I found Paul’s nice CSS Rollovers action here:
I read Paul’s basic description, downloaded the Action, and applied it to Freeway 5. After that, I opened a new document, sketched a graphic box, imported a GIF, and applied Paul’s action. But in the Actions palette, I am presented with exactly the same sort of thing I get when I use Freeway’s built-in JS rollover action.
More to the point, I have read that the benefit of using CSS sprites and rollovers is that you can reduce the number of HTTP requests (and sometimes reduce filesizes too) by having a single graphic:
In other words, CSS Rollovers are such that you have one graphic with all the roll states, and the CSS works the magic to visually make one graphic “appear” to roll over another.
But after applying Paul’s action to a single graphic in Freeway, I don’t see how to proceed. And if someone wishes to tell me that Paul’s action requires “more than one graphic box,” I don’t see the point of using CSS since, again, CSS rollovers are supposed to accomplish their magic on a single graphic.
Chuck, I feel it is important to consider the following points:
Any Freeway action named “CSS Menus” would lead most intelligent people to conclude its use is for the creation of menus, and any purpose outside that would be a specialty application. This is especially true in light of the proper use of “CSS Menus” being in conjunction with an HTML box that has a text based list inside it.
Paul’s “CSS Rollovers” action still appears on his site, with no mention that it is now obsolete. Indeed, the very last sentence in his description (if you cared to have read it) states the following:
You will need Freeway Pro 4.1.1 or greater to use this Action.
Such a statement should not necessarily be taken to exclude Freeway 5.x. Indeed, some actions written prior to FW5 still work.
Your post does not make any attempt to answer the fundamental question I posted above about Paul’s action (which stands, regardless of whether one feels Paul’s action is obsolete or not).
Did you try using it? Because I believe what it does is present the
familiar Freeway Rollover interface in the Actions palette, then
completely changes the way the finished code works. Using a graphics
library that runs in AppleScript, it stitches the two (or more) image
states together into a single sprite, re-writes all the rollover code
to use CSS positioning instead of image replacement, etc.
Just do a simple test document and view source. I think you’ll be
pleasantly surprised.
Walter
On Jan 20, 2009, at 9:49 PM, JDW wrote:
I read Paul’s basic description, downloaded the Action, and applied
it to Freeway 5. After that, I opened a new document, sketched a
graphic box, imported a GIF, and applied Paul’s action. But in the
Actions palette, I am presented with exactly the same sort of thing
I get when I use Freeway’s built-in JS rollover action.
Yes, I did use it, which is why I wrote what I did above. (And yes, I have Applescript enabled in FW prefs.)
To ensure I was not doing something wrong, I just conducted another test after reading your post. I turned off CSS, sketched a graphic button, imported a graphic, copy/pasted to create another graphic box of the same size over the existing graphic box, then imported the rollover graphic, then applied Paul’s action and set a link on it. I then previewed and found the rollover works as expected, but upon examining the page source, I see that Paul’s CSS Rollover action is creating two separate GIFs based on the two GIFs I use in Freeway. It’s no different than the normal Rollover action! I thought it would create a single GIF (and apparently so do you, Walter), but that is not happening (not in Freeway 5, anyway).
Also, Paul’s CSS Rollover action does not allow me to use HTML pass-thru graphics, which would really be a “dream” feature for me. You get an “overflowed items” error dialog when you try to Preview.
The reason I created non-layered graphic boxes for my rollover is because if you use layered boxes, you will only see one in the CSS Rollover action’s interface. When you make both boxes non-layered items, then both will appear in the Actions palette, and you can see one for “Normal” and the other for “Mouseover.”
But the point is that you can use this action on only one image box referencing the 2nd image purely through the action interface so you do not need 2 graphics boxes on top of each other.
Use Mouseover: select and navigate to your second image in the finder which you will have prepared already.
Dave, there are actually “many points” in this discussion, but I appreciate your advice concerning one of the major points about getting HTML pass-thru graphics to roll-over. My eyes have been enlightened by yourself and Walter today.
For those following this thread, here are the precise steps to success with pass-thru rollovers:
New doc.
Sketch an HTML box.
CMD-E to import the graphic you want.
CMD-Shift-D to size the HTML box to fit.
Option-CMD-A to bring up the Actions palette.
Click the “+” button and add the Rollover (or CSS Rollover) action.
You will see the filename of your graphic at left in the Actions palette, and a checkmark just under “Normal.” You now need to click-and-hold on “Mouseover” until the popup menu appears. Choose “Select…” from that popup and then choose your rollover state graphic.
Hit CMD-K to apply a link to your button, and that’s it!
But getting back the other major point in this discussion…
Unfortunately, as I mentioned above, Paul’s CSS Rollover is not doing what is expected. No matter what I do, CSS Rollover, still insists upon using two separate graphics instead of a single graphic. And when using true CSS Rollovers (sprites) you should use a single graphic. The benefit of using a single graphic are (1) reduced load on your server, (2) faster web page loading, and (3) smaller sized rollovers in many cases. (The only drawback appears to be when you print the web page.)
Because of these benefits and in light of Paul’s action not working as expected, I can only hope SoftPress will include their own CSS Rollover action in a future version of Freeway – using a single graphic, not multiple!
(Did I mention about wanting the ability to EDIT posts! Ack!)
One caveat of using the 8-step approach I list above (credit: DeltaDave) for creating pass-thru rollovers is that the graphical nature of Freeway’s GUI breaks down. More specifically, if you have two separate graphic imported into regular graphic boxes and stacked atop each other, you can then go to the Actions palette and click on either the “Normal” or “Mouseover” buttons to view the change of rollover state. But when you use “Select…” to bring in an external file for Mouseover, Freeway won’t allow you to click the Mouseover tab to view that rollover state. In other words, when you make pass-thru rollovers in Freeway with the above 8-step method, you are forced to Preview in order to view the rollover.
Paul’s CSS Rollover is not doing what is expected.
If you were expecting Paul’s action to merge images for you then I think that you were mistaken. I don’t see anywhere Paul claiming this to be the case.
In fact Paul said:
This is something I tried to get the Action to do, but right at this moment, I can’t seem to be able to get hold of the final images from Freeway to stitch them together with iMagine (Kevin’s handy AppleScript based image app).
So if that is what you want then this is not the method for you!
I can only hope SoftPress will include their own CSS Rollover action in a future version of Freeway — using a single graphic, not multiple!
I assume you mean here: — using a single, merged, graphic
If you can make the time to read and digest ALL the information in my posts above, including the information in the “actionsworld” and “kirupa” links I mention, you will see that, yes, I have been talking about “a single, merged, graphic.” By definition, that is precisely what “CSS Rollovers” are.
And so, to name something “CSS Rollover” by definition would mean to use “a single, merged, graphic.” Hence my comments and emphasis above concerning Paul’s “CSS Rollover” action NOT doing this.
Is there an apparent contradiction in terms here? Yes. Am I upset with Paul about it? No. Am I harping on Paul about it? Of course not. Am I making it abundantly clear to others who read this thread what Paul’s action CANNOT do? Yes! Am I defining terms? Yes. Is that important? To me, yes.
You’re “this is not the method for you” argument essentially tells me, “So Paul’s action doesn’t do what YOU want. So don’t use it then and leave it at that.” But thinking such is bad for two reasons: (1) it assume that only I alone am interested in having a graphical GUI in Freeway to create true, single-graphic CSS Rollovers, and (2) you are ignoring my subtle prod to SoftPress Towers to get such a thing built into Freeway in the future.
But thank you again, David, for reminding me, as Walter did (in another thread) about the old school method of getting pass-thru graphics to roll in Freeway!
To be clear, CSS Sprite Rollovers do require that you use one image
– that’s how they work. For a very famous example, see this image:
But if you only call them CSS Rollovers, then no, they don’t need to
do this at all. The issue with non-sprite rollovers is that they
suffer from terrible latency, since the initially hidden state is not
downloaded with the page (as a JavaScript rollover would be) and so
has to be fetched entirely on the mouseover event. This works, after a
fashion, but with a noticeable delay.
Walter
On Jan 23, 2009, at 12:11 PM, DeltaDave wrote:
yes, I have been talking about “a single, merged, graphic.” By
definition, that is precisely what “CSS Rollovers” are.
I don’t wish to labour this point but whose definition states that
CSS Rollovers should only use 1 image?
Because of these benefits and in light of Paul’s action not working
as expected, I can only hope SoftPress will include their own CSS
Rollover action in a future version of Freeway – using a single
graphic, not multiple!
Forgive me if I’ve missed an important part of this discussion, but
given that a rollover needs at least two states, how can that be
acheived with a single graphic?
Forgive me if I’ve missed an important part of this discussion, but
given that a rollover needs at least two states, how can that be
acheived with a single graphic?
There is a technique using CSS that works that way. Basically, the rollover image is bigger than what is visible and when rolled over shifts to display another part of the larger image.
This can be done in Freeway, but custom styles have to be set up with the Styles Editor.
There is a technique using CSS that works that way. Basically, the
rollover image is bigger than what is visible and when rolled over
shifts to display another part of the larger image.
This can be done in Freeway, but custom styles have to be set up
with the Styles Editor.
I viewed Todd’s nice example and see that he is using two states: normal & roll. However, the Apple example Walter presents uses 4 states.
It would be a true blessing from Heaven to see a CSS “SPRITE” Rollover Action that could empower Visual Designers with a graphic UI to create CSS Sprite Rollovers easily and quickly. For the benefits to these kind of rollovers include:
Elimination of the latency problem Walter mentions
Reduction of the number of server requests
Reduction (in many cases) of the filesize of the images involved
I kept it 2 states since I didn’t have time to create the extra
graphics for active and visited but it’s dead simple to do. If you can
create one state then the rest is gravy, it’s just a matter of making
the graphics.
Todd
On Jan 27, 2009, at 7:48 PM, JDW wrote:
I viewed Todd’s nice example and see that he is using two states:
normal & roll. However, the Apple example Walter presents uses 4
states.
It would be a true blessing from Heaven to see a CSS “SPRITE”
Rollover Action that could empower Visual Designers with a graphic
UI to create CSS Sprite Rollovers easily and quickly. For the
benefits to these kind of rollovers include:
Elimination of the latency problem Walter mentions
Reduction of the number of server requests
Reduction (in many cases) of the filesize of the images involved
