You’re going to need to step well out of the WYSIWYG view in Freeway,
and do this with some long-hand CSS. It’s completely possible with
Carousel.
Build your carousel in the usual way, but use empty graphic boxes for
your tabs. Draw a graphic box large enough to hold your larger image
(the one with the arrow tip on it) and apply the Carousel Tab Action
to it.
Now on a separate page, draw out all of your button states – the
normal and selected versions – and name them carefully. For example,
set them to be consultation.png and consultationOn.png – something
you can remember and follow as a set of rules. Also be sure to set
them to export as 24-bit PNG images, so the transparency will work
correctly. You do this last step in the Output tab of the Inspector
while the image is selected.
Back on your carousel page, name the clear gif buttons carefully,
following the same recipe as before, except add Tab to the end of the
name.
Now the next step is some CSS. There are ways to do this directly in
Freeway, but it’s probably simpler to add an external stylesheet at
this point, because you can create the CSS in a dedicated tool like
CSSEdit, or you can simply code it in a text editor. Because it’s so
repetitive, copy and paste will be your friends here.
#consultationTab a img {
background: url(consultation.png) no-repeat top left;
}
#consultationTab a img.active {
background-image: url(consultationOn.png);
}
Make a pair of rules like this for each of your tabs, updating all the
names so that everything stays in line.
To add the resulting stylesheet to your page, apply the ESS Use
External Stylesheet Action to the page, make sure that you disable the
settings to Delete Embedded Styles and Use Pages as Stylesheets, and
then select your finished stylesheet (name it carousel.css or
something like that so you can find it) using the CSS picker in the
first row of style sheet controls.
Because you created those images on a separate page, they are going to
be in your Resources folder where the stylesheet is looking for them.
When the page loads, each clear image will have a background image to
go with it, and that image will be substituted when the Carousel
script applies the ‘active’ className property to the currently-active
tab. This last part happens automagically, there’s nothing you have to
do to get it to happen.
Walter
On Aug 12, 2011, at 3:15 AM, Sly wrote:
Here is a page that shows the graphics I’d like to use http://www.sly-design.co.uk/tabs
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options