リストをランダムの画像で表示

質問

リストをlist-style-imageを使って画像で表示する方法がございますが、
画像を10枚ほど用意し、これがランダムで表示されるようにしたいと考えています。

もちろんクラス指定して個別に画像を合わせていく方法もございますが、<li>タグが非常に多いため、
別の方法を探しております。

JAVAスクリプトを使用することも念頭に入れております。
何か良い方法はございますでしょうか？

回答No.1

ORUKA1951 · ベストアンサー

javascriptだととんでもないものになりそう。
簡単なのは、CSSとCGI(shellだと数行、Perlやrubyとか)
IE7以降、標準モードでしたら隣接セレクタが使えますので・・
ol li{list-style:decimal url(./images/[CGI]/arr_y.gif)}
li+li{list-style-image:url(./images/[CGI]/arr_r.gif)}
li+li+li{list-style-image:url(./images/[CGI]/arr_b.gif)}
li+li+li+li{list-style-image:url(./images/[CGI]/arr_f.gif)}
・・・・

CSS3を使うなら
ol li{list-style:decimal url(./images/arr_y.gif)}
li:nth-child(1){list-style-image:url(./images/[CGI]/arr_r.gif)}
li:nth-child(2){list-style-image:url(./images/[CGI]/arr_b.gif)}
li:nth-child(3){list-style-image:url(./images/[CGI]/arr_f.gif)}
・・・・

[CGI]は、できれば、listIconというファイルをCGIとして動作させるとかっこよいが、imsgeOut.shとかでもよい。
CGIで、キャッシュを保存させないHTTP応答ヘッダをつけてランダムに画像を出力させる。
Pragma: no-cache
Cache-Control: no-cache
Expires: -1
Content-type: image/gif\;";

ポイント:
CSSで、異なる画像を呼び出す。今回はPATH_INFOだが、QUERY_STRINGSでもよい。
CGIでランダムに画像を出力させる。ただしキャッシュは保存させない。