The YUI code is complete overkill for what you need. You showed an example site of what you’re wanting to do in your first post. I took that code and wrote a little JS for it that will let you use their code, and still work with the Ratings module. You’ll need to have jQuery for this to work too.
First, you’ll need to have the following code in your HEAD tag:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
$('a').focus(function(event) {
$(this).blur();
});
$('ul.rating li a').click(function(event) {
event.preventDefault();
var par = $(this).parents('ul.rating');
var id = $(par).attr('id');
var num = $(this).text();
$(par).removeClass().addClass('rating star'+num);
$('#rating-'+id).val(num);
});
});
// ]]>
</script>
Then you’ll need to make a couple alterations to their HTML code:
<input name="rating" id="rating-{entry_id}" type="text" value="" /><br />
<ul id="{entry_id}" class="rating star{rating}">
<li class="one"><a href="#" title="1 Star">1</a></li>
<li class="two"><a href="#" title="2 Stars">2</a></li>
<li class="three"><a href="#" title="3 Stars">3</a></li>
<li class="four"><a href="#" title="4 Stars">4</a></li>
<li class="five"><a href="#" title="5 Stars">5</a></li>
</ul>
And you’ll also need to change some of their CSS code:
.star0 {background-position:0 0}
.star1 {background-position:0 -16px}
.star2 {background-position:0 -32px}
.star3 {background-position:0 -48px}
.star4 {background-position:0 -64px}
.star5 {background-position:0 -80px}
Once you’ve got it working, then just change:
<input name="rating" id="rating-{entry_id}" type="text" value="" />
to
<input name="rating" id="rating-{entry_id}" type="hidden" value="" />
I hope this makes sense. Reading over it, I’m not sure if it does. Let me know if you have questions.
(j/k)
