CODEWITHSUNDEEP
javascriptjquerycsshtml
Tom Panek
Tom Panek

Reputation: 105

How to have all other image buttons in group "reset" to previous image when a new button is clicked

a key http://www.bestmarketingnames.com/elementsDLS/art.jpga key http://www.bestmarketingnames.com/elementsDLS/beauty.jpga key http://www.bestmarketingnames.com/elementsDLS/business2.jpg

I have a web page with several "keys" like the above. When the user clicks on one, I would like it to switch to a blue button image. When the user clicks on a different key, I would like it to switch to blue and the others go back to grey.

There will be a total of about 30 keys. They will also be hyperlinked.

I have found a semi-solution using css to create "buttons," but it works with IE and not chrome:
http://archive.simurai.com/lab/buttons/#

I would prefer to do it with image switching anyway, but css would be my second choice.

Can this be done without a giant mess?

Thanks.

Upvotes: 0

Views: 84

Answers (1)

Martin Turjak
Martin Turjak

Reputation: 21224

You can use jQuery with .addClass() and .removeClass() functions ... maybe something like this:

$("button").click(function(){
    $("button").removeClass("blue");
    $(this).addClass("blue");
});

jsfiddle

and in the CSS you just need to make your .blue class style the blue image button.

EDIT: I added an example with image buttons, so you can get an idea: jsfiddle

Upvotes: 2

Related Questions