上級編１０

　背景をチェンジする技
　　　JavaScriptで背景画像を変化させられます。

背景画像を使う技は既に習得済みですよね。普通は固定されるものですが、随時変化させることがJavaScriptで可能になります。
下図のアイコンにカーソルを乗せてみましょう。背景が変化しますよ。


背景① . . . 背景② . . . 背景③ . . . 無地

ページに動きがあると、訪問者に楽しんでもらえます。ちょっとした工夫もJavaScriptの手助けで可能になります。
この書式は下記の通りです。 

<script type="text/javascript">
function changeBG(wIMG) {
document.body.style.backgroundImage = "url(" + wIMG + ")";
}
</script>
<p class="outset"><br>
背景① <img src="pict/back_a.png" width="32" height="32"
 onMouseOver="changeBG('pict/back_a.png')"> . . 
背景② <img src="pict/back_b.jpg" width="32" height="32"
 onMouseOver="changeBG('pict/back_b.jpg')"> . . 
背景③ <img src="pict/bg01.gif" width="32" height="32"
 onMouseOver="changeBG('pict/bg01.gif')"> . . 
無地 <img src="pict/back_0.jpg" width="32" height="32"
 onMouseOver="changeBG('none')">
</p>

こうした遊び感覚のJavaScriptも理解されると作る楽しみが増しますね。
以上で、この項は修了です。
質問メール　 SCHOOL TOP