<head>
<title>
just a test!
</title>
<script type="text/javascript">
/**
* function:when you open the page,get user's data from database
*/
function set_follow(){
var count=0;// you should read it from database
document.getElementById("follow_count").innerHTML=count;
}
/**
* function:change the state of follow
* @return {[type]} [description]
*/
function change_follow(){
var follow=document.getElementById("follow");
var follow_count=document.getElementById("follow_count")
var follow_src_path=follow.src;
follow_src_name=follow_src_path.split("/");
if(follow_src_name[follow_src_name.length-1]=="icon_like.png"){//if you dislike it,set "unlike" and follow_count--
follow.src="icon_unlike.png";
follow_count.innerHTML--;
}
else{//if you like it,set "like" and follow_count++
follow.src="icon_like.png";
follow_count.innerHTML++;
}
}
</script>
</head>
<body>
<div onload="set_follow()">
<ul>
<li><img src="icon_unlike.png" id="follow" onclick="change_follow()">
</img></li>
<li id="follow_count">0</li>
</ul>
</div>
</body>