マウスをあてると画像が次々出る方法

解決済

質問者：futcchan
質問日時：2002/05/17 23:47
回答数：4件

うまく説明できないのですが、例えば「A」と言うスペースがあってそのまわりにカテゴリーが数個あったとします。
「A」には始めから画像が表示されているけれど、近くのカテゴリーにマウスをあてただけでそのカテゴリーに合った画像が「A」に表示され、また違うカテゴリーにあわせると「A」に違う画像が表示される。
このようなＨＰをたまに見かけるのですがどうしたら自分でも出来ますか？
出来ればIBMのホームページビルダー6.5で方法があれば知りたいのですが、不可能ならソースでも、頑張って作って見たいと思います。
ヘタな説明ですみません。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： zzzzzz
回答日時：2002/05/19 07:43

#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は使用しないこと。

- 0
- 件

通報する

この回答へのお礼

おかげさまで出来ました！出来ました！！何度もありがとうございます。
私にはちょっと難しくって時間がかかっちゃいましたが、出来て見ると意外と単純なとこでひっかっていたり・・・。とにかく想像していた動作が出来ました。
本当にありがとうございました。
でもすごいですよね、私には分けのわからない記号や命令？みたいのなお堅いだけのページがUPすると素敵なページになってしまうなんて！！
商用（個人ですが）がらみなのでURLを掲載できないのが残念です。（まだどこの検索サイトにも未登録だけど）

通報する

お礼日時：2002/05/19 10:01

No.3

回答者： zzzzzz
回答日時：2002/05/18 19:44

こういうことですか？

<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;">の部分ですよね？
でもいじっちゃたらうまく作動しなくなってしまって、ダメでした。
お分かりになるようでしたら、教えていただきたいのですが・・・。図々しくてすみません。よろしくお願いします。

補足日時：2002/05/19 03:46

通報する

- 0
- 件

通報する

No.2

回答者： fullow
回答日時：2002/05/18 00:00

英語のページなんですが、下のリンクに行くと、futcchanさんが欲しがってたよう

なタグが手にはいります。

下のリンクにとびますと、ページの半分あたりに「demo」としるされた
ものがあります。その下にそのタグをつかったサンプルがあります。

そしてもうすこし下に「Directions 」とあります。その下のフォームボックスの
中のタグにですね、タグがあるのでコピペしてくださいな。
そのタグの変更のしかたは、<option>の中にある画像url をかえるだけです。

それじゃがんばってください！

参考URL：http://www.dynamicdrive.com/dynamicindex4/images …

- 0
- 件

通報する

この回答へのお礼

そのサイトへ行ってみました。でも私の希望はクリックはしないでカーソルをカテゴリーの上に合わせただけで表示されるものがよかったので、（demoはクリックしないと替わりませんでした。）限りなーく近いのですがちょっと違っていました。
ですがこれから自分のHPを作るのに印象のあるトップページにしたいと思って聞いた質問だったので、非常に興味深く面白いサイトでした。
おかげ様で遊び心のあるサイトを作るのに便利に活用できそうです。
こんなサイトがあるなんて知りませんでした。ありがとうございます！！嬉しくなってきちゃいました。
（英語が？？？ですが頑張ります）

通報する

お礼日時：2002/05/18 18:57

No.1

回答者： Noy
回答日時：2002/05/17 23:58

ソースが理解できるのであれば、そういうサイトのソースをみて、（右クリック→ソースの表示でできる。

右クリック禁止のサイトなら、Alt→V→Cです。）それを参考にして、自分のホームページに組み込めばいいと思います。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。そういった手もあるんですね。
でもソースに関してはまったくの素人で見よう見まねで、ここをいじったら作動しなくなっちゃったからこっちをいじってみようといったこわーいやり方です。（苦笑）
ただ希望の作動法のサイトは昔見たものでどこのサイトだったか・・・？見つけ次第覗かせてもらおうと思います。

通報する

お礼日時：2002/05/18 18:47

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！