• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：現在、ホームページの制作をしております。親切な方、ご伝授下さい。）

ホームページ制作でマウスオンで説明文が出るようにしたい

このQ&Aのポイント
  • ホームページ制作でマウスオンで説明文が出るようにしたい
  • イラスト画像に複数のリンクを張っているホームページを制作しています
  • マウスオンで吹き出しと一緒に説明文を表示する方法について教えてください
  • HTML
  • 回答数7
  • ありがとう数2

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.7

今ご提示されている内容をあまりいじらず、整理して書くと下のように なります。SCRIPTの位置はこの場合どこでもいいのですが、<HEAD>部に 入れました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"></style> <script type="text/javascript" charset="utf-8"> <!-- function A() { alert('クリックされた時の処理'); return false; } function B(m_id,f){ document.getElementById(m_id).style.display = f?'block':'none'; document.getElementById(m_id).style.border = f?'solid 1px black':'none 0px black'; } // --> </script> </head> <body> <div class="blogbody"> <font size="1">トップページ</font><br> <div style="position:relative"> <img src="image/yahagi.png" width="510" height="641" border="0" usemap="#UserMapName"> <map name="UserMapName"> <area shape="circle" coords="157,324,7" href="samantha/index-samantha.html" target="_self" title="パッチワーク" /> <area shape="circle" coords="190,307,7" href="taxi/index-taxi.html" target="_self" title="タクシー" /> <area shape="circle" coords="190,323,7" href="masuda/index-masuda.html" target="_self" title="本店" /> <area shape="circle" coords="63,361,8" href="mimi/index-mimi.html" target="_self" title="オリジナルメニュー満載" /> <area shape="rect" coords="10,10,50,50" href="#" onclick="return A()" onmouseover="B('mes',true)" onmouseout="B('mes')"> </map> <div id="mes" style="width:12em;background:##999999;display:none;position:absolute;top:25px;left:65px;"> <font color="#999999"> <img src="image/york20.png"> zzzzzzzz </font> </div> </div> </div> </body> </html> SCRIPTで使っているfunction B(m_id, f){ document.getElementById(m_id).style.display = f?'block':'none'; } の使い方、理解できてますよねえ、 onmouseover="B('mes',true);"で呼ばれた時 <div id="mes"> ------ </div> のDIV要素が表示(display:block)され、onmouseout="B('mes',false);"で呼ばれた時(display:none)されるという意味です。 それから、今回あえて手を加えていませんが、STYLE属性はなるべく CSSで定義した方がすっきりして、後々わかりやすいですよ。

daddydo
質問者

お礼

yyr446 さん 本当にありがとうございます。 これを参考に、今度は、作成中のサイトに適応するべく一度努力してみます。 一先ず、今まで頂いた答えにお礼です。 皆さん、本当にありがとうございました。

その他の回答 (6)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.6

念のための補足 MAPをかけてる<img>部分の外側にも<DIV>を作って <div style="position:relative"> <img src="image/yahagi.png" usemap="#UserMapName"> <div id="mes" style="width:12em;background:##999999;display:none;position:absolute;top:25px;left:65px;"> <font color="#999999"> <img src="image/york20.png"> zzzzzzzz </font> </div> とした方が、吹き出しがずれないので、よさげかと．．．

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.5

No.4の補足してもらった内容で、マウスオーバーした時zzzzzzzzと画像は表示されるはずです。もしかして、 <area shape="rect" coords="10,10,50,50" href="#" onclick="return A()" onmouseover="B('mes',true)" onmouseout="B('mes')"> のそばに、吹き出しのように表示したいとの要望ですか？ それなら、簡易的ですが、 javascriptは function B(m_id, f) { document.getElementById(m_id).style.display = f?'block':'none'; document.getElementById(m_id).style.border = f?'solid 1px black':'solid 0px black'; } にして、div id="mes"のstyle属性に <div id="mes" style="width:12em;background:##999999;display:none;position:absolute;top:50px;left:50px;"> のようにして、絶対位置をつけちゃいます。 質問内容がちがうのかなあ．．．

daddydo
質問者

補足

皆さん、ありがとうございます。 改めて質問に戻りますと、 現在、トップページには、地図のイラストがございます。 そこには各ショップが◎マークとして、描かれています。 その◎印一つ一つに、リンクが張ってあり、詳細ページに 飛べる様にしていますが、同時にマウスオンで 吹き出しで説明１文と画像一つが見れると良いな、と思っています。 その際に、序でながら、吹き出しのサイズの調整も出来ると良いのですが。。 そこで、スクリプト関係を頂いているのですが、 実際に、頂いている様なスクリプトなどをどの様に 配置すれば、稼働するのでしょうか？ 今地図の◎印の辺りのhtmlは；（もしくは全文が見えないと難しいですか？） <div class="blogbody"> <font size="1">トップページ</font><br> <img src="img/main.map.jpg" width="510" height="641" border="0" usemap="#Map2" /> <map name="Map2" id="Map2"> <area shape="circle" coords="157,324,7" href="samantha/index-samantha.html" target="_self" title="パッチワーク" /> <area shape="circle" coords="190,307,7" href="taxi/index-taxi.html" target="_self" title="タクシー" /> <area shape="circle" coords="190,323,7" href="masuda/index-masuda.html" target="_self" title="本店" /> <area shape="circle" coords="63,361,8" href="mimi/index-mimi.html" target="_self" title="オリジナルメニュー満載" /> </map> </div>

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.4

No.3の補足回答を見て思ったのですが、 単純にonmouseover="B('mes',true)"に対して function B(m_id, f) { document.getElementById(m_id).style.display = f?'block':'none'; } なら、id="mes"がセットされている要素を探して、あるいは作って 中身にｚｚｚｚとか<img src="...">を書けばよさげですが 関数名から察するに、もっと高度なクラス化されたライブラリーの 一部又は全部をコピーしているとしたら、おもいどおりにいかないかも？ 取り越し苦労かもしれませんが．．．

daddydo
質問者

補足

yyr446 さん、度々ありがとうございます。 ２度手間、恐縮です。原文の全ては； <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> <!-- function A() { alert('クリックされた時の処理'); return false; } function B(m_id, f) { document.getElementById(m_id).style.display = f?'block':'none'; } //--> </script> </head> <body> <img src="002.jpg" usemap="#UserMapName"> <div id="mes" style="width:12em; background:##999999; display:none;"> <font color="#999999"><img src="img/air.gif"> zzzzzzzz</font></div> <map name="UserMapName"> <area shape="rect" coords="10,10,50,50" href="#" onclick="return A()" onmouseover="B('mes',true)" onmouseout="B('mes')"> </map> </body> </html>

  • 15mm
  • ベストアンサー率65% (65/100)
回答No.3

onmouseover="B('mes',true)" が「マウスオンで説明文が出る」の部分なんですが、“B”の内容がわかりませんので指示が出せません。 <script>～</script> となっているところを探し、中身をすべてコピーし、補足として提示するか、 <script src="～"> となっているところもあれば、～の部分のファイルの内容をすべてコピーし提示。 （http://～の場合はそのままURLを書けばいいですが、とにかくファイル名ではなくファイルの中身を） 以上をしていただくと、解決の兆しが。 因に、個人情報が含まれている場合は、適宜伏せましょう。

daddydo
質問者

補足

15mm さん、ありがとうございます。 先ず、この"スクリプト"？は引用してきたもので、元のスクリプトを見直したところ； <script type="text/javascript"> <!-- function A() { alert('クリックされた時の処理'); return false; } function B(m_id, f) { document.getElementById(m_id).style.display = f?'block':'none'; } //--> </script>

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

納期がせまってせまっているということで、 Javascriptライブラリーを使用してはどうですか？ ホームページ素人という事なら、ちょっと難しいかもしれませんが、 いちから作るよりはたやすいはずです。 －BeautyTips(自在に吹き出しを作るjQueryのプラグインです。） http://plugins.jquery.com/project/bt http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html ※jQueryも必用です。 http://docs.jquery.com/Downloading_jQuery

回答No.1

＞何故か上手くいきません。 具体的に『何が』『どのように』うまくいかないのでしょう？ そもそも JavaScript のコードが提示されていないので、うまくいかない理由など誰にも解るはずがありません。 ＞専門用語などが判りませんので、ご了承下さい。 ＞まことに恐縮ですが、ホームページ素人です。 でしたら難しい事はあきらめて、この程度でお茶を濁しては如何でしょうか？ <area shape="circle" coords="190,307,7" href="taxi/index-taxi.html" target="_self" title="zzzzzz" />

daddydo
質問者

補足

fujitomoさん、早速の返答ありがとうございました。また、単刀直入な解決法も同じくありがとうございます。 どうにか、もう一点の質問、この吹き出しに画像を加えるにはどうすれば良いか、何方か教えて頂けないでしょうか？　宜しくお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する