掲示板/総合質問板/過去ログ/一覧/ イメージMAPについて教えて下さい１。

0 名前：テツ： 2004/10/18 12:54: はじめまして。テツと申します。
イメージマップでリンクさせたいと思い以下の記述をしましたが上手くいきません。
初心者で言い表し方がよく分からないのですがMAPの中にさらにMAPを入れて記述したりできるのでしょうか？
イメージはこんな感じです。
ボタン一覧→（ボタン１・ボタン２・ボタン３）と並んでいて
マウスをボタン１に乗せると→（ボタン１の１・ボタン１の２・ボタン１の３）と画像が切り替わりリンクできて
マウスをボタン２に乗せると→（ボタン２の１・ボタン２の２・ボタン２の３）・・・
という感じでリンクボタンを作りたいのです。

以下の記述でやってみたのですがボタン１は上手くいきましたが同じようにボタン２でやると同じ座標（例えばcoords="57,16,116,25"）の
リンク先がボタン１の２方を優先してしまいボタン２の１を表示してくれません。
この場合ボタン２にマウスを乗せると画像はでるのですがボタン１の２の座標にマウスを持っていくと画像も出てないのにリンクできてしまいます。

onMouse・・・にnameは付けれないのでしょうか？nameかIdなんかで指定したら上手く機能するような感じがします？？
この場合スタイルシートかJavaスクリプトで（ボタン１・ボタン２・ボタン３）の画像を先に指定したら上手くいくのでしょうか？
またスタイルシートかJavaスクリプトで画像の指定は出来るのでしょうか。
img1.src={ボタン一覧.gif；}←例えばこんな感じで・・

もし別の方法があれば教えて下さい。

表現が悪くて申し訳ありませんがご教授願います。

文字数の制限があり次スレッドにのせました。

1 名前：テツ： 2004/10/18 14:07: 間違いあればお許しください・・
<td>
<img src="ボタン一覧.gif" width="281" height="26" border="0" usemap="#あ" name="ボタン">
<map name="あ">
<area shape="rect" coords="1,0,55,11" href="" onMouseOver="ボタン.src='ボタン１'" usemap="#b１" name="b１" onMouseOut="ボタン.src='.gif'"ALT="ボタン１">
<map name="b１">
<area shape="rect" coords="1,16,55,25" href="１.html" target="_top" onMouseOver="b１.src='ボタン１の１.gif'"ALT="ボタン１の１">
<area shape="rect" coords="57,16,111,25" href="２.html" target="_top" onMouseOver="b１.src='ボタン１の２.gif'"ALT="ボタン１の２">
<area shape="rect" coords="113,16,167,25" href="３.html" target="_top" onMouseOver="b１.src='ボタン１の３.gif'"ALT="ボタン１の３">
</map>
<area shape="rect" coords="57,0,111,11" href="" onMouseOver="ボタン.src='ボタン２.gif'" usemap="#b２" name="b２" ALT="ボタン２">
<map name="b２">
<area shape="rect" coords="57,16,116,25" href="４.html" target="_top" onMouseOver="b２.src='ボタン２の１.gif'" ALT="ボタン２の１">
・
・
</map>
</map>

長々とすみませんがよろしくお願いします。

2 名前： Sinryow ： 2004/10/20 00:47 ［URL］: <map>の入れ子構造は多分無理だと思います。
私も別な方法を考えてみます。

＜余談＞（というか重要）
１）ファイル名や，usemap・nameなどの値には全角文字は使わないようにしましょう。
２）<area ・・・ onMouseOver="～"ALT="～"> のところは <area ・・・ onMouseOver="～" ALT="～"> のようにonMouseOverとALTの間にスペースを入れましょう。

3 名前： むむりく ： 2004/10/20 02:03: ファイル名や usemap は URI なので全角文字は使えませんが、
name は CDATA なので、どうなのでしょう？（あくまでもHTMLの場合ですが）

4 名前：テツ： 2004/10/20 20:01: ご教授ありがとうございます。
そうですか・・ムリなんですね・・・。
みなさんが見やすいようにと思い全角で記入しました・・
実際の記述nameは半角英数字で入力しております。
いろいろ探し回ったのですが”ＴＩＭＥ”というので試しております。
しかし絶対位置？が決められててページ全体が不恰好になってしまうんです。
これプルダウンメニューって言うんですね。（知らなかった・・；）
題名は”画像を使ったプルダウンメニューの作り方”の方が正しいですね。
Javaなんかで出来ればいいなと思い只今模索中です。

5 名前： U D ： 2004/10/20 21:22: 現在JavaScriptとCSSを使って、作っています。
いまいち理解できなかった部分を除き、ほとんど出来ました。
ということで少し聞きたいことが･･･

> マウスをボタン１に乗せると→（ボタン１の１・ボタン１の２・ボタン１の３）と画像が切り替わりリンクできて

ボタンは通常押すためにあるようなものですが、"乗せる"と新たにイメージマップが出てくるんですか？
それとも、"押す"と新たにイメージマップが出てくるんですか？
(どちらでも可能だが念のため)
それと、通常出しっぱなしというのはおかしいですよね。プルダウンメニューだってそうですよね。
どういうタイミングで、新たに出た方のイメージマップを隠せばいいんですか？

ちなみに今の暫定的な構造は、
イメージマップ(1)があり、その中のボタンを押すとJavaScriptを呼び出し、
あらかじめ用意してあった非表示のイメージマップ(2)を、非表示から表示に切り替える。。。
(座標と大きさをCSSでイメージマップ(1)のボタンの大きさにあわせれば、ボタンがイメージマップ(2)になったようになります。)

という感じですが、どうでしょうか？(あとは質問の答えを待つだけです)

ついでに、”TIME”とは「HTML+TIME」のことですね。

6 名前：テツ： 2004/10/21 14:30: ＵＤ様ありがとうございます。
内容の不備申し訳ありません。もう一度イメージをお伝えします。

[ボタン１][ボタン２][ボタン３]・・・（すべて画像）
で
ボタン１にonMouseすると

[ボタン１]←別画像で（背景色を変えたボタン１画像）
[ボタンあ][ボタンい][ボタンう]←あ、い、うは横並びで出したいです。

とメニューが出現し、clickですべてにリンクできて
Mouse Outで元の[ボタン１]に戻り
ボタン２にonMouseすると・・・というイメージです。

図で書きますと

□□□□□・・・（左端のボタンにonMouse）
↓
■□□□□・・・（■からMouseOutで□ならびにもどる）
■■■←ココ

□□□□□・・・（左から３番目のボタンにonMouse）
↓
□□■□□・・・
　　■■■
　　↑
　　ココ
それでお聞きしたいのが”ココ”のボタン位置がカブってしまいますが
この処理がどうにかなるものなのでしょうか？

それと"TIME"は"HTML+TIME"でございます。

7 名前： U D ： 2004/10/22 20:42: 遅くなってすみません。色々忙しい身なので･･･

> [ボタン１][ボタン２][ボタン３]・・・（すべて画像）
すべて画像という表現が少しひっかかったので…
「ボタン」といっているのでイメージマップ(ある画像の中に3つのボタンを作る、ということ)だと思うんですが、
単なる画像(独立した画像3つ、ということ)を使うんですか？（いえ別にどちらでも支障ないですが）

> それでお聞きしたいのが”ココ”のボタン位置がカブってしまいますが
了解。つまり、選択した□のちょうど下から■を表示させたいんですよね。

> それと"TIME"は"HTML+TIME"でございます。
おお。やはりそうでしたか。
印象どうでしたか？これまでの色んなのとくらべて。
（実はまだやったことない）

それじゃそこのとこ調整してきます。。。あっ、
明日は忙くなりそうなので、少し時間かかるかもしれません。

8 名前： U D ： 2004/10/23 18:58: ●<HEAD>～</HEAD>に、
<SCRIPT type="text/javascript">

</script>

●<BODY>～</BODY>に、
<div style="position:relative;">

<img src="image/sample.bmp" name="test1" usemap="#t1" border="0" width="400" height="400">
<map name="t1">

<area shape="rect" onMouseover="visi('img1')" coords="0,5,125,63" href="#">
<area shape="rect" onMouseover="visi('img2')" coords="130,5,255,63" href="#">
</map>

<img ID="img1" usemap="#t2" style="visibility:hidden;position:absolute;left:0;top:64;" width="150" height="64" border="0" src="">
<map name="t2">
<area shape="rect" coords="5,5,63,63" href="">
</map>
<img ID="img2" usemap="#t3" style="visibility:hidden;position:absolute;left:130;top:64;" width="150" height="64" border="0" src="">
<map name="t3">
<area shape="rect" coords="5,5,63,63" href="">
</map>
</div>

9 名前： U D ： 2004/10/23 18:58: （続き）

最初に言っていたMAPの入れ子構造のような感じにしました。
要望の点と何か違ったり、うまく動作しなかったら言ってください。

●説明
表示･非表示で全てやっています。マウスが乗ったら表示、という感じ。
マウスが外れたら非表示、でも良かったんですが、
イメージマップのボタンの境目などでマウスが外れたと判断されてしまうので、
他のボタンにマウスを乗せたら前のを非表示にして、新たに表示するようにしました。

それと、>>6で言う□の下に表示させるために、CSS(スタイルシート)使ってます。
これは自分で調整してください。

例えば、
<area shape="rect" onMouseover="visi('img4')" coords="0,5,100,77" href="#">
のボタンにマウスを乗せたときに表示させたい画像('img4')の座標を指定するのに、
<img ID="img4" usemap="#t5" style="visibility:hidden;position:absolute;left:0;top:77;" src="～">
では style="" の中の left:0;top:77; (左から'0'上から'77')と指定しています。
⇒coords は 0,5,100,77 だから、表示させたい場所は、左から0上から77あたりになります。

うーん、説明が下手かも。。。
あ、不満があったらどんどん言ってください。(笑

10 名前：テツ： 2004/10/24 12:35: ＵＤ様
お忙しい中本当にありがとうございました！
早速使用させていただきます。

また結果ご報告いたします。

すべて画像という表現が少しひっかかったので…
＞またまた表現が悪くてすみませんでした。
例えば400×200のセピア調の画像の上にヨコ一列に並べたボタン画像を
張りつけた画像を作りこの画像をページで開きます。
MAPで命令させたいのはこの400×200の画像自体です。
ですからＵＤさんの言うとおりですね・・・

印象どうでしたか？これまでの色んなのとくらべて。
＞素人の印象ですが；私自身OnMouseで画像や何かを変えるのが好みでして
（ＴＩＭＥロスの点から）いままで使用してきたものと比べて同じような事を
"HTML+TIME”でやろうとしたらまず画像が軽くて済みました。
またタグの簡易性、ここで質問している入れ子の中に入れ子さらに入れ子みたいな事
ができて複雑な？Javaを組むより（組めないけど・・）簡単と言う印象でした。
しかし位置設定がどうにも・・・と言ったところです。