56 Part I: Core Ideas
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Chapter 2 : Fancy Rating</title>
<script type="text/javascript">var ratingWidget = {
config : {
choices: 5,
choiceOff: "star_off.gif",
choiceOn: "star_hover.gif",
choiceSelected: "star_reg.gif"
},
init : function () {
var ratingList = document.getElementById("ratingList");
var stars = ratingList.getElementsByTagName("img");
for (var i=0; i<stars.length; i++)
{
stars[i].onclick = function (){ratingWidget._rateClick(this);};
stars[i].onmouseover = function (){ratingWidget._rateOver(this);};
}
ratingList.onmouseout = function (){ratingWidget._rateOut();};
},_sendRating : function(rating) {
var url = "http://ajaxref.com/ch2/setrating.php";
var payload = "rating=" + rating;
payload += "&callback=handleResponse";
payload += "&transport=script&response=script";var newScript = document.createElement("script");
newScript.src = url+"?"+payload;
newScript.type = "text/javascript";
document.body.appendChild(newScript);
},_rateOver : function (choice) {
var current = parseInt(choice.id.slice(-1));
for (var j=1;j<=current;j++)
document.getElementById("ratingChoice" + j).src =
ratingWidget.config.choiceOn; },_rateOut : function () {
for (var j=1;j<=ratingWidget.config.choices;j++)
document.getElementById("ratingChoice" + j).src =
ratingWidget.config.choiceOff; },_rateClick : function (choice) {
var current = parseInt(choice.id.slice(-1));
for (var j=1;j<=ratingWidget.config.choices;j++)
{
var selection = document.getElementById("ratingChoice" + j);
if (j <= current)
selection.src = ratingWidget.config.choiceSelected;