トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

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

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

このサンプルはJavascriptを使用していますので細かな調整ができます。

◆ 実行サンプル


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

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

【記述サンプル1】

背景画像の指定が次のような通常指定の場合。

<body background="image1.jpg">


まず、テキストエディタなどを使用し、次の記述を「bg_chg.js」というファイル名で保存します。

function bg_chg(setimg){ document.body.background = setimg; }


次に、HEAD句内Javascriptの呼び出しを次のように記述します。

<script type="text/javascript" src="bg_chgj.js"></script>


次にそれぞれの画像に次のようなリンク「Aタグ」を追記します。

<a href="javascript:bg_chg('/images/atombg0.gif');"><img src="../../images/atombg0.gif" width="100" height="100" alt="ロゴ"></a>
<a href="javascript:bg_chg('/images/exp/bgbx2wg.gif');"><img src="../../images/exp/bgbx2wg.gif" width="100" height="100" alt="box"></a>
<a href="javascript:bg_chg('/images/exp/baloon.gif');"><img src="../../images/exp/baloon.gif" width="100" height="100" alt="風船"></a>
<a href="javascript:bg_chg('/images/sample/cloud0.jpg');"><img src="../../images/sample/cloud0.jpg" width="100" height="100" alt="空"></a>
【記述サンプル2】

背景画像の指定がスタイル属性を使った次のような記述の場合。

background-image: url(image1.jpg);


上記、「【記述サンプル1】」「bg_chg.js」を次の記述に変更するだけです。

function bg_chg(setimg){ document.body.style.backgroundImage = "url("+setimg+")"; }

page update:2010/01/23 20:32

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