[Pro] Sprites as a submit button

Freeway
1

Is it possible to use a sprite as a submit button. I already have a button with all the css in place that I use on my site and thought it would be neat if I can use the same for my submit button.

Cheers
Marcel

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

2

You can style a normal form submit button to use a sprite image, but I
have had mixed results in IE when you do that. The basic style is
something like border:none; text-indent:-1000px; background- image:url(yourSprite.png);.

If you were to use a clear GIF as your submit button, and then style
it with a background image using the sprite technique, you might get
better cross-browser results.

  1. Draw an image box on the page, but don’t import any image into it.
    Give it a meaningful name, and use the Item / Extended dialog to give
    it a classname like ‘mySubmitButton’. Use the Inspector to make it a
    form submit button.

  2. Create a new Tag-only style called .mySubmitButton with the
    background-image set to your sprite image.

  3. Create another Tag-only style called .mySubmitButton:hover with the
    background-position set to the correct offset for your “over” state.

Preview in a browser. It should work just fine.

Walter

On Jul 26, 2011, at 10:48 AM, Helveticus wrote:

Is it possible to use a sprite as a submit button. I already have a
button with all the css in place that I use on my site and thought
it would be neat if I can use the same for my submit button.

Cheers
Marcel

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

3

Walter thanks, I’m trying the clear GIF route. The button is not visible when I make it a form submit button in the Inspector. When I uncheck the form submit I can see the button and rollover effect though.

Marcel

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

4

Wow, you seem to have found a bug. If you create a blank image, and
then apply the Submit behavior to it in the Inspector, the image
disappears, rather than being turned into input type=“image” as it
should. Any other color than None and you get the expected behavior.
Remove the Submit behavior, and the image also publishes as expected.
The only way around this that I can think of is to create a clear GIF
image of the desired button size outside of Freeway, and import it as
a pass-through.

Walter

On Jul 26, 2011, at 2:05 PM, Helveticus wrote:

Walter thanks, I’m trying the clear GIF route. The button is not
visible when I make it a form submit button in the Inspector. When I
uncheck the form submit I can see the button and rollover effect
though.

Marcel

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

5

Ah, the clear GIF did the trick, working as expected

Thanks, Marcel

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