[jQuery] 배경 이미지와 CSS로 모양을 낸 별점 그래프 > 기술자료

• 목록

1. HTML 내용
<link rel="stylesheet" type="text/css" href="starRating.css"/>

<h1>Star Rating</h1>
<p><span class="starRating"><span style="width:10%">1점</span></span></p>
<p><span class="starRating"><span style="width:20%">2점</span></span></p>
<p><span class="starRating"><span style="width:30%">3점</span></span></p>
<p><span class="starRating"><span style="width:40%">4점</span></span></p>
<p><span class="starRating"><span style="width:50%">5점</span></span></p>
<p><span class="starRating"><span style="width:60%">6점</span></span></p>
<p><span class="starRating"><span style="width:70%">7점</span></span></p>
<p><span class="starRating"><span style="width:80%">8점</span></span></p>
<p><span class="starRating"><span style="width:90%">9점</span></span></p>
<p><span class="starRating"><span style="width:100%">10점</span></span></p>
<button type="button" onclick="$('link').attr('href','');">CSS(X)</button>
<button type="button" onclick="$('link').attr('href','starRating.css');">CSS(O)</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>


2. starRating.css 내용
@charset "utf-8"; 

/* Star Rating */
.starRating,
.starRating span{ display:inline-block; height:14px; height:14px; background:transparent url(icoFiveStar.gif) no-repeat; overflow:hidden;}
.starRating{ width:79px; vertical-align:middle;}
.starRating span{ font-size:0; line-height:0; vertical-align:top; text-indent:-100px; *text-indent:0; background-position:0 -14px;}


자료인용
http://naradesign.net/wp/2010/03/17/1233/