現在cssで背景画像をランダム表示するよう指示をしたいです。
テンプレート配布サイトからDLしたcssには以下のように指定されています。
----
.menu{
float :left;
background-image:url(img/menu_01.png);
background-repeat:no-repeat;
width :270px
----
このようなcss表記から画像をランダム表示に指定するには
どのように加筆、修正をしたらよいのか教えて頂けますでしょうか。
似たような質問もたくさんされていたのでとても申し訳ないのですが、自力で色々試してみたものの、
どうしてもわからなかったので、お力を貸して頂ければ幸いです。
よろしくお願い致します。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
なら、javascriptで、ページを開くたび<body onLoad="test()">とでもして、background要素を書き換えるくらいでしょう。
<script language="JavaScript">
<!--
Lines = 4; // ←画像の数(要変更)
Mess = new Array(
"<body background='画像URL'>",
"<body background='画像URL'>",
"<body background='画像URL'>",
"<body background='画像URL'>"
);
Rndm = Math.floor(Math.random()*Lines);
document.write(Mess[Rndm]);
// -->
</script>
あるいは、
<script language="JavaScript">
<!--
Lines = 4;
Mess = new Array(
"<body class=\"A\">",
"<body class=\"B\">",
"<body class=\"C\">",
"<body class=\"D\">",>"
);
Rndm = Math.floor(Math.random()*Lines);
document.write(Mess[Rndm]);
// -->
</script>
とか・・・
ただし、javascriptで記事の書き換えは停止しているユーザーやjavascriptを理解しないユーザーエージェントもあるのでお勧めとはいえない。
No.1
- 回答日時:
最も簡単なのは、ごく簡単なCGIを作成することです。
たとえば、random.cgi(ファイル名は任意)は、指定されたディレクトリを開いて画像一覧を取り出し、その数とファイル名をリストとして取り込みます。
ついで、その数以内の乱数を作り、それからファイル名を選択したら、その画像のファイルを開いて、サイズを取得したらHTTP応答ヘッダで画像のタイプ、サイズを出力した後、そのファイルをそのまま出力させます。
十数行で終了する小さな小さなプログラムで済むでしょう。
そして、CSSにて
background-image:url(cgi-bin/random.cgi);
この回答への補足
ご回答ありがとうございます!
ただ、私はCGIを使用した一度も事がないのと、使用しているサーバー(忍者ツール)さんは
CGIの設置ができないようなのです。。
なので、可能であれば質問に記載してある現状のCSSへの加筆、修正等ができればと思っております。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 疑似要素で背景画像に指定したSVG画像の色変更 2 2023/01/30 22:45
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLで使う「見出し」は英文で...
-
iframe内をクリックさせない方...
-
<hr>の縦バージョンはありますか?
-
画像とその下にあるテキストの...
-
同じ画像 複数回使用
-
background-repeat CSS で切れ...
-
【Webサイト】画像が小さく表示...
-
帯を画面いっぱいに表示したい
-
画像の上にテキスト配置で、拡...
-
ページの上下に白い横線が入る
-
PNGがうまく表示されない・・・。
-
widthが可変のブロック要素で、...
-
「HTML(縦スクロールバー付)...
-
数か月ぶりにCSSを再開しました...
-
背景画像の上に透過GIF背景...
-
バナーって何種類作ったら良い?
-
画像で背景透明のテキストがに...
-
背景画像を前面に表示させる方法
-
CSSで背景画像をランダムに表示...
-
WEB上でディレクトリ内の画像を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報