I think this is simple enough based on your question.
Create an HTML Web Resource.
Inside the web resource JavaScript section read the value of the rating field:
var rating = parent.Xrm.Page.getAttribute("ratingcode").getValue();
You can set the different styles in the style section of the page, or apply them directly:
.rating { background-color: #ffffff }
.rating .cold { background-color: #0000ff }
.rating .normal { background-color: #00ff00 }
.rating .hot { background-color: #ff0000 }
whether you use jquery or the document object model it is up to you.
Your html code would look like this:
<div id="ratingControl" class="rating normal" style="width: 10%;">
<span>Control Text</span>
</div>
After you get the rating, you check the rating and set the rating to the control
// You can also use the addClass, removeClass and toggleClass methods
switch (rating)
{
case 1:
$("#ratingControl").attr('class', 'rating cold');
break;
case 2:
$("#ratingControl").attr('class', 'rating normal');
break;
case 3:
$("#ratingControl").attr('class', 'rating hot');
break;
default:
$("#ratingControl").attr('class', 'rating');
break;
}
If you want to use dom use document.getElementById("ratingControl").className = "rating normal";
Hope this helps.