<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Style type = "text/CSS">
Body, Div, UL, Li, P {margin: 0; padding: 0 ;}
Body {color: #666; Font: 12px/1.5 Arial ;}
Ul {list-style-type: none ;}
# Star {position: relative; width: 500px; margin: 35px auto ;}
# Star ul, # star span {float: Left; display: inline; Height: 35px; line-Height: 29px ;}
# Star ul {margin: 0 10px ;}
# Star Li {float: Left; width: 35px; cursor: pointer; text-indent:-9999px; Background: URL (../0519/star.gif) No-Repeat ;}
# Star p {position: absolute; top: 20px; width: 159px; Height: 60px; display: none; Background: URL (.. /0519/star.gif) No-Repeat; padding: 70px 10px 0 ;}
# Star p em {color: # f60; display: block; font-style: normal ;}
</Style>
<SCRIPT type = "text/JavaScript">
Function Mouseover ()
{
VaR oul = Document. getelementsbytagname ("Ul") [0];
VaR Ali = Document. getelementsbytagname ("Li") [0];
For (VAR I = 0; I <A; I ++ ){
Oul. Children [I]. style. backgroundposition = '0-29px ';
}
}
Function mouseout ()
{
VaR arr = new array ();
For (VAR I = 0; I <5; I ++ ){
Arr [I] = Document. getelementbyid ('star'). Children [1]. Children [I];
Arr [I]. style. backgroundposition = '0 0 ';
}
}
Function click (P)
{Alert (p + "points ")
}
</SCRIPT>
</Head>
<Body>
<Div id = "star" ">
<Span> click the stars to score </span>
<Ul>
<Li onmouseover = "Mouseover (1)" onmouseout = "mouseout ()" onclick = "Click (1)"> 1 </LI>
<Li onmouseover = "Mouseover (2)" onmouseout = "mouseout ()" onclick = "Click (2)"> 2 </LI>
<Li onmouseover = "Mouseover (3)" onmouseout = "mouseout ()" onclick = "Click (3)"> 3 </LI>
<Li onmouseover = "Mouseover (4)" onmouseout = "mouseout ()" onclick = "Click (4)"> 4 </LI>
<Li onmouseover = "Mouseover (5)" onmouseout = "mouseout ()" onclick = "Click (5)"> 5 </LI>
</Ul>
</Div>
</Body>
</Html>
untitled document
<SCRIPT type = "text/JavaScript">
Function Mouseover ()
{
VaR oul = Document. getelementsbytagname ("Ul") [0];
VaR Ali = Document. getelementsbytagname ("Li") [0];
For (VAR I = 0; I <A; I ++ ){
Oul. Children [I]. style. backgroundposition = '0-29px ';
}
}
Function mouseout ()
{
VaR oul = Document. getelementsbytagname ("Ul") [0];
VaR Ali = Document. getelementsbytagname ("Li") [0];
For (VAR I = 0; I <5; I ++ ){
Oul. Children [I]. style. backgroundposition = '0 0 ';
}
}
Function click (P)
{Alert (p + "points ")
}
</SCRIPT>
</Head>
<Body>
<Div id = "star" ">
<Span> click the stars to score </span>
<Ul>
<Li onmouseover = "Mouseover (1)" onmouseout = "mouseout ()" onclick = "Click (1)"> 1 </LI>
<Li onmouseover = "Mouseover (2)" onmouseout = "mouseout ()" onclick = "Click (2)"> 2 </LI>
<Li onmouseover = "Mouseover (3)" onmouseout = "mouseout ()" onclick = "Click (3)"> 3 </LI>
<Li onmouseover = "Mouseover (4)" onmouseout = "mouseout ()" onclick = "Click (4)"> 4 </LI>
<Li onmouseover = "Mouseover (5)" onmouseout = "mouseout ()" onclick = "Click (5)"> 5 </LI>
</Ul>
</Div>
</Body>
</Html>
Basic version of star rating Group