基本の背景２■ランダム背景box・全面

●2016/04/07：即時関数で囲んで、グローバル変数を消しました。
★この背景画像はページを開くたびに変化します。
ランダムなので、たまに同じ画像が出ることもあります。
CSSで背景画像の表示を敷詰指定をしていますが、他の指定に変更しても動作します。

ブラウザを更新するか、更新ボタンを押してみて下さい。→
今回はbox(divで囲んだ空間)を使用しましたが、テーブル(table)でも使用できます。必ず　id="myB"を記述して下さい。
『myB』という言葉自体は、固定の単語ではありません。自分で変更できる単語です。
ただし単語を変更する時は、JavaScriptもCSSもid="●●"も一緒に変更して、３つとも同一の単語にします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>基本の背景２■ランダム背景box・全面</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{ background:#ffc;}/*★背景色　薄黄色。不要なら削除*/

/*★boxの指定。好みで。表示指定は自由に変更可。JavaScriptが動作しない場合のために背景画像名を記述*/
#myB{
margin:50px auto;/*★位置指定(上下、左右)*/
width:70%;/*★横幅*/
height:200px;/*★縦幅*/
background:url(pt2t.jpg) #eef;/*★背景画像指定。背景色指定灰色。repeat表示は指定しないと敷詰*/
text-align:center;/*★文字を入れなければ不要。文字の左右中央位置指定*/
line-height:200px;/*★文字を入れなければ不要。縦幅と行間の数値を同じにすると文字の上下中央位置指定*/
}

/*★タイトル文字指定。不要なら削除*/
.test1{
color: #fff;/*★文字色　白*/
font-size:36px;/*★文字サイズ指定*/
font-weight: bold;/*★太字指定*/
opacity:0.8;/*★透過指定。文字色を薄くする*/
text-shadow:2px 2px 2px #000;/*★文字の影指定　黒色*/
}
--></style>
<!--★コピーここまで。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下記は背景画像の変化するbox指定。 id="myB"を必ず記述。文字を入れなければ<span class="mybun">～</span>は不要-->
<div id="myB"><span class="test1">◎動くJavaScript◎</span></div>

<script type="text/javascript"><!--
//ランダム背景画像　更新時切替box================================================
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★背景画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=["pt2tsm.jpg","pt3tsm.jpg","pt4tsm.jpg","tuto1.png","tuto3.png"];
var myurl="";      //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var i= Math.floor(Math.random()*ga.length);
document.getElementById("myB").style.backgroundImage="url("+myurl+ga[i]+")";
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

基本の背景２■ランダム背景box・全面 最終修正日 : 2016/04/07

　基本の背景２■ランダム背景box・全面　　　　最終修正日 : 2016/04/07