Başladığım ama şimdilik yarım bırakacağım yıldızlı puanlama

Aslında devam edeceğimden aşırı şüpheliyim çünkü bu işi zaten plugin olarak yapmış olduklarını duyunca uzatmadım ama diğerlerinden mantık birazcık fazla. Ondan bahsedip kodu yapıştırıp çekileyim.


Alt alta 3 div ve bu alttaki iki divinde içlerinde div'lere sarılmış a lar var.
En üstteki divde sağa sola geldikçe yeni puan verildiği için 3. kattaki divin width değeri değişecek böylece mesela 10 üzerinden 7.78 gibi puanlarda verilebilecek. (İDİ)



Konuyla ilgili en saf haliyle eklenti ise :

1. http://plugins.learningjquery.com/half-star-rating/
2. http://orkans-tmp.22web.net/star_rating/index.html#main-menu=5
3. http://www.fyneworks.com/jquery/star-rating/

<style type="text/css">
    .divPuanAtutucuGri, .divPuanAtutucuSari, .divPuanAtutucuMavi
    {
        position: absolute;
    }
    .divPuanAtutucuSari
    {
        z-index: 3;
        width: 130px;
        overflow: hidden;
    }
    .divPuanAtutucuSari div,.divPuanAtutucuMavi div
    {
        width: 220px;
    }
    .divPuanAtutucuMavi
    {
        z-index: 2;
    }
    .divPuanAtutucuGri
    {
        z-index: 1;
    }
    .divPuanAtutucuGri a, .divPuanAtutucuSari a, .divPuanAtutucuMavi a
    {
        background: url('images/sprites/yildizlar.png') repeat-x scroll 0 0 #FFFFFF;
        height: 20px;
        width: 20px;
        display: block;
        text-indent: -9997px;
        float: left;
    }
    .divPuanAtutucuGri a, .divPuanAtutucuSari a, .divPuanAtutucuMavi a
    {
        background-position: 0 -40px;
    }
    .divPuanAtutucuSari a
    {
        background-position: 0 -60px;
    }
    .divPuanAtutucuMavi a
    {
        background-position: 0 -80px;
    }
</style>
<script type="text/javascript">
    $(function () {
        $(".divPuanlama").hover(
            function () {
                $(".divPuanAtutucuSari").hide();

            }, function () {
                $(".divPuanAtutucuSari").show();
            });

        $(".divPuanlama").mousemove(
            function (event) {
                $("#clientX").html("Left:" + $(this).offset().left + " -- clientX:" + event.clientX);
                $("#clientY").html("Top:" + $(this).offset().top + " -- clientY:" + event.clientY);
                var x = event.clientX - $(this).offset().left;
                $(".divPuanlamaAtutucuMavi div").css("width:" + x+"px");
            });
    });
</script>

<div class="divPuanlama" style="position: relative; height: 22px; border: 1px solid red;
    width: 220px;">
    <div class="divPuanAtutucuSari">
        <div>
            <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>10</a></div>
    </div>
    <div class="divPuanAtutucuMavi">
        <div>
            <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>10</a></div>
    </div>
    <div class="divPuanAtutucuGri">
        <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>10</a>
    </div>
</div>