※同様の処理が「Javascriptサンプル」にもある場合があります。
そちらの方もご参照下さい。

■ 画像クリックで背景画像の変更

画像をクリックすると背景画像がその画像に変わるJavascriptサンプルです。
よく素材屋さんなどで見かけると思います。
同様のサンプルはJavascriptサンプルにもあります。

このサンプルはDHTMLのみでJavascript部がありませんので、設置方法はJavascriptサンプルよりシンプルです。

◆ 実行サンプル


↓通常の設定で背景画像を指定している場合の実行サンプル↓
ロゴ box 風船 空
↓スタイル属性で背景画像を指定している場合の実行サンプル↓
ロゴ box 風船 空

略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【 解    説 】

まず、背景画像を変更するJavascriptは、
document.body.background='(画像のアドレス)';

と記述します。

画像をクリックされた時の処理は、
onclick="(javascriptの記述)"

で引っ掛けることができます。

したがって、画像をクリックされた時、背景画像を変更する時は、
onclick="document.body.background='(画像のアドレス)'";

となります。

また、背景画像をスタイル属性で指定している場合、上記の方法では背景画像は変わりません。
背景画像をスタイル属性で変更する時Javascriptは、
document.body.style.backgroundImage='url(画像のアドレス)';

という指定で変更します。

したがって、この場合の記述は、
onclick="document.body.style.backgroundImage='url(画像のアドレス)';"

となります。

イベントDHTML(DynamicHTML)の概要、基本機能などは「DHTML(DynamicHTML)サンプル」-「DHTML(DynamicHTML)について」をご参照下さい。

【記述サンプル1】

背景画像の指定が次のようなスタイル属性の場合。
body background="image1.jpg"

【記述例】
<img src="atombg0.gif" onclick="document.body.background = 'atombg0.gif';">
<img src="bgbx2wg.gif" onclick="document.body.background = 'bgbx2wg.gif';">
<img src="baloon.gif" onclick="document.body.background = 'baloon.gif';">
<img src="cloud0.jpg" onclick="document.body.background = 'cloud0.jpg';">

スタイルシートスタイル属性の詳しい説明は、「HTMLの解説」-「15.スタイルシート」や「HTMLの解説」-「14.スタイル属性」を参照してください。
【記述サンプル2】

背景画像の指定が次のようなスタイル属性の場合。
background-image: url(image1.jpg);

【記述例】
<img src="atombg0.gif" onclick="document.bodystyle.backgroundImage = 'url(atombg0.gif)';">
<img src="bgbx2wg.gif" onclick="document.body.style.backgroundImage = 'url(bgbx2wg.gif)';">
<img src="baloon.gif" onclick="document.body.style.backgroundImage = 'url(baloon.gif)';">
<img src="cloud0.jpg" onclick="document.body.style.backgroundImage = 'url('cloud0.jpg)';">

スタイルシートスタイル属性の詳しい説明は、「HTMLの解説」-「15.スタイルシート」や「HTMLの解説」-「14.スタイル属性」を参照してください。

page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom