I have written Javascript to display the stars.

Here is the code:

<apex:page standardController="Live_Agent_Article__kav"  extensions="articletemplatectrl"  showChat="false" showHeader="false" sidebar="false" setup="false" id="pgId">
<style>
.subheader { font-family: Times New Roman; font-size:24px; color:#002776; }
.ms-body {
    font-family:Arial; font-size:10pt; color:#333333;
}
.ms-Wptitle{
    font-family:Arial; font-size:10pt; color:#666666; font-weight:bold;
}

</style>
<style type="text/css">
    #rateStatus{float:left; clear:both; width:100%; height:20px;}
    #rateMe{float:left; clear:both; width:100%; height:auto; padding:0px; margin:0px;}
    #rateMe li{float:left;list-style:none;}
    #rateMe li a:hover,
    #rateMe .on{background:url('{!$Resource.Staron}') no-repeat; position:static; overflow:hidden;}
    #rateMe a{float:left;background:url('{!$Resource.Staroff}') no-repeat;width:12px; height:12px;}
    #ratingSaved{display:none;}
    .saved{color:red; }
</style>
<script type="text/javascript">
/*
Author: Addam M. Driver
Date: 10/31/2006
*/

var sMax;   // Isthe maximum number of stars
var holder; // Is the holding pattern for clicked state
var preSet; // Is the PreSet value onces a selection has been made
var rated;

// Rollover for image Stars //
function rating(num){
    sMax = 0;   // Isthe maximum number of stars
    for(n=0; n<num.parentNode.childNodes.length; n++){
        if(num.parentNode.childNodes[n].nodeName == "A"){
            sMax++;
        }
    }
   
    if(!rated){
        s = num.id.replace("_", ''); // Get the selected star
        a = 0;
        for(i=1; i<=sMax; i++){    
            if(i<=s){
                document.getElementById("_"+i).className = "on";
                document.getElementById("rateStatus").innerHTML = num.title;   
                holder = a+1;
                a++;
            }else{
                document.getElementById("_"+i).className = "";
            }
        }
    }
}

// For when you roll out of the the whole thing //
function off(me){
    if(!rated){
        if(!preSet){   
            for(i=1; i<=sMax; i++){    
                document.getElementById("_"+i).className = "";
                document.getElementById("rateStatus").innerHTML = me.parentNode.title;
            }
        }else{
            rating(preSet);
            document.getElementById("rateStatus").innerHTML = document.getElementById("ratingSaved").innerHTML;
        }
    }
}

// When you actually rate something //
function rateIt(me){
    if(!rated){
       //document.getElementById("rateStatus").innerHTML = document.getElementById("ratingSaved").innerHTML + " :: "+me.title;
        preSet = me;
        rated=1;
        sendRate(me);
        rating(me);
      
    }
}

// Send the rating information somewhere using Ajax or something like that.
function sendRate(sel){
var v = sel.name;
document.getElementById("theField").value=v;
}



</script>
<script>
    function setHidden()
    {
        var hiddenRep = document.getElementById('pgId:frmId:theField1');
        hiddenRep.value = document.getElementById('theField').value;
    }
</script>
<Apex:form id="frmId">


      <p class="subheader">Welcome to the Deloitte Learning Support Knowledgebase </p>
<strong><p class="ms-body"><!--<apex:commandLink action="{!back}">Go back to homepage</apex:commandlink>--></p></strong>
<table width="550" border="0" cellspacing="0" cellpadding="6" style="border:#cccccc 1px solid">
  <tr>
    <td class="ms-Wptitle" style="border-bottom:#cccccc 1px dashed">{!Live_Agent_Article__kav.title}</td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="3">
      <tr><!--<apex:outputPanel rendered="{!Live_Agent_Article__kav.Attach__Name__s!=null}">
        <td class="ms-body"><strong>Attachment</strong></td>
        <td class="ms-body"><p><apex:outputLink value="{!URLFOR($Action.Live_Agent_Article__kav.FileFieldDownload,  Live_Agent_Article__kav.id, ['field'=$ObjectType.Live_Agent_Article__kav.fields.Attach__Body__s.name])}" >{!Live_Agent_Article__kav.Attach__Name__s}</apex:outputLink></p></td>
        </apex:outputPanel>-->
      </tr>
      <tr>
        <td valign="top" class="ms-body"><p><strong>Description</strong></p></td>
        <td valign="top"><p class="ms-body">{!Live_Agent_Article__kav.Summary}</p></td>
      </tr>
    </table></td>
  </tr>

  <tr>
    <td class="ms-Wptitle" style="border-bottom:#cccccc 1px dashed">
<!--<apex:commandButton value="Give Feedback" action="{!feedback}" />-->
<apex:outputText >Give Feedback</apex:outputText>
</td>
  </tr>
  <tr><!--<Apex:outputPanel rendered="{!displayfeedback}">-->
  <Apex:outputPanel >
    <td><p class="ms-body"><strong>Was  this information helpful?</strong>
            
             <input type="hidden" id="theField"/>
<apex:inputhidden id="theField1" value="{!val}"/>
<span id="rateStatus"></span>
<span id="ratingSaved">Rating Saved!</span>
<div id="rateMe" title="Rate Me...">
   <li> <a onclick="rateIt(this)" id="_1" name="1"  onmouseover="rating(this)" onmouseout="off(this)"></a>
  <a onclick="rateIt(this)" id="_2" name="2" onmouseover="rating(this)" onmouseout="off(this)"></a>
   <a onclick="rateIt(this)" id="_3" name="3" onmouseover="rating(this)" onmouseout="off(this)"></a>
     <a onclick="rateIt(this)" id="_4" name="4" onmouseover="rating(this)" onmouseout="off(this)"></a>
       <a onclick="rateIt(this)" id="_5" name="5" onmouseover="rating(this)" onmouseout="off(this)"></a></li>
</div>
       <!-- <apex:selectRadio value="{!ele}" layout="pageDirection">
<apex:selectOptions value="{!items}"/>
</apex:selectRadio>-->

</p><br/><br/>
        <p class="ms-body">Tell  us how we can improve the information<br />
          .
<label for="textarea"></label>
        <Apex:inputtextarea cols="80" rows="10" value="{!descp}"  /><br/><br/>
         
          <apex:commandlink action="{!submit}" onclick="setHidden();"><apex:image value="{!$Resource.submit_but}"  /></apex:commandlink>
        </p>
</td></Apex:outputPanel>
  </tr>
</table>
<apex:outputPanel id="tstpopup2">
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayclose}"/>
            <apex:outputPanel styleClass="custPopup2" layout="block" rendered="{!displayclose}">
           <table width="350" border="0" cellspacing="0" cellpadding="3" >
  <tr>
    <td height="200" valign="top" bgcolor="#ffffff" style="border:#cccccc 1px solid"><p class="ms-body">Thank you for your feedback.</p><p align="center"><br />
      <br />
    <apex:commandlink rerender="tstpopup2"  status="contactUsStatus3"  onclick="window.close();"><apex:image value="{!$Resource.close}" /></apex:commandlink></p></td>
  </tr>
</table>
</apex:outputPanel>
</apex:outputPanel>
</apex:form>
</apex:page>