별점 표시하기


별점을 표시하는데 가장 간단한 것 같다.
이미지처럼 뒤에 빈 별을 깔고 그 위에 별 이미지를 % 로 표시해 준다.

별 몇개의 개념이 아니라 별 몇 %로 표시 할 수 있다.
또한 별점을 주는 방법은 ajax로 클릭 값을 받아서 처리 하면 되겠다.

<script>
var locked = 0;

function show(imagenr) 
{
    if (locked) return;
    var i;
    var image;
    var el;

    for (i=1; i<=imagenr; i++) {
        image = 'image' + i;
        el = document.getElementById(image);
        el.src="star1.gif";
    }
}


function noshow(imagenr)
{
    if (locked) return;
    var i;
    var image;
    var el;

    for (i=1; i<=imagenr; i++) {
        image = 'image' + i;
        el = document.getElementById(image);
        el.src="star0.gif";
    }
}

function lock(imagenr)
{
    show(imagenr);
    locked = 1;
}

function mark(imagenr)
{
    //show(imagenr);
    //locked = 1;
    lock(imagenr);

    var e = document.getElementById('ratetext');
    e.innerHTML = "You rated: ";

    /* store rating on server */
    var xmlhttp;
    try {
        xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
        // todo
    }
    var qs = '/test2.html?rate=' + imagenr;
    xmlhttp.open("GET", qs);
    xmlhttp.send(null);
}
</script>
<table cellpadding=0 cellspacing=0 border=0 width=126 height=21 align=center background=star_bg.gif>
	<tr>
		<td>
			<table cellpadding=0 cellspacing=0 border=0 width=67% height=21 background=star.gif><tr><td></td></tr></table>
		</td>
	</tr>
</table>
	<BR>
<DIV id=rating align=center>
	<SPAN id=ratetext>Rate this site</SPAN>
	<BR>
	<SPAN>
		<IMG id=image1 onmouseover=show(1) onclick=mark(1) onmouseout=noshow(1) src="star0.gif">
		<IMG id=image2 onmouseover=show(2) onclick=mark(2) onmouseout=noshow(2) src="star0.gif">
		<IMG id=image3 onmouseover=show(3) onclick=mark(3) onmouseout=noshow(3) src="star0.gif">
		<IMG id=image4 onmouseover=show(4) onclick=mark(4) onmouseout=noshow(4) src="star0.gif">
		<IMG id=image5 onmouseover=show(5) onclick=mark(5) onmouseout=noshow(5) src="star0.gif">
	</SPAN>
	<BR>
</DIV>