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

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

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

◆ 実行サンプル

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

【　解　　　　説　】

まず、背景画像を変更する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.スタイル属性」を参照してください。