简单的做了一个评分控件，其实还算不上控件，只是用javascript做了一个效果，可以直接放在你的程序中使用。
以下内容是纯html+javascript代码：
讲解一下：
先看html部分
<body>
<div style="width:224; cursor:hand" onmouseout="setjb()">
<div>
<img id="img1" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(1)" onclick="setClick(1)" />
<img id="img2" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(2)" onclick="setClick(2)" />
<img id="img3" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(3)" onclick="setClick(3)" />
<img id="img4" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(4)" onclick="setClick(4)" />
<img id="img5" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(5)" onclick="setClick(5)" />
<img id="img6" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(6)" onclick="setClick(6)" />
<img id="img7" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(7)" onclick="setClick(7)" />
<input id="jb" type="hidden" value="1" />
</div>
</div>
</body>
<div style="width:224; cursor:hand" onmouseout="setjb()">
<div>
<img id="img1" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(1)" onclick="setClick(1)" />
<img id="img2" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(2)" onclick="setClick(2)" />
<img id="img3" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(3)" onclick="setClick(3)" />
<img id="img4" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(4)" onclick="setClick(4)" />
<img id="img5" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(5)" onclick="setClick(5)" />
<img id="img6" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(6)" onclick="setClick(6)" />
<img id="img7" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(7)" onclick="setClick(7)" />
<input id="jb" type="hidden" value="1" />
</div>
</div>
</body>
在这里定义了几个事件：
1、onmouseover="fdfd(X)" （X换成对应的数值） ：是 onmouseover 事件。也就是当鼠标在这些图片上移动的时候，要执行的动作。下面直接看一下动作的内容
function fdfd(jb)
{
for(var i=1;i<=7;i++)
{
var dc = document.getElementById("img"+i);
if(jb>=i)
{
dc.src = "2.png";} else
{dc.src = "1.png";}
}
}
{
for(var i=1;i<=7;i++)
{
var dc = document.getElementById("img"+i);
if(jb>=i)
{
dc.src = "2.png";} else
{dc.src = "1.png";}
}
}
这句话的意思就是将7个图像跑一遍：根据得到的jb值，设定所有图像的内容。
2、onclick="setClick(X)" （X换成对应的数值）是当鼠标在图像控件执行onclick事件代码。直接看代码
function setClick(jbvalue)
{
document.getElementById("jb").value = jbvalue;
}
{
document.getElementById("jb").value = jbvalue;
}
这句话的意思就是，直接找到隐藏的内容，将内容修改为 要记录的值。
3、onmouseout="setjb()" 这是当鼠标离开DIV标签时，所要做的事情，很好理解。看看都做了些什么事情吧
function setjb()
{
var jb = document.getElementById("jb").value;
fdfd(jb);
}
{
var jb = document.getElementById("jb").value;
fdfd(jb);
}
就是根据隐藏部分记录的值来修改当前的显示。
总结：
1、当鼠标在图像控件中移动的时候，动态的显示当前会选择的评分级别的值。
2、当鼠标在图像控件中点击某个控件的时候，就记下评分级别。当然是记录在一个隐藏内容里了。
3、当鼠标离开后，就直接根据隐藏内容的值来设置图像控件的显示。
下面是源代码，可以下载下来参考一下。
浙公网安备 33010602011771号