Flagyx.blog

JavaScriptを使わないスターレイティングの作り方

http://labs.unoh.net/2007/08/javascript_1.html

これ実際組み込むとしたら、こんな感じで html を書くかなと思います。

<p>あなたはこのエントリについてどう思われましたか? 以下の 5 段階で評価してください(1 が最低、5 が最高評価になります)。</p>

<ul class="rating onestar">
	<li class="one"><a href="rate.cgi?rate=1&amp;documentid=10" title="1 Star">1</a></li>
	<li class="two"><a href="rate.cgi?rate=2&amp;documentid=10" title="2 Stars">2</a></li>
	<li class="three"><a href="rate.cgi?rate=3&amp;documentid=10" title="3 Stars">3</a></li>
	<li class="four"><a href="rate.cgi?rate=4&amp;documentid=10" title="4 Stars">4</a></li>
	<li class="five"><a href="rate.cgi?rate=5&amp;documentid=10" title="5 Stars">5</a></li>
</ul>

で、rete.cgi で値を受け取って「ご協力ありがとうございました」画面を表示。documentid からデータを引っ張って元の文書に戻るリンクを表示する感じ。が――、

はてなブックマーク - ウノウラボ Unoh Labs: JavaScriptを使わないスターレイティングの作り方

http://b.hatena.ne.jp/entry/http://labs.unoh.net/2007/08/javascript_1.html

はてなブックマークのコメントをみると、html のマークアップに問題がある指摘をされてる方がおられるのですが、いまいちつかみきれません。a タグ title 属性の Star がいけない……にしてはちょっときつい批評。そりゃ CSS の書き方はすげえなとは思いますが。

『(スター)評価』は html のほにゃららタグ、あるいは属性で表現するべし、というのがあるならわかるのです。

評価システムは画像で星マークを表示するのが暗黙の了解だから img タグで表現するべし、というのは音声ブラウザのユーザーを考えるとちょっとスッキリしません。画像に意味を結びつけちゃってよいものか。

画像のポジションを CSS でうんたら変えて、画像を見えたり見えなくさせている CSS のマークアップ(?)がひどい、ということなのかな。ふーむ……それは…… うーむ……。

htmlは奥が深いですね。