掲示板/JavaScript質問板/過去ログ/一覧/ ランダムの背景画像

0 名前： マキノ ： 2006/10/02（月） 11:36 ID:RhPMAQlL: こんいちは。書き込み失礼致します。
めちゃめちゃ初心者で全くもってコレわかりません！！涙
私が頭悪いだけな気もしますが……。どうか教えてください！！！！>_<。

<script type="text/javascript">

</script>

ランダムで背景の画像を設定しようと思ったのです。
私がしたいのは、背景画像の固定とスクロールしないってことなんです。（つまりfixedとno-repeatですよね？）
backgroundをつければいいのかもしれませんが・・・どこにつけたらいいのかわかりませんでした。
何度も試したのですが。テキトーにあっちゃこっちゃつけて。
どうか教えてください。

1 名前： マキノ ： 2006/10/02（月） 11:36 ID:RhPMAQlL: 自力で解決しました！！のでご報告に。

<head>

<style type="text/css">

</style>

</head>

<body>

<script type="text/javascript">

</script>

</body>

ランダムで背景画像をするには、BODY内のタグで出来ます。
ただし、BODY内だけでは背景画像が連続され、スクロールされます。
そこで固定したい時はHEAD内にあるタグをHEADに書きます。

これで固定・スクロールせず背景画像のランダムが完成です。

ふぅ。解決してよかったです。何時間さまよったのでしょう・・・やる気ですな。

2 名前：匿名： 2006/10/02（月） 11:36 ID:i4s77xzC

やる気があるから解決ついでに（笑

document.body.background = '..'というのは、<body background="..">と同じ意味なんだ。
だから連続表示になる。

さてHTML 4.0では、body要素のbackground属性は「古いから使わないでね」とある。
それに合わせて、実はdocument.body.backgrundも「古いよ」と注意書きがついてしまったんだ。

じゃあ今後は（と言いつつ昔からなんだが）どうすれば良いかと言えば、二通りの方法が考えられる。
一つはdocument.writeでstyle要素ごと書き出してしまう方法。

document.write(
    '<style type="text/css">' +
    'body{' +
    '  background-image: url("' + bgimg[chip] + '");' +
    '  background-attachment: fixed;' +
    '  background-repeat: no-repeat;' +
    '  background-position: 90% 90%;' +
    '}' +
    '<\/style>'
);

もう一つは<body background="..">ではなく<body style="..">に指定する方法。

document.body.style.setProperty('background-image', 'url("' + bgimg[chip] + '")';
document.body.style.setProperty('background-attachment', 'fixed');

// もしくは
document.body.style.cssText += 'background-image: url("' + bgimg[chip] + '"); background-attachment: fixed;';

// もしくは
document.body.style.backgroundImage = 'url("' + bgimg[chip] + '")';
document.body.style.backgroundAttachment = 'fixed';

どれも一長一短なんだが、とにかく全てに共通することはCSSをJavaScriptで操作していること。
だからCSSの知識があれば、たとえJavaScriptをあまり知らなくても、この手のコードは予測できるようにはなるよ。

3 名前：牛若： 2006/10/02（月） 11:36 ID:ztuT5elm: ふん。みんな”使ってるね。

4 名前： フォフォ ： 2006/10/02（月） 11:36 ID:e3LZiu3p: 便乗させていただきますが
＞document.body.background = '..'というのは、<body background="..">と同じ意味なんだ。
ということは、
例えばCSSで「span{width:300px;height:200px;background:fixed no-repeat right}」とした場合、
「document.span.background = '..'」と書き換えれば、
SPANタグの背景もランダムに変えることができる、ということでしょうか。

5 名前：匿名： 2006/10/02（月） 11:36 ID:i4s77xzC

>>4
> 「document.span.background = '..'」と書き換えれば、

そもそもspan要素にbackground属性はないでしょ。
書くならdocument.span.style.backgroundだろうけど、こういう書き方はできない。
body要素は必ず1つしかないから、document.bodyで特別扱いできる。
けどspan要素はたくさん出現する可能性があるから、document.spanとは書けないんだ。

じゃあどうするかは以下に説明するけど、その前に：

> SPANタグの背景もランダムに変えることができる、ということでしょうか。

どう頑張ってもタグの背景は変更できない。変更できるのは要素の背景。
細かいようだけど、ツリーモデルを理解する上で、タグと要素の違いは極めて重要なんだ。
ツリーモデルはいろんな場所に顔を出すから、用語はしっかり覚えておこう。

さて、span要素の背景を変更するには、次の方法が考えられる。

1. ページスタイル（link要素、style要素）の内容を書き換えて、一括変更する
2. ページ内の全span要素のstyle属性を変更する

順番に試していこう。1の方法なら、公式の方法は以下のようになる。
selectorTextがセレクタ、styleが宣言ブロック（{...}）に対応しているんだ。
Firefoxや最近のOpera（およびIE）はこれで動作する。

// ページスタイル（link要素かstyle要素）内の規則集合を取得する
var cssRules = document.styleSheets[0].cssRules;

// 規則集合を順番に見ていく
for (var i = 0, len = cssRules.length; i < len; i++) {
    
    // もし「span {...}」という規則が見つかったら
    if (cssRules[i].selectorText == 'span') {
        
        // その {...} 内の background-image を「url("test.jpg")」に変更する
        cssRules[i].style.backgroundImage = 'url("test.jpg")';
    }
}

/*
 * ただし、IEは独自のルールを持っている。
 * ・document.styleSheets[0].cssRulesではなくdocument.styleSheets[0].rules
 * ・selectorTextが大文字になる
 * ブラウザ分岐やtoLowerCaseなどを使って対処すれば、IEでも動作するようになる。
 */

ただ、上記は新しい書式で（と言っても数年経つのだが）、古いOperaなどは対応していない。

そこで、2の方法なら比較的古いブラウザでも動作する可能性がある（でもIE4/NN4までは無理）
公式の書き方は以下のようになる。

// ページ内の全てのspan要素を取得
var spans = document.getElementsByTagName('span');

// span要素を順番に見ていく
for (var i = 0, len = spans.length; i < len; i++) {
    
    // style属性のbackground-imageを変更する
    spans[i].style.backgroundImage = 'url("test.jpg")';
}

もっともこの方法は、背景を変更するたびにページ内の全span要素を総なめにしなければならないから、処理に時間がかかる上に無駄が多い。
そこに目を瞑れるかどうか。

結論としては、span要素だろうと何だろうと、CSSでコントロールできるものは全てJavaScriptから変更可能だということだ。
もっと詳しいことを知りたければCSS Object Model（DOM Level 2 CSS）を調べるといい。
まぁ、例によってIEは独自の仕組みになっているのでMSDNも合わせて参照のこと。

6 名前： フォフォ ： 2006/10/02（月） 11:36 ID:e3LZiu3p: 感覚的に、「document.…」は略するときに使うようなもの、と考えればよいのでしょうかね。
何にせよ、ツリーモデルという単語も初耳でしたし、
スクリプト部分の解説もあまり理解・実感、共にできていませんから、
まず自分はそこから、のようです。

7 名前：匿名： 2006/10/02（月） 11:36 ID:i4s77xzC: > 感覚的に、「document.…」は略するときに使うようなもの、と考えればよいのでしょうかね。

そうじゃない。documentは、ツリーモデルにおける一番てっぺんのことなんだ。

documentの下に文書型宣言とhtml要素があり、html要素から各要素がツリー状に分岐していく。

同時に、documentはスタイルシートへのアクセスも提供する。
document.styleSheetsから、各スタイルシートがやはりツリー状に分かれ出ている。

さらに、documentは文書を操作するための基本的なメソッドを提供する。
要素を集めたり、要素を作ったり、要素を移動させたりできる。

ある意味、そのページの全てを司るのがdocumentというオブジェクトだ。

document.bodyというのは、実は古い書き方なんだ。
同じ古い書き方に、document.forms、document.links、document.imagesなどがある。
これらは、ツリーモデルがまだ生まれていなかった時代に、
せめてbody要素、form要素、a要素、img要素へのアクセスくらいは可能にしようという意図で生まれた。

しかし、今はツリーモデルが存在し、どの要素へも自由にアクセスできる。
document.body、document.formsなんて書く必要はなくなったんだ。
# でも、こっちの方が短いからという理由で、使い続ける人はまだ多い。
# それはそれで構わないけど、それが古い特別な形式であることは自覚した方がいい。
# 簡略プロパティはDOM HTMLでも定義されているが、いくつかはもう非推奨扱いになっている。

> スクリプト部分の解説もあまり理解・実感、共にできていませんから

俺の説明力の無さもあったろうが、はっきり言ってStylesheet Object Modelは難しい部類だと思う。
まずはHTMLを自在に操れるようになろう。