ベストアンサー

画像にマウスをあわせると、文字が表示され、その文字をクリックすると別ページへ移動したい

2005/07/12 17:28

タイトル長くてすみません。まとめると、こんな感じです。 (1)画像の上にマウスをあわせる。 (2)その画像の上に文字列が表示される。 (3)文字列に対し、点滅などの書式設定を行なう。　（どの部分で設定できるか教えてください） (4)リンクされた文字列をクリックすると、別ページへジャンプする。という感じです。これを、クリッカブルマップ上で行なうのが理想ですが。。。私ではまったく手がでなかったので、よろしくお願いします。

baru_tan
お礼率90% (9/10)

JavaScript
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

taseki
ベストアンサー率66% (155/233)

2005/07/14 10:33 回答No.3

ANo.1 を書いた時点では、ご質問をよく理解できていませんでした。「リンクされた文字列」にも関わらずクリッカブルマップ？…と意味が解らなかったのですが、ようするに（１）は、正確には“画像の上にマウスを～”ではなくて“画像の特定エリアにマウスを～”ということだったんですね。それならkoutarou504さんの言うように、単にANo.1のソースのonmouseoverなどをareaに記述するだけでＯＫです。ちなみに、「出現する文字列」にもonmouseoverなどを記述している理由は、画像の上に重なった文字列の上にマウスを重ねると、下にある画像はマウスを認識しなくなってしまうためです。クリッカブルマップにして、「点滅などの書式設定」（これがまだ解らない…、そんな書式ないと思うので、とりあえずスクリプトで実現）を追加、さらにkoutarou504さんの「ブラウザの環境次第で～」を考慮して仮に動作しなくてもリンクは有効に、というサンプルを書きました。画像は仮のものです。 ---------------------------- <html> <head> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">  </SCRIPT> </head> <body> <div style="position:absolute; left:10px; top:10px;"> <img src="http://www.google.co.jp/intl/ja_jp/images/logo.gif" width="276" height="110" border="0" usemap="#map_01"> </div> <div id="AddText01" style="position:absolute; left:25px; top:40px; visibility:hidden;" onmouseover="Blink(AddText01, true)" onmouseout="Blink()"> <a href="page_01.html" style="text-decoration:none; font-weight:bold;">青ジー</a> </div> <div id="AddText02" style="position:absolute; left:125px; top:40px; visibility:hidden;" onmouseover="Blink(AddText02, true)" onmouseout="Blink()"> <a href="page_02.html" style="text-decoration:none; font-weight:bold;">黄オー</a> </div> <map name="map_01"> <area shape="circle" coords="35,45,32" alt="Menu 01" href="page_01.html" onmouseover="Blink(AddText01, true)" onmouseout="Blink()"> <area shape="circle" coords="140,50,20" alt="Menu 02" href="page_02.html" onmouseover="Blink(AddText02, true)" onmouseout="Blink()"> <area shape="default" alt="Menu XX" href="page_XX.html"> </map> <div id="test" style="position:absolute; left:10px; top:300px;">S</div> </body> </html> ---------------------------- Blink関数の使い方は、　Blink(elmTarget, BlinkOn) 　elmTarget：点滅させるエレメント　BlinkOn：trueで点滅オン/falseで点滅オフ

質問者

お礼 2005/07/14 11:55

説明不足で迷わせてしまってすみません。 tasekiさんのおっしゃるとおり、画像の特定エリアでのお話でした。（1）と（3）のソース、両方試させていただきます。本当に助かりました。ありがとうございます。

その他の回答 (2)

koutarou504
ベストアンサー率44% (182/407)

2005/07/14 04:20 回答No.2

未確認ですがクリッカブルマップなら AREA 要素の onmouseover, onmouseout で＃１の様な操作をすれば可能？かも・・・。ただ、文字は画像で代行・・・・。（文字が書いてあるだけの画像ファイルだって代用できますし・・・）というか、それ以外はクリッカブルマップ（MAP要素）でのご希望の動作は諦めて下さい。尚、＃１の方の案も私が提示している案も JavaScript, CSS を用いていますのでブラウザの環境次第で期待通りには動きません。利用者を限定するか使えなくても困らない機能でない限り、あきらめるのが無難です。（リンクですから、リンク先に行けなくなります・・・。）

質問者

お礼 2005/07/14 11:46

なるほど、画像の上に画像でリンクという手もあるんですね。動作環境ですが、一応IEを標準としています。ただ、私自身FireFoxを愛用しておりますので、なんとかこれにも対応させたいと思っております。画像の横にメニューがあるので、一応大丈夫と思っております。ありがとうございました。

taseki
ベストアンサー率66% (155/233)

2005/07/13 19:30 回答No.1

こういうことかな？ ------------------ <html> <body> <div style="position:absolute; left:10px; top:10px;"> <img src="image.gif" width="300" height="300" onmouseover="addtext.style.visibility='visible'" onmouseout="addtext.style.visibility='hidden'"> </div> <div id="addtext" style="position:absolute; left:100px; top:100px; visibility:hidden;" onmouseover="addtext.style.visibility='visible'" onmouseout="addtext.style.visibility='hidden'"> <a href="page1.html">ここをクリック</a> </div> </body> </html> ------------------ 画像ファイルやポジションは適宜調整してください。「点滅などの書式設定」というのが、ちょっと意味が解りませんでした。Aタグにスタイルを設定できます。

質問者

お礼 2005/07/14 11:43

説明が不十分にもかかわらず、ここまで作成していただいたことに感謝します。点滅などの書式設定というのは、画像の上に文字が表示されても、目立たないと思いますので、文字・背景色を変えたり、文字を点滅させたりといったスタイルを設定できるかな？と思ったのです。混乱させてすみませんでした。（３）のソースで早速試してみます。ありがとうございました。