PHP/Javascript - Changing button image and making database calls onClick()?

I have a button on a page. The button is an image sprite, and it choose ADD in green. I want the user to be able to click this button, and then do a few things:

1) That button makes a call to add an item to my MySQL database, without rel开发者_运维技巧oading the page. (I think this needs AJAX.)

2) The button background image sprite changes such that it now says REMOVE in red.

I don't understand how to do this. I'd greatly appreciate a basic walk through on how to do it.

Have a look at this page that i created to demonstrate css sprites.

I call a function on click of the button that changes the image of the button. You can call a function that does an ajax call inside this function.(Try looking at the source)

Take a look here to learn about ajax and database related stuff.

It will be easier to make the "AJAX" call if you use a JavaScript framework, such as jQuery.

You'll tell jQuery to issue a POST request (with data attached) to a PHP script on the server. The PHP script you write will add the item to the database. When the request is complete, jQuery will run a "callback" for you. In your callback, you can change the styling of the button.

Please see jQuery.post

That's the general overview and should get you started. Please comment on this answer if you'd like more details or examples on a particular part of the process.