ive got a button that looks like a key off a keyboard. Rectangle with Inner beveled edges.

i'm trying to get the look as if the button has been pressed down for a button on my web page.

is there a tutorial out there that can help me? ive been looking all day for one. but i guess im typing the wrong stuff in for the search

Make two images, one of the button up and one down. Then swap them using DOM event handlers, like so:

<img src="button_up.gif" alt="appropriate alt text" onmousedown="this.src='button_down.gif'" onmouseup="this.src='button_up.gif'">

To a limited extent, this can be achieved using the :active pseudo-class in CSS, but it's unreliable. However, a CSS approach would be preferable if you wanted the effect to occur on hover (CSS is always preferable to JS when practical).

i'm trying to make the "down" look for the button

thats the problem i'm having

this is a fireworks question. i am having trouble making the graphic itself

Try selecting the button image itself, then go to the properties bar (usually centered at the bottom of your fireworks window) and depending on your version of fireworks, there should be a + sign that you can click to choose options for that object. Go to the options for beveling and play around there. Also, if you used a shadow on the upstate, try to make it "tighter" and "sharper" so it looks depressed. Hope that helps.

Here's a rough sample for you - it's not perfect, but it's a decent enough of a start. http://www.plhmedia.com/ex/key_set.png

Save it to your computer and open it in Fireworks - it's a layered PNG, so even though it will display in your browser, it is really a source file.

Everything is rendered using factory effects, so edit it at will until you ahieve the desired effect.

pm

you pretty much hit the nail on the head

i was trying to get close to a key as possible. on my keyboard.. the keys dont really have a top edge to them. but i cant really make a key with just 3 extra edges and then make the effect of it looking like it was pressed down

i originally done the bevel and was basically just making the picture a little smaller. and that was ok.. but didnt have a great look to it after it was pressed. but this was much better.

thx for the help

and thx to everyone that put in comments. i'm new to this stuff and i'm trying to figure out all of it

is there good tutorial sites out there that any of you go to? or maybe a link with a lot of sites? i did searches.. but i didnt come up with GOOD tutorial sites. just random little sites with maybe 4 or 5 tutorials on it.

Try also addding a drop shadow to the button in the top right on the picture you posted. For the up position. Then take the drop shadow off for the down position.

Hows this. I included 2 variations.



http://img47.exs.cx/img47/9161/keys.png