Ok, I’m sure lots of people will find this useful so here are my black and white instructions on how to get nice looking stars with click-to-submit AJAX submission.
Things you’ll need:
1. A copy of prototype.js, probably best to get the latest build, though I am using 1.5.1.1
2. This zip file of assets. This will give you the 3 star images you need to test with, plus the .psd (CS3) should you want to make changes. There’s also the loading animation in there, though you can go make your own easily enough.
3. ExpressionEngine and an installed copy of the Ratings module!
Ok, first things first: upload the assets to your /images/ folder.
For this example, I’m going to upload them to /images/assets/
Next, install prototype.js
This is merely a case of copying in the javascript to a blank template of the type ’static‘.
For this example I’m going to create it in /_incs/prototype.js
Now it’s time to create the template to return the messages that are fed back when a user submits their rating. [/size]
For this example I’m going to call it /_incs/ajax_rating_message
This is another easy step, simply put this in to the template:
{message}
OK, now we need to create our main page, the weblog entry page.
You probably already have this setup, add just need to add in the new code, so I’m going to keep the template as clean as possible.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My rated entry</title>
<!-- This is the link to your prototype.js file -->
<script type="text/javascript" src="/_incs/prototype.js" ></script>
</head>
<body>
{exp:weblog:entries weblog="my_weblog" disable="trackbacks" limit="1"}
{title}
{summary}
{body}
<!-- NOTE: The template parameter pointing to our message template doesnt seem to like having a leading / in its path -->
{exp:rating:form entry_id="{entry_id}" form_name="rating" form_id="ratingform{entry_id}" template="_incs/ajax_rating_message"}
<script type="text/javascript">
<!--
function starsOver(target) {
for (i=1; i<=5; i++) {
if (i <= $(target).alt) {
$('star'+i).src = "/images/assets/star-over.png";
} else {
if (i <= $('rating').value) {
$('star'+i).src = "/images/assets/star-on.png";
} else {
$('star'+i).src = "/images/assets/star-off.png";
}
}
}
}
function starsOut(target) {
for (i=1; i<=5; i++) {
if (i <= $('rating').value) {
$('star'+i).src = "/images/assets/star-on.png";
} else {
$('star'+i).src = "/images/assets/star-off.png";
}
}
}
function setStar(target) {
for (i=1; i<=5; i++) {
if (i <= $(target).alt) {
$('star'+i).src = "/images/assets/star-on.png";
} else {
$('star'+i).src = "/images/assets/star-off.png";
}
}
$('rating').value = $(target).alt;
new Ajax.Updater('ratingresult', '/', {
onComplete:function(request, json){
Element.hide('ratingloading')
},
onLoading:function(request, json){
Element.show('ratingloading')
},
parameters:Form.serialize('rating{entry_id}'),method:'post',asynchronous:true
}); return false;
}
-->
</script>
<img src="/images/assets/spacer.gif" width="21" height="21" id="star0" alt="0" onMouseOver="starsOver(this.id)" onMouseOut="starsOut(this.id)"/>
<img src="/images/assets/star-off.png" width="21" height="21" id="star1" alt="1" onMouseOver="starsOver(this.id)" onMouseOut="starsOut(this.id)" onClick="setStar(this.id)"/>
<img src="/images/assets/star-off.png" width="21" height="21" id="star2" alt="2" onMouseOver="starsOver(this.id)" onMouseOut="starsOut(this.id)" onClick="setStar(this.id)"/>
<img src="/images/assets/star-off.png" width="21" height="21" id="star3" alt="3" onMouseOver="starsOver(this.id)" onMouseOut="starsOut(this.id)" onClick="setStar(this.id)"/>
<img src="/images/assets/star-off.png" width="21" height="21" id="star4" alt="4" onMouseOver="starsOver(this.id)" onMouseOut="starsOut(this.id)" onClick="setStar(this.id)"/>
<img src="/images/assets/star-off.png" width="21" height="21" id="star5" alt="5" onMouseOver="starsOver(this.id)" onMouseOut="starsOut(this.id)" onClick="setStar(this.id)"/>
<input type="hidden" name="rating" id="rating" value="0"/>
<!-- This is our loading image -->
<div id="ratingloading" style="display: none">
<img src="/images/assets/loading.gif" width="16" height="16" alt="Loading"/>
</div>
<!-- This is the div which will contain the text fed back from our message template -->
<div id="ratingresult">
</div>
{/exp:rating:form}
<p>{exp:rating:count entry_id="{entry_id}"}Number of ratings: {rating_count}{/exp:rating:count}</p>
{/exp:weblog:entries }
</body>
</html>
And finally - try it out!
I am hoping this will help a few people out.
For those of you with less experience - If you can’t get it to work, try figuring it out. Try Google, hunt for an answer and if there’s still no luck, then return here 
