dポイントプレゼントキャンペーン実施中!

javaスクリプトを使って特定のボックスの背景画像をランダム表示するようにしたいのですが、その記述法を教えていただけないでしょうか。

http://blog.e-groover.org/archives/2004/06/21/18 …
こちらも参照したのですが、cssで画像位置を固定するようになってますが、全体のボックスをセンタリングしているのでちょっと違う気が。

基本的なcss、htmlの知識はあります。
どうぞよろしくお願いします。

A 回答 (2件)

こんにちは



>全体のボックスをセンタリング
特定のボックスだけでなく全部のボックスでということですか?
参考URLの『IDかclassかタグ』のところを『タグ(divやtableなど)』にしてませんか?

IDもしくはclassで指定するとそのボックスだけ適用されるはずなのですが・・・

≪ID≫id="box"に表示したいなら #box とします

document.write ('<style type="text/css"><!--#box {background-image: url("'+ ranimg +'");background-position: center;}--></style>');

<div id="box">この部分だけ画像がセンターにランダム表示される</div>
<div id="box1">この部分には画像は表示されません</div>
<div class="box">この部分には画像は表示されません</div>
<div style="background-image:url(***.gif);background-repeat:no-repeat;">この部分の画像は左に配置されます</div>


≪class≫class="box"に表示したいなら .box とします

document.write ('<style type="text/css"><!--.box {background-image: url("'+ ranimg +'");background-position: center;}--></style>');

<div class="box">この部分だけ画像がセンターにランダム表示される</div>
<div class="box1">この部分には画像は表示されません</div>
<div id="box">この部分には画像は表示されません</div>
<div style="background-image:url(***.gif);background-repeat:no-repeat;">この部分の画像は左に配置されます</div>


参考サイトのでは背景画像が繰り返されるので1度しか表示したくないのであれば

document.write ('<style type="text/css"><!--#box {background-image: url("'+ ranimg +'");background-position: center;background-repeat: no-repeat;}--></style>');

のようにしてください
    • good
    • 0

すべてのカテゴリで「javascript 画像 ランダム」で検索

    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!