Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。
1.画像を用意する
まず次のような1枚の画像を用意します。16×16ピクセルの☆が、横に5個、縦に11個並んでいて、下に向かうに従って色の付いている☆の数が増えているのがポイントです。
2.HTMLを書く
HTMLはとてもシンプルで、ULリストを使います。
<ul class="rating onestar"> <li class="one"><a href="#" title="1 Star">1</a></li> <li class="two"><a href="#" title="2 Stars">2</a></li> <li class="three"><a href="#" title="3 Stars">3</a></li> <li class="four"><a href="#" title="4 Stars">4</a></li> <li class="five"><a href="#" title="5 Stars">5</a></li> </ul>
ULタグ自体には、rating と onestar という2つのクラスが指定されていて、ratingは基本的なスタイル指定用です。2番目のonestarで初期値を設定しています。表示したい☆の数に応じて、onestar, twostar, threestar..といったように設定します。
また、それぞれのリストアイテム(li)には識別できるように、one, two, three..といったクラスを割り当てておきます。
3.CSSを書く(1)
基本的なスタイル指定は次のようになります。
.rating{
width:80px;
height:16px;
margin:0 0 20px 0;
padding:0;
list-style:none;
clear:both;
position:relative;
background: url(images/star-matrix.gif) no-repeat 0 0;
}
ul.rating li {
cursor: pointer;
/*ie5 mac doesn't like it if the list is floated but ie6 does\*/
float:left;
/* end hide*/
text-indent:-999em;/* hide text*/
}
ul.rating li a {
position:absolute;
left:0;
top:0;
width:16px;
height:16px;
text-decoration:none;
z-index: 200;
}
ul.rating li.one a {left:0}
ul.rating li.two a {left:16px;}
ul.rating li.three a {left:32px;}
ul.rating li.four a {left:48px;}
ul.rating li.five a {left:64px;}
ULタグの背景画像として☆を表示して、その上に16x16ピクセルのアンカーをそれぞれの☆の上に並べるイメージです。また、テキストは表示しないので、text-indent:-999em としておきます。以上は、次の画像を見ると少し分かりやすいかもしれません。
4.CSSを書く(2)
初期状態で表示する☆の数を設定します。「1.HTMLを書く」でULクラスの2番目に指定したものです。表示する☆の数に応じて、背景画像を縦方向に16ピクセルずつずらして表示します。
.nostar {background-position:0 0}
.onestar {background-position:0 -16px}
.twostar {background-position:0 -32px}
.threestar {background-position:0 -48px}
.fourstar {background-position:0 -64px}
.fivestar {background-position:0 -80px}
5.CSSを書く(3)
最後にここが最大のポイントなのですが、マウスオーバーで☆の表示が変わるようにhover属性を指定します。☆の数に応じて16ピクセルずつずらすのは先ほどと同じなのですが、widthを80ピクセルにして初期表示の背景画像に重ね合わせて表示します(そのためにz-indexを小さくしています)。
ul.rating li a:hover {
z-index:2;
width:80px;
height:16px;
overflow:hidden;
left:0;
background: url(images/star-matrix.gif) no-repeat 0 0
}
ul.rating li.one a:hover {background-position:0 -96px;}
ul.rating li.two a:hover {background-position:0 -112px;}
ul.rating li.three a:hover {background-position:0 -128px}
ul.rating li.four a:hover {background-position:0 -144px}
ul.rating li.five a:hover {background-position:0 -160px}
以上で完成したのが、このサンプルです。
実際にサーバ側にデータを登録するには、もう少しやらなければならないことがあります。アンカーをクリックしたら、JavaScriptでPOSTするようにしたり、サーバ側でデータを受け取ってデータベースに格納するなどをしなければなりません。今回はそこまでは解説できませんでしたが、AJAXでページ遷移なしに処理するのもそんなに難しくないと思いますので、ぜひ挑戦してみてください。
それでは皆さん、良い評価ライフを！