How to create 3 state buttons?

[webuser123]

Hello,

I would like to create a 3 state button where I have the following --

1. MouseUp State --> this is the default/ original state of the button

2. MouseOver State --> this is the state when the mouse goes over the button

3. MouseDown Button --> this is the state after the button is pressed

Also, after the button is pressed, I would like it to go back to state 1.. not stay depressed. I tried doing this in Fireworks via the Edit -> Insert New Button option... and got all three states in place but the problem is that it stays in the depressed state.. any thoughts? Can I achieve this using some other tool? Thank you!

[eCat]

Are you doing this in Flash? Or with javascript, css, or ....??

Or is that what you'd like to know?

eCat

[WebJoel]

I would like to create a 3 state button where I have the following --

1. MouseUp State --> this is the default/ original state of the button

2. MouseOver State --> this is the state when the mouse goes over the button

3. MouseDown Button --> this is the state after the button is pressed



<style>
a {....}
a:link {....}
a:visited {....}
a:hover, a:focus {....}
a:active {....}
</style> In this order (<-- important)

a {....} is any 'normal link' whose hover-states are handled default by the browser...

a:link {....} is the 'at rest' state of the pseudo classed link (link which will change with any 'pointer tool' action and by 'pointer tool' I mean mouse, and/or TAB key)

a:visted {....} self-explainatory

a:focus, a:hover {} These two are 'the same function'. "hover" means pointer-tool (mouse cursor) over any pseudo link. "focus" means TAB keys (non-mouse, for handicapped persons, or user-agents without a 'mouse' like blackberry, palm, handheld, etc.)

a:active {....} is the CSS equivalent of "OnMouseDown". In CSS, this is called "active".

Just populate the 'background-image' of each relevant "{....}" to each pseudo-state into each pseudo-class here, for a near-instantaneous (faster-than javascript) 'mover-over' suite.

Advantage CSS: these images would be cached and the browser will not have to do/do/re-do each javascript "OnMouseOver"/"OnMouseDown"/"OnMouseUp" etc action. Saves compute cycles, makes the page essentially a bit faster.