asked on

How do you customize a JQuery Button?

Take a look at this tutorial: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_trigger

I want to customize that <button> with an image that I've created. I've seen some tutorials, but none of them include the <button> syntax which makes me want to pause and ensure there isn't a more direct approach.

So...

How would you replace the standard graphic you get when you use "<button>," with a customized image?

Julian Hansen

Just put the image in the button like this

<button><img src="images/foreground1.png" /></button>

Open in new window

Sample code here

Julian Hansen

You would need some marginal styling as well

<style type="text/css">
button {
  background: none;
  border: 0;
}
</style>

Open in new window

Bruce Gust

ASKER

Perfect, Julian!

See? This is why you get paid the large, executive-level dollars?

How do you trigger the JQuery event though?

Here's what I've got, but they don't trigger the function:

<button onchange="showAll();"><img src="images/all_on.png"></button><button onchange="showNone();"><img src="images/all_off.png"></button>

Julian Hansen

Just add an event handler for the .click() event. You can bind to the element (button) or an id (if you give your button one) or a class (if you add one).

$('button').click(function(e) {
  // e.preventDefault() /* add this if you want to disable default behaviour */
  // code here for when the button is clicked.
});

Open in new window

Bruce Gust

ASKER

What happens when you have more than one <button>?

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Bruce Gust

ASKER

That'll do it!

Thanks!

Julian Hansen

You are welcome.