Reputation: 1027
Here i am trying to make a facebook like button . Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>like button</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
#like {
height: 215px;
background: url(images/sprite.png) no-repeat;
background-position: 0px 0px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#like").click(function(){
$("#like").css("background-position","0px -225px");
});
});
</script>
</head>
<body>
<div id="like">
</div>
</body>
</html>
Now the picture will change when a user click on that. i want to change that picture vice versa . How can i? is there any other perfect way to implement this?
Upvotes: 0
Views: 375
Reputation: 218922
Define 2 CSS classes (one for Active state and 2nd for Other state) and have relevant CSS ( load image from the sprite image) . Use those on the button/like image click event. Something like this
CSS
.stateA,.stateB
{
background-image:url('http://www.wing-co.jp/img/ui/site_skin/default/sprite_facebook.png');
width:20px; height:20px;
}
.stateA
{
background-position:-511px -212px;
}
.stateB
{
background-position:-498px -212px;
}
HTML
<input type="button" id="btnLike" class="stateA" value="" />
Javascript
$(function(){
$("#btnLike").click(function(e){
e.preventDefault();
var item=$(this);
if(item.attr("class")=="stateA")
{
item.removeClass("stateA").addClass("stateB");
//If you want to update database,you can make an ajax call here
}
else
{
item.removeClass("stateB").addClass("stateA");
//If you want to update database,you can make an ajax call here
}
});
});
Working Sample : http://jsfiddle.net/cGWTM/32/
Upvotes: 1