- ベストアンサー
「リンクにマウスオーバーするとポップアップで説明が表示される」ができません
はじめまして。 Javascriptは初心者でわからないことがありましたので、どなたかお答えいただけないでしょうか？ MdNから出版されている、プロとして恥ずかしくないJavascriptの大原則の中で紹介されている「リンクにマウスオーバーするとポップアップで説明が表示される」を入力したのですが、まったく再現できません。 <link href="css/design.css" rel="stylesheet" type="text/css" media="all"> <style type="text/css" media="all"><!-- .Help{ font-size:x-small; background-color:#eee8aa; color:#6666ff; position:absolute; left:0px; top:0px; padding:3px; border-color:#003399; border:solid; border:1px; } //--></style> <script type="text/javascript"><!-- function OnScreenHelp(x,y){ if(document.all){ document.getElementByld(strID).style.left = event.x + document.body.scrollLeft + 15; document.getElementByld(strID).style.top = event.y + document.body.scrollTop + 0; }else{ document.getElementByld(strID).style.left = x + 15; document.getElementByld(strID).style.top = y + 0; } document.getElementByld(strID).style.display ="; } function OffScreenHelp(){ document.getElementByld(strID).style.display='none'; strlD="; } //--></script> </head> <body> <span class="Help" style="display:none; z-index:1000" id="About">会社概要をご紹介します</span> <span class="Help" style="display:none; z-index:1000" id="products">最新情報を紹介します<img src="img/up.gif"></span> <h1> <a href="index.html" onMouseOver="strID='About'; OnScreenHelp(event.pageX,event.pageY);" onMouseOut="OffScreenHelp()">About</a> </h1> <h1> <a href="index.html" onMouseOver="strID='Products'; OnScreenHelp(event.pageX.event.pageY);" onMouseOut="OffScreenHelp()">Products</a> </h1> </body> この様に記述したのですがどこが間違っているのかわかりません。 仕事で使わなければならず非常に困っています。 宜しくお願いします。
- yuta_2007
- お礼率25% (1/4)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <title>Q3381972 TestCase 1</title> <link href="css/design.css" rel="stylesheet" type="text/css" media="all"> <!-- 俺はコメントアウト嫌いなのでどうせなら外部ファイルに分ける --> <!-- 今回は直すのが面倒なのでTransitional DTDで勘弁してください --> <style type="text/css" media="all"> .Help{ font-size:x-small; background-color:#eee8aa; color:#6666ff; position:absolute; left:0px; top:0px; padding:3px; border-color:#003399; border:solid; border:1px; } </style> <script type="text/javascript"> var strID; /* 変数宣言ないと落ち着かない*/ function OnScreenHelp(x,y){ if(document.all){ document.getElementById(strID).style.left = event.x + document.body.scrollLeft + 15; document.getElementById(strID).style.top = event.y + document.body.scrollTop + 0; }else{ /* Minefieldでしか確認してないが，各プロパティには単位が必要。IEの方の調査は他回答者に譲る。 alertで表示させて調べたがxやyは単位が付かないようだ */ document.getElementById(strID).style.left = x + 15 + "px" ; document.getElementById(strID).style.top = y + 0 + "px"; } document.getElementById(strID).style.display =""; /* 指摘のあった引用符を修正 */ } function OffScreenHelp(){ document.getElementById(strID).style.display='none'; strlD=""; /* 指摘のあった引用符を修正 */ } /* 何故かIdじゃなくてldになっているので修正。*/ </script> </head> <body> <span class="Help" style="display:none; z-index:1000" id="About">会社概要をご紹介します</span> <!-- XHTMLにおいては，idは大文字と小文字を区別する。HTMLは全て大文字として扱われるが， ブラウザがフォローしている products→Products --> <span class="Help" style="display:none; z-index:1000" id="Products">最新情報を紹介します<img src="img/up.gif"></span> <h1> <a href="index.html" onMouseOver="strID='About'; OnScreenHelp(event.pageX,event.pageY);" onMouseOut="OffScreenHelp()">About</a> </h1> <h1> <!-- ピリオドじゃなくてカンマ --> <a href="index.html" onMouseOver="strID='Products'; OnScreenHelp(event.pageX,event.pageY);" onMouseOut="OffScreenHelp()">Products</a> </h1> </body> </html>
その他の回答 (3)
- STICKY2006
- ベストアンサー率29% (1536/5269)
こんちは。 ちょっと情報が少ないですかね。。。 とりあえず、本はちゃんと読みましたか？？ >>OnScreenHelp(event.pageX,event.pageY) 「event」オブジェクトはIEでも存在しますが、「pageX」「pageY」プロパティは、IEでの動作は対応していないかと思います。 そもそも、開発の環境が、IEなのか、そのほかのブラウザなのかも分からないので明確な答えは出せないですが。。。 他には。。。 >>document.getElementByld(strID).style.display ="; ↓ document.getElementByld(strID).style.display =""; 「"」２つです。 >>strlD="; ↓ strlD=""; ここも同じく。 後は、自分も、動作させられる環境が整っていないので判別できません。
補足
ご回答ありがとうございます。 環境はMacでSafariです。 「"」が抜けていたのは修正できましたが、まだ表示されません。 WindowsのIEでも再現できないとまずいんですが・・・。
- hkd9001
- ベストアンサー率48% (99/204)
こんばんは。 明らかに「これは？」という点だけを挙げてみます。 ご参考にしてください： 「 document.getElementByld(strID).style.display ="; 」 「 strlD="; 」 …ダブルクォーテーション（ " ）が１コだけなのは変ですね。 <a href="index.html" onMouseOver="strID='Products'; OnScreenHelp(event.pageX.event.pageY);" onMouseOut="OffScreenHelp()">Products</a> …「 pageX 」と「 event 」の間のピリオド ( . ) は、正しくはカンマ ( , ) なのでは？ これで解決につながればいいのですが。
補足
ご回答ありがとうございます。 ダブルクォーテーション（ " ）が抜けていた部分と >「 pageX 」と「 event 」の間のピリオド ( . ) は、正しくはカンマ ( , ) なのでは？ ↑これも対処したのですが解決できません。
- calltella
- ベストアンサー率49% (317/635)
一行目の↓「css/design.css」ファイルパスは合ってますか？ <link href="css/design.css" rel="stylesheet" type="text/css" media="all">
補足
ご回答ありがとうございます。 ご指摘の部分は間違いありませんでした。
お礼
助かりました。 ご親切な回答ありがとうございました。
補足
ご回答ありがとうございます！ 完璧です！ありがとうございました。 これで今夜眠れます・・。 本当に助かりました。