I've got this star rating script, showing 5 stars. How do I get hover text on the stars so if I have mouseover on the first star it says 'bad' and if I have mouseover on the last star it says 'very good' ?
<script type="text/javascript">
$(document).ready(function() {
var star_on = new Image();
star_on.src = "<{$baseurl}>/design/img/star_on.png";
var star_off = new Image();
star_off.src = "<{$baseurl}>/design/img/star_off.png";
$("img.star").hover(function() {
var star = $(this);
var value = star.attr('x:value');
for(var i=1; i<=5; i++) {
if (i <= value) {
$(".star" + i + ".area_" + star.attr('x:area_id')).attr("src", star_on.src);
}
else {
$(".star" + i + ".area_" + star.attr('x:area_id')).attr("src", star_off.src);
}
}
},
function() {
var star = $(this);
var value = $("#area_" + star.attr('x:area_id')).val();
var area_id = star.attr('x:area_id');
for(var i=1; i<=5; i++) {
if (i <= value) {
$(".star" + i + ".area_" + area_id).attr("src", star_on.src);
}
else {
$(".star" + i + ".area_" + area_id).attr("src", star_off.src);
}
}
});
$("img.star").click(function() {
var star = $(this);
$("#area_" + star.attr('x:area_id')).val(star.attr('x:value'));
});
$("#folder").click(function() {
$(".foldable").toggle();
}
);
});
</script>
Thanks in advange