Alternative Buttons

[shavenlunatic]

Hi,

This is probably a simple enough thing to do, but searching for it returns everything but what I need so I turn to you for some advice (or at least a prod in the right direction of which keywords to be searching on )

Build a site and view it on OSX or Linux and the form buttons on the site integrate well and look generally nice. We then saw the site on an windowsXP machine running IE & Firefox and.. uhg.. grey 3d square boxes.

I decided that maybe (although surely a better way exists) the solution would be to create 2 images, each showing a button in a different state of pressfullness(??).

Which is fine and dandy, but this button is on a php page and needs to call a javascript function.

How to I get a different image to show on MOUSEDOWN, then alternate to the original image and call a javascript function on MOUSEUP.

Sorry if it's a stupidly stupid question, never needed to do this before and fairly new to js

________
clueless

 

[kaht]

<input type="button" value="click me" onclick="someFunction()" [!]onmousedown="this.style.background='url(clickImg.jpg) top left no-repeat'" onmouseup="this.style.background='url(unclickImg.jpg) top left no-repeat'"[/!] />

Honestly, it's probably better to use CSS for this and use the :active pseudoclass to achieve the same thing. But, since you asked in the javascript forum, I posted a javascript solution. Try asking here if you're interested in the CSS solution:
forum215


-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]