- ベストアンサー
画像をクリックして背景を変化させる方法
タイトルの通りなのですが、画像をクリックして背景を変化させる方法について教えて下さい。 変化させたい画像は１つずつURLを作らなければならないのですか？ 分かる方がいたら教えて下さい。
- tikako3388
- お礼率56% (26/46)
- HTML
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
> クリックする画像は表示されるのですが、クリックしても背景が出てきません。 背景画像は、どこに保存されていますか？ 調べてみてください。No.4 の僕の回答は、HTML ファイルと背景画像が同じフォルダに入っていることを前提としていましたので（説明が足りなくてすみませんでした）。 たとえば、背景画像 back.gif が同じフォルダ内の「images」というフォルダに入っているのなら、 <img src="image.gif" onclick="bgImgChange('images/back.gif')"> とする必要があります。
その他の回答 (4)
> 上のソースのbgImgChange(pal)の部分のpalの部分にも画像のファイル名を入れるのですか？ いいえ、そこには入れません。 もう一度、話を整理して回答させていただきます。 先ほどの例と同じく、 image.gif をクリックすると背景画像が back.gif に変更されるようにするには、以下の手順で記述します。 1. まず、ソースの <head> と </head> の間に、↓これを記述します。 <script type="text/javascript"> <!-- function bgImgChange(pal) { document.body.style.background = "url(" + pal+ ")"; } // --> </script> 2. image.gif を表示させたい位置（<body>～</body> 間のどこか）に、↓これを記述します。 <img src="image.gif" onclick="bgImgChange('back.gif')"> 以上です。 画像を増やしていきたい場合は、 2 の手順を繰り返してください。 要するに、画像を増やすときは、 <img src="クリックする画像ファイル名" onclick="bgImgChange('クリック後に表示する背景画像ファイル名')"> のように記述すればいいわけです。
> 画像ファイル名というのは、どのようにして調べるのですか？ 画像ファイル名というのは、変更する背景画像のファイル名です。 たとえば、 image.gif をクリックして背景画像を back.gif に変更したければ、↓このように記述します。 <img src="images.gif" onclick="bgImgChange('back.gif')">
補足
やってみたんですけど、画像がうまく表示されません。 上のソースのbgImgChange(pal)の部分のpalの部分にも画像のファイル名を入れるのですか？ 普通htmlを入力したら色がつきますよね？ でもそのままでやってみたら、 <!-- function bgImgChange(pal) { document.body.style.background = "url(" + pal+ ")"; } // --> の部分だけ黒文字のままなんです。 もし、画像ファイル名をいれるなら、1つの背景ごとに上のソースをペーストするのですか？
- bita_2005
- ベストアンサー率42% (6/14)
JavaScriptを使わないやり方でこんなのもあります。 ただし、IE5.5以上限定のようです。
補足
ソースのどこからどこまでをコピーすれば良いのですか？どのソースがどのようなソースなのか、どこに何を入れれば良いのか説明していただけると嬉しいです。
その必要はありません。 JavaScript を使えば、簡単に背景画像を変化させることができます。 下記 URL を参考にしてください。
補足
各 <img> では、onclick イベントハンドラの値に「bgImgChange('画像ファイル名')」というかたちで、JavaScript のファンクション名と画像ファイル名（パス）を指定します。 と書いてありましたが、JavaScript のファンクション名と画像ファイル名（パス）が分かりません。 画像ファイル名というのは、どのようにして調べるのですか？
補足
くわしく説明して下さってありがとうございます。 クリックする画像は表示されるのですが、クリックしても背景が出てきません。 私はｈｐビルダーのバージョン７を使っているのですが、これが原因なんでしょうか？