Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
※DHTMLについては「DHTMLサンプル」もご参照下さい。
■ 画像クリックで背景画像の変更
画像をクリックすると背景画像がその画像に変わるJavascriptサンプルです。
よく素材屋さんなどで見かけると思います。
同様のサンプルはDHTMLサンプルにもあります。
このサンプルはJavascriptを使用していますので細かな調整ができます。
◆ 実行サンプル
| ↓通常の設定で背景画像を指定している場合の実行サンプル↓ | |||
|---|---|---|---|
;) |
;) |
;) |
;) |
| ↓スタイル属性で背景画像を指定している場合の実行サンプル↓ | |||
;) |
;) |
;) |
;) |
| 略号の説明 | 動作が確認できたブラウザ |
|---|---|
| IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53 |
- 【記述サンプル1】
-
背景画像の指定が次のような通常指定の場合。
<body background="image1.jpg">
function bg_chg(setimg){ document.body.background = setimg; }
まず、テキストエディタなどを使用し、次の記述を「bg_chg.js」というファイル名で保存します。
<script type="text/javascript" src="bg_chgj.js"></script>
次に、HEAD句内にJavascriptの呼び出しを次のように記述します。
次にそれぞれの画像に次のようなリンク「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+")"; }