[javascript]滑鼠移動評分

這個javascript就是一般看到mouse移動到第顆星就會顯示幾分,減少單板的radio choice

構想

在每一個img裡,偷偷給定一個attribute 當做index 的值(判斷mouseover是在那一個img裡)

設定img的mouseover動作,當設定的attribute跟for loop的index小於時,可定另一種圖

否則就回覆成原始的圖

source大概如下

    <div id='test' ><img src="test2.png" border="0" ><img src="test2.png" border="0" ><img src="test2.png" border="0" ><img src="test2.png" border="0" ><img src="test2.png" border="0" ><img src="test2.png" border="0" >
    </div>

    function justdoit2(o)
    {

        var idx = o.getAttribute("data");
        document.getElementById("v").value = parseInt(idx)+1;
        for(i=0 ; i < img.length;i++)
        {
            if(i<=idx)
                img[i].src = "test1.png";
            else
                img[i].src="test2.png";
        }   
    }

畫面如下

image

ps.這個程式有點小bug就是圖片顯示的問題,解決方法可以先new 二個image來直接置換,取代img[i].src 設定的方法

發表迴響