Actions World Background
Actions World Background Actions World Background Actions World Background
Actions World Background

CSS Rollovers

This Action uses CSS to achieve the same effects as the regular Rollover Action. However, it employs CSS to achieve the rollover effect instead of JavaScript. This new version of the Action uses YVS’s iMagine Photo to build sprites - the Action no longer uses separate images to perform the rollover swap.

iMagine Photo is a handy app which controls a lot of QuickTime drawing functions via AppleScript. Because of this, the Action will only output 24-bit PNGs files. GIFs are not supported by QuickTime, so can not be output bu the Action.

You will need Freeway 5 Pro to use this Action.

To use

The Action works very similarly to the regular Rollover Action as supplied by Softpress. In fact, the UI should be very familiar to you. If you don’t know how to use Rollovers, please watch this video on the Softpress Site, presented by myself.

1 - Download iMagine Photo from Yarra Valley Software - it’s Free, and will be the engine behind creating the sprites. Note than you need to run this Application by double clicking on it after you have downloaded it. This is to tell Mac OS X that you have downloaded it and that it’s OK to use. The app does not have any windows (so you won’t see it immediately), and can be safely quitted after this.

2 - Activate AppleScript in Freeway’s preferences:

3 - Construct your Rollover as normal, taking into account the notes below. The Action may not necessarily work in some situations – these have not been documented as I am still trying it out.

4 - Ensure that your rollover graphics are all output as PNG(24-bit). The Action will not output GIFs due to QuickTime limitations.

5 - Publish and preview the page. You should have CSS swappable rollovers.

Be aware that this Action is experimental. There are is an ugly mix of JavaScript and AppleScript used to determine where the file Freeway publishes reside, which the Action needs to create the sprite (and determine if a new one is needed). Because of this, I recommend using the Common Resource Folder setting in File>Document Set Up, as the location of some files may fail in other settings.


If you have read these instructions, and have understood that the Action may be a bit twitchy in places, you may download it.

Other Notes - read, they are important too.

There are slight differences with the way the Action works in Freeway. The Action will not work with Image Maps - either ones you have deliberately set up or ones that Freeway may auto-generate. It is normal (and bizarre) that a simple rollover construction (2 images overlaid, with the Action applied) will force an image map when encasing the image with a single <a> tag would be enough. As CSS is being used, this kind of behaviour is not helpful, so the Action suppresses the image maps and attempts to build a normal, regular link around the image. As a result, in some situations, the Action may not work properly or produce unexpected results. I would think that you would have to try pretty hard to experience this, but the warning is here. Of course, if you do come across a situation where you get odd behaviour, let me know and I’ll see if it’s within the remit of CSS to oblige. Please be prepared to provide descriptive steps to reproduce the problem you are experiencing.

This version (1.3b2) uses trickery and cunning to determine if it needs to build a new image and should prevent the Action from publishing at every publish. The downside of this is that it can create more temporary images than necessary, and even though Freeway seems to do a pretty good job of taking all these temporary images and publishing the bare minimum, it seems that there will be times when you get more identical published images than you would normally expect. I think this is about as good as it’s going to get without any further intervention from Freeway itself.

If the item you have applied the Action to is contained within a table that is being used as the Menu in the Menu Bar Action, it will not work. The Menu Bar Action re-writes the HTML to produce the drop-down menus, and this Action suffers badly as a result. You can use it in the Menu Bar table, though.

The Action has not been tested with the CSS Menu Action from Softpress.



Try the Action’s output above. This is a CSS Rollover using a sprite.