Rating example

by napascual

HTML

<div class="val">
    <div class="icon">
        <div class="star-icon start-1"></div>
        <div class="star-icon start-2"></div> 
        <div class="star-icon start-3"></div> 
        <div class="star-icon start-4"></div> 
        <div class="star-icon start-5"></div>
    </div>
    <p class="rating-text"></p>
</div>

 <div class="val">
    <div class="icon">
        <div class="off-icon star-icon start-1"></div>
        <div class="off-icon star-icon start-2"></div> 
        <div class="off-icon star-icon start-3"></div> 
        <div class="off-icon star-icon start-4"></div> 
        <div class="off-icon star-icon start-5"></div>
    </div>
    <p class="rating-text"></p>
</div>

CSS

.val{
    overflow:hidden;
    clear:both;
}
.star-icon{
    position:relative;
    float:left;
    display:inline;
    overflow:hidden;
    width:25px;
    height:24px; 
    background:url(http://img405.imageshack.us/img405/251/ratinstartoff.png); 
}
.star-icon:hover{
    cursor:pointer
}
.star-icon:hover,.on-icon,.on-temp-icon{
    background-image:url(http://img196.imageshack.us/img196/6681/ratinstarton.png);
}
.off-temp-icon{ 
    background-image:url(http://img405.imageshack.us/img405/251/ratinstartoff.png); 
}
.rating-text{
    font-weight:bold;
    float:left;
    display:inline;
    margin-left:7px;
}

JavaScript

var text = ["", "PĂ©simo", "Muchos problemas", "Mal", "Todo bien, pero...", "Todo correcto"];
$(function() {
    $(".star-icon").click(function() {
        _this = $(this);
        _this.siblings(".set-icon").removeClass("set-icon");
        _this.addClass("on-icon").addClass("set-icon");
        _this.prevAll().addClass("on-icon");
        _this.nextAll().removeClass("on-icon");
    });
    $(".star-icon").bind("mouseout", function() {
        var _this = $(this).removeClass("on-temp-icon");
        _this.prevAll().removeClass("on-temp-icon");
        _this.nextAll().removeClass("off-temp-icon");
        $(".icon").css("opacity", "1");
        updateText(_this,_this.parent().find(".set-icon"));
    });
    $(".star-icon").bind("mouseover", function() {
        var _this = $(this).addClass("on-temp-icon");
        var _prevAll = _this.prevAll();
        var _length = _prevAll.length;
        var op = (_length + 1) / 10;
        _prevAll.addClass("on-temp-icon");
        _this.nextAll().addClass("off-temp-icon");
        _this.parent(".icon").css("opacity", "" + (op + .3));
        updateText(_this, _this);
    });

    function updateText(obj, active) {
        var len = active.prevAll().length;
        if (active.length > 0) len += 1;
        else len = 0;
        obj.parent().next(".rating-text").text(text[len]);
    }
});