ホームページ作成 質問過去ログ

                                Page     805
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   通常モードに戻る  ┃  INDEX  ┃  ≪前へ  │  次へ≫   
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ▼ランダムな背景。  るな 04/9/25(土) 2:34
   ┣Re:ランダムな背景。  むむりく 04/9/25(土) 4:56
   ┗Re:ランダムな背景。  Pid 04/9/25(土) 6:26
      ┗Re:ランダムな背景。  るな 04/9/26(日) 23:07

 ───────────────────────────────────────
 ■題名 : ランダムな背景。
 ■名前 : るな
 ■日付 : 04/9/25(土) 2:34
 -------------------------------------------------------------------------
   はじめましてこんばんんわ。
今サイト制作の途中なのですが、どうしても解決しないことがあり質問させて頂きます。

背景をページ表示の度に変える。という作業をしているのですが、
<SCRIPT LANGUAGE="JavaScript">
<!--
back=new Array(2);
back[0]="images/back07.gif";
back[1]="images/back08.gif";
MyBack=Math.floor(5*Math.random());
document.write("<body background='"+back[MyBack]+"'>");
//-->
</SCRIPT>    
というタグを使用しています。

例えば1枚目を右下。二枚目を中央。と分けて配置するにはどうしたらよいのでしょうか??

説明下手ですみません;
ご返答のほうよろしくお願いします!!
    
 ───────────────────────────────────────  ■題名 : Re:ランダムな背景。  ■名前 : むむりく  ■日付 : 04/9/25(土) 4:56  -------------------------------------------------------------------------
   ▼るなさん:
>はじめましてこんばんんわ。
こんばんは。まずは落ち着きましょう(+д+)

>今サイト制作の途中なのですが、どうしても解決しないことがあり質問させて頂きます。
>背景をページ表示の度に変える。という作業をしているのですが、
><SCRIPT LANGUAGE="JavaScript">
><!--
>back=new Array(2);
>back[0]="images/back07.gif";
>back[1]="images/back08.gif";
>MyBack=Math.floor(5*Math.random());
>document.write("<body background='"+back[MyBack]+"'>");
>//-->
></SCRIPT>    
>というタグを使用しています。
「タグ」と言われていることから想像するに、
JavaScript に関しては「あまり…」という感じでしょうか?
そもそもこれでは、画像がでないときもあるのでは…

>例えば1枚目を右下。二枚目を中央。と分けて配置するにはどうしたらよいのでしょうか?? 
ということで、サンプルを。
# indent が全角になるので、左寄せにしてます。

<style type="text/css"><!--
body { background: #fff url("images/back07.gif") no-repeat right bottom; }
--></style>

<script type="text/javascript">
<!--
window.onload = function() {
if (!document.getElementsByTagName) return;

var
img = ['images/back07.gif','images/back08.gif'], // 画像へのパス(追加可能)
pos = ['right bottom','50% 50%'], // 表示する場所(上と合うように)
n = Math.floor(Math.random() * img.length),
x = document.getElementsByTagName('body')[0];

x.style.backgroundImage = 'url(' + img[n] + ')';
x.style.backgroundPosition = pos[n];
}
//-->
</script>
 ───────────────────────────────────────  ■題名 : Re:ランダムな背景。  ■名前 : Pid  ■日付 : 04/9/25(土) 6:26  -------------------------------------------------------------------------
   >はじめましてこんばんんわ。
ども,お早うございますです。

>というタグを使用しています。
それは「タグ」ではないのであります。

>例えば1枚目を右下。二枚目を中央。と分けて配置するにはどうしたらよいのでしょうか??
ところで,背景画像の位置を指定する場合,普通はどうするんでしたっけ?…以下のスクリプトを使うにはその知識が前提になります。

<script type="text/javascript">
function changeBG() {
  // 画像と位置の指定。画像数は自由。
  var x = [ [ 'images/back06.gif', '20% 10%'    ],
       [ 'images/back07.gif', 'right bottom' ],
       [ 'images/back08.gif', 'center center' ] ];

  // 以下に手を加える必要はありません
  var y = x[ Math.floor(Math.random() * x.length) ];
  var z = '<style type="text/css">'
     + 'body {'
     + ' background-image: url("' + y[0] + '");'
     + ' background-position: ' + y[1] + ';'
     + ' background-repeat: no-repeat;'
     + '}'
     + '<\/style>';
  document.write(z);
}
changeBG();
</script>

むむりくさんの方がエレガントですね (^^;)。まあでも一応,古いブラウザでも動作します。

※なお,るなさんのスクリプトでは,JavaScript 機能がオフの場合に <body> が無くなってしまいます。
 ───────────────────────────────────────  ■題名 : Re:ランダムな背景。  ■名前 : るな  ■日付 : 04/9/26(日) 23:07  -------------------------------------------------------------------------
   むむりさん、pidさんご返答ありがとうございます。

今までサイトを何となくで作ってきてしまっていたので、まだまだ勉強がたりないなと思いました。

サンプルまで頂いてありがとうございました。
これからもっと色々勉強してサイト制作頑張りたいと思います。

本当にありがとうございました。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━    通常モードに戻る  ┃  INDEX  ┃  ≪前へ  │  次へ≫    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━                                 Page 805