ランダムトップで位置指定

[新着] Webテンプレートを仮オープンしました



0   名前:  : 2006/09/22(金) 10:21  ID:Q2nVn1Vs
背景画像をランダムにして、その位置を画像ごとに指定したいのですが、どうしたらいいでしょうか。
画像1は左に寄せて、画像2は右に寄せたいのです。
どなたか教えていただけないでしょうか。

1   名前: カヅサツ ◆ThCi95HEzw : 2006/09/22(金) 10:21  [URL]  ID:f0UXxXRM
> 背景画像をランダムにして、その位置を画像ごとに指定したいのですが、どうしたらいいでしょうか。

背景画像をランダムにする方法と、背景画像の位置を指定する方法の複合です。
こういう場合、「私はこれこれこのような方法で背景画像をランダムにし、またこれこれこのような方法で背景画像の位置を指定しているが、両者を複合し、かつ位置を画像指定する場合どのようにすれば良いか」と質問されると良い回答が付きやすいです。

そもそもの前提が分からないなら、別途スレッドを立てて質問されると良いでしょう。前者はJavaScriptですが、後者はスタイルシートです。

2   名前: 通りすがり : 2006/09/22(金) 10:21  ID:9IuG66CT
> 前者はJavaScriptですが、後者はスタイルシートです。

とはいえ、この質問の場合、画像ごとに固定位置を変えたい(位置指定はランダムではない)ということですから、位置指定も(スタイル指定とはいえ)JavaScriptの中に組み込まれるんじゃないでしょうか?
難しいというかめんどくさいので私にはできませんが……。

3   名前: 通りすがり : 2006/09/22(金) 10:21  ID:9IuG66CT
あ、すみません。
>>2の前半を読んでいると、んなことは分かりきっているような感じですよね。
余計なことを書いた気がします。すみません。

4   名前:  : 2006/09/22(金) 10:21  ID:Q2nVn1Vs
お早い返答ありがとうございます。

私は位置指定の場合
<STYLE TYPE="text/css">
<!--
BODY {
margin: 0px;
color: #000;
background-color: #ccccff;
background-image : url("top1.gif");
background-repeat: no-repeat;
background-position: 0% 0%;
background-attachment: fixed;
}
-->
</STYLE>

としていて、ランダム表示の場合は

<script type="text/javascript">
<!--
bgimg = new Array();
bgimg[0] = "top1.gif";
bgimg[1] = "top2.gif";
chip = Math.floor(bgimg.length * Math.random());
document.body.background = bgimg[chip];
// -->
</script>

で指定しています。

5   名前: 匿名 : 2006/09/22(金) 10:21  ID:DpePpJVc
そもそも
document.body.background = bgimg[chip];
で背景画像が出るものなんでしょうか。
試してません、出たらすいません。

6   名前: NullPo : 2006/09/22(金) 10:21  ID:1Bb3RL38
>>5
出ますね。
IE6、FireFox1.5、Opera9で試してみましたが、問題なさそうです。

7   名前: 匿名 : 2006/09/22(金) 10:21  ID:DpePpJVc
>>6
NullPoさん

私のツッコミに検証までしていただいて恐縮です。
ところで、このobj.backgroundというのは、私は使ったことがない
んですが、obj.style.backgroundImage=url()と何か仕様的にちがい
とかあるのでしょうか。

8   名前: NullPo : 2006/09/22(金) 10:21  ID:1Bb3RL38
>>7
どうなんでしょうね。
スタイルで指定しようが、属性に指定しようが変わらない気がしますが、よく知りません。
良く考えたら、backgorund属性を持っているのはbodyとtableくらいかもしれません。
他の要素に指定する場合はスタイルで指定しなければいけないような気がします。
まぁ、有識者の回答を待ちましょう。

9   名前: カヅサツ : 2006/09/22(金) 10:21  [URL]  ID:O5hEMlpW
>>7
> obj.backgroundというのは、私は使ったことがないんですが、obj.style.backgroundImage=url()と何か仕様的にちがいとかあるのでしょうか。

前者はオブジェクトのbackground属性、後者はオブジェクトのスタイルシートの background-image プロパティと思われます。
HTMLのルールでは、JavaScriptを適用する場合でも、ルール違反を起こさないようにすることが求められていますので、例えば前者を使ってしまうと、それは HTML 4.01 Strict に適合しません。

10   名前: カヅサツ : 2006/09/22(金) 10:21  [URL]  ID:O5hEMlpW
>>9 続き

つまり、「位置を画像ごとに指定」するしない以前に、そもそも >>4 では多くのブラウザは「背景画像がランダムに」なりません。なぜなら、多くのブラウザは、body要素のbackground属性よりも、CSSで body要素に指定された background-image プロパティを優先するからです。


一覧へ戻る