[Pro] adding rollovers?

Justin_Easthall · January 11, 2011, 3:54pm

Hi,
I created a graphic for a Submit button - when I add the rollover action it doesn’t create the rollover effect?

Scriptyaccordion - I made a graphic that activates the accordion works fine until I add the rollover action to that graphic the accordion then does not work?

Is it just me or adding rollovers to these buttons cant be done?

Thanks

Jus

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

waltd · January 11, 2011, 4:44pm

A submit button cannot have the classic Freeway rollover applied to
it, although you could try the CSS Rollover Action from Paul Dunning,
or the CSS3 Rollover from Tim Plumb.

On the ScriptyAccordion, you might want to experiment with the order
of actions. Apply the Rollover first, then the Link To File to your
lightbox image, or vice-versa. Or use the Parameters section of the
Rollover Action to configure the rollover effect. Stacking up Actions
can lead to confusion.

Walter

On Jan 11, 2011, at 10:54 AM, Justin Easthall wrote:

Hi,
I created a graphic for a Submit button - when I add the rollover
action it doesn’t create the rollover effect?

Scriptyaccordion - I made a graphic that activates the accordion
works fine until I add the rollover action to that graphic the
accordion then does not work?

Is it just me or adding rollovers to these buttons cant be done?

Thanks

Jus

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

Justin_Easthall · January 11, 2011, 4:58pm

Thanks - slightly frustrating. I cant really have a site where theres some rollover effects on some buttons and not on others so guess Ill have to remove all -

see here the ESPANOL button has an effect but the MORE button does not, no way around this?

http://easthalldesign.com/eb5/Program.html

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

waltd · January 11, 2011, 7:44pm

If you make the rollover by another method, then you can have the
visual effect, but you just can’t apply the Freeway Rollover Action to
a form image button – you won’t get the code you need.

Walter

On Jan 11, 2011, at 11:58 AM, Justin Easthall wrote:

Thanks - slightly frustrating. I cant really have a site where
theres some rollover effects on some buttons and not on others so
guess Ill have to remove all -

see here the ESPANOL button has an effect but the MORE button does
not, no way around this?

http://easthalldesign.com/eb5/Program.html

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

Justin_Easthall · January 11, 2011, 7:47pm

Great thanks - so apart from the CSS3 rollover way (needs to work in IE 7-8) how could I do it? A GIF?

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

waltd · January 11, 2011, 9:17pm

The easiest way I can think of is to make an image that contains both
the normal and the hover versions of the button, stacked above one
another like this:

-------------
|  normal  |
-------------
|  over      |
-------------

This image should be saved as a GIF or a JPEG at 72 pixels per inch
and exactly the size you want to use it on screen.

Then draw a clear GIF box the same size as one of the halves of your
button image to use as your clickable button in Freeway. Set the
Submit checkbox in the Inspector so it becomes your button.

Then, while that image is still selected, choose Item / Extended from
the main menu, and use that dialog to add the ID attribute to the
image. Click New, then in the sub-dialog, enter the following:

Name: id
Value: myButton

(call it whatever legal name you like – it must be unique on the
page, it must begin with an alphabetical character, it must not
contain any spaces or punctuation)

Then make a style using the Styles palette and the Tag-only style
technique[1] called #myButton and set the Background Image property to
be your 2-in-1 button image.

Then make another style called #myButton:hover and use the Extended
sub-dialog in the Edit Style dialog to add the following pair:

Name: background-position
Value: 0 -30px

(that’s assuming that your button is 30px tall, and that the “over”
version is set butting right up below the bottom of the normal
version. Make this second dimension exactly the same as the vertical
offset between the top of your normal and over versions within the one
background image, in other words.

Now this will probably work in all browsers except IE, because IE will
balk at using the :hover pseudo-class on anything besides an A (link)
tag. So test it. If it doesn’t do the rollover, then you will need to
add a JavaScript “shim” for IE’s benefit. That’s a few extra lines of
code:

gist.github.com

https://gist.github.com/walterdavis/775151

gistfile1.txt

<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6/prototype.js"></script>
<script type="text/javascript" charset="utf-8">
// <![CDATA[
  $('myButton').observe('mouseover',function(evt){this.setStyle('background-position: 0 -30px');});
  $('myButton').observe('mouseout',function(evt){this.setStyle('background-position: 0 0');});
// ]]>
</script>
<![endif]-->

Leave off the first line (the link to Prototype) if you already have
Prototype in your page from Freeway’s FX Actions or any of my Scripty
Actions. Also watch that all of the dimensions (30px) and all of the
IDs (myButton) line up with your personal reality.

Walter

http://www.actionsforge.com/articles/view/9-tag-only-styles

On Jan 11, 2011, at 2:47 PM, Justin Easthall wrote:

Great thanks - so apart from the CSS3 rollover way (needs to work in
IE 7-8) how could I do it? A GIF?

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

Justin_Easthall · January 11, 2011, 9:25pm

Thanks for this - Ill give it a whirl - this will work for the Accordion too I presume?

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

waltd · January 11, 2011, 9:28pm

On Jan 11, 2011, at 4:17 PM, Walter Lee Davis wrote:

Leave off the first line (the link to Prototype) if you already have
Prototype in your page from Freeway’s FX Actions or any of my
Scripty Actions. Also watch that all of the dimensions (30px) and
all of the IDs (myButton) line up with your personal reality.

And I forgot to add that this blurb of code should go into the Page /
HTML Markup dialog, in the Before (end) Body section.

Before </body>

Walter

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

Justin_Easthall · January 11, 2011, 9:30pm

Ta

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

waltd · January 11, 2011, 9:31pm

This will work for any element you wish to have a rollover effect. It
leverages the CSS Sprite technique, and it’s almost the same thing
that Paul’s CSS Rollover Action creates, except that it puts both
images together in one to avoid any trace of lag on the first rollover.

Walter

On Jan 11, 2011, at 4:25 PM, Justin Easthall wrote:

Thanks for this - Ill give it a whirl - this will work for the
Accordion too I presume?

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

Tim3 · January 12, 2011, 11:34am

The standard Softpress rollover action has no effect on submit buttons (because of the way that they are constructed as part of the form) although personally I think it should.
That aside try the Submit Image Rollover Action instead;
http://www.freewayactions.com/product.php?id=023
Regards,
Tim.

On 11 Jan 2011, at 15:54, Justin Easthall wrote:

I created a graphic for a Submit button - when I add the rollover action it doesn’t create the rollover effect?

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

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