- ベストアンサー
マウスをあてると画像が次々出る方法
うまく説明できないのですが、例えば「A」と言うスペースがあってそのまわりにカテゴリーが数個あったとします。 「A」には始めから画像が表示されているけれど、近くのカテゴリーにマウスをあてただけでそのカテゴリーに合った画像が「A」に表示され、また違うカテゴリーにあわせると「A」に違う画像が表示される。 このようなＨＰをたまに見かけるのですがどうしたら自分でも出来ますか？ 出来ればIBMのホームページビルダー6.5で方法があれば知りたいのですが、不可能ならソースでも、頑張って作って見たいと思います。 ヘタな説明ですみません。よろしくお願いします。
- futcchan
- お礼率86% (57/66)
- その他（プログラミング・開発）
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#3です。 以下の前提でコードを変えてみます。 ・「A」には最初から画像が表示されている ・カテゴリーの文字列の上にマウスカーソルを載せると画像が変化する ・マウスカーソルをカテゴリーの文字列から移動させると最初に表示されていた画像に戻る 細かい仕様があれば補足してください。 <HTML> <HEAD> <SCRIPT> orgSrc = new Array(); orgSrc["thumbnail"] = "origin.jpg"; function alter(id, src) { var obj = document.getElementById(id); if (obj != null) { obj.src = src; } } function restore(id) { var obj = document.getElementById(id); if (obj != null) { obj.src = orgSrc[id]; } } </SCRIPT> </HEAD> <BODY> <span onmouseover='alter("thumbnail", "sample1.jpg");' onmouseout='restore("thumbnail");'>この上にマウスを乗せるとsample1.jpgが表示されます</span><br> <span onmouseover='alter("thumbnail", "sample2.jpg");' onmouseout='restore("thumbnail");'>この上にマウスを乗せるとsample2.jpgが表示されます</span><br> <div> <image id="thumbnail" src="origin.jpg"> </div> </BODY> </HTML> 改造の際には、次の点に注意してください。 ・画像を表示させるIMGタグにはidを指定する（例：id="thumbnail"） ・画像を変化させる側のタグにはonmouseover='alter("IMGタグのID", "表示する画像のURL");'とonmouseout='restore("IMGタグのID");'を対で指定する ・<SCRIPT>要素の最初に、初期表示する画像をorgSrc["IMGタグのID"]="URL";の形で記述しておく ・idの値として指定している"thumbnail"は、ターゲットを識別するための名前、という以上の意味はないので、自由に変更してよい ・上のことさえ守れば、１つのページに複数回、このようなものを記述できる。但し、同じIDは使用しないこと。
その他の回答 (3)
- zzzzzz
- ベストアンサー率61% (70/113)
こういうことですか？ <HTML> <HEAD> <SCRIPT> function show(id, src) { var obj = document.getElementById(id); if (obj != null) { obj.src = src; obj.style.display = ""; } } function hide(id) { var obj = document.getElementById(id); if (obj != null) { obj.style.display = "none"; obj.src = ""; } } </SCRIPT> </HEAD> <BODY> <span onmouseover='show("thumbnail", "sample1.jpg");' onmouseout='hide("thumbnail");'>この上にマウスを乗せるとsample1.jpgが表示されます</span><br> <span onmouseover='show("thumbnail", "sample2.jpg");' onmouseout='hide("thumbnail");'>この上にマウスを乗せるとsample2.jpgが表示されます</span><br> <div> <image id="thumbnail" style="display:none;"> </div> </BODY> </HTML> sample1.jpgとsample2.jpgの部分を実在する画像ファイルのURLに置き換えて試してみてください。
補足
はい！そうです。ありがとうございます。 出来ました！！ ただ、表示される部分に、あらかじめ違う画像をはじめから入れておきたいのですが・・・。 表示されるとこって<image id="thumbnail" style="display:none;">の部分ですよね？ でもいじっちゃたらうまく作動しなくなってしまって、ダメでした。 お分かりになるようでしたら、教えていただきたいのですが・・・。図々しくてすみません。よろしくお願いします。
- fullow
- ベストアンサー率26% (69/264)
英語のページなんですが、下のリンクに行くと、futcchanさんが欲しがってたよう なタグが手にはいります。 下のリンクにとびますと、ページの半分あたりに「demo」としるされた ものがあります。その下にそのタグをつかったサンプルがあります。 そしてもうすこし下に「Directions 」とあります。その下のフォームボックスの 中のタグにですね、タグがあるのでコピペしてくださいな。 そのタグの変更のしかたは、<option>の中にある画像url をかえるだけです。 それじゃがんばってください！
お礼
そのサイトへ行ってみました。でも私の希望はクリックはしないでカーソルをカテゴリーの上に合わせただけで表示されるものがよかったので、（demoはクリックしないと替わりませんでした。）限りなーく近いのですがちょっと違っていました。 ですがこれから自分のHPを作るのに印象のあるトップページにしたいと思って聞いた質問だったので、非常に興味深く面白いサイトでした。 おかげ様で遊び心のあるサイトを作るのに便利に活用できそうです。 こんなサイトがあるなんて知りませんでした。ありがとうございます！！嬉しくなってきちゃいました。 （英語が？？？ですが頑張ります）
- Noy
- ベストアンサー率23% (56/235)
ソースが理解できるのであれば、そういうサイトのソースをみて、（右クリック→ソースの表示でできる。右クリック禁止のサイトなら、Alt→V→Cです。）それを参考にして、自分のホームページに組み込めばいいと思います。
お礼
ありがとうございます。そういった手もあるんですね。 でもソースに関してはまったくの素人で見よう見まねで、ここをいじったら作動しなくなっちゃったからこっちをいじってみようといったこわーいやり方です。（苦笑） ただ希望の作動法のサイトは昔見たものでどこのサイトだったか・・・？見つけ次第覗かせてもらおうと思います。
お礼
おかげさまで出来ました！出来ました！！何度もありがとうございます。 私にはちょっと難しくって時間がかかっちゃいましたが、出来て見ると意外と単純なとこでひっかっていたり・・・。とにかく想像していた動作が出来ました。 本当にありがとうございました。 でもすごいですよね、私には分けのわからない記号や命令？みたいのなお堅いだけのページがUPすると素敵なページになってしまうなんて！！ 商用（個人ですが）がらみなのでURLを掲載できないのが残念です。（まだどこの検索サイトにも未登録だけど）