YesYo.com MintState Forums
뒤로    YesYo.com MintState BBS > Tech > Javascript
검색
멤버이름    오토
비밀번호 
 

별점 표시하기

페이지 정보

작성자 MintState 댓글 0건 조회 18,295회 작성일 08-11-17 12:15

본문

별점 표시하기


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

별 몇개의 개념이 아니라 별 몇 %로 표시 할 수 있다.
또한 별점을 주는 방법은 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>
첨부 파일
파일 종류: png star_rate.png (1.7K, 104 views)
파일 종류: rar star_rate.rar (4.3K, 38 views)

댓글목록

등록된 댓글이 없습니다.

Total 178건 5 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
98 MintState 10851 11-17
97 MintState 14157 11-17
96 MintState 12619 11-17
95 MintState 12447 11-17
94 MintState 14203 11-17
93 MintState 11706 11-17
열람중 MintState 18296 11-17
91 MintState 9335 11-17
90 MintState 10216 11-17
89 MintState 11475 11-17
88 MintState 12054 11-17
87 MintState 11570 11-17
86 MintState 12225 11-17
85 MintState 13185 11-17
84 MintState 11206 11-17
83 MintState 12542 11-17
82 MintState 11359 11-17
81 MintState 12894 11-17
80 MintState 16221 11-17
79 MintState 11857 11-17
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2024, YesYo.com MintState. ™