「リンクにマウスオーバーするとポップアップで説明が表示される」ができません

解決済

質問者：yuta_2007
質問日時：2007/09/27 19:17
回答数：4件

はじめまして。
Javascriptは初心者でわからないことがありましたので、どなたかお答えいただけないでしょうか？

MdNから出版されている、プロとして恥ずかしくないJavascriptの大原則の中で紹介されている「リンクにマウスオーバーするとポップアップで説明が表示される」を入力したのですが、まったく再現できません。

<link href="css/design.css" rel="stylesheet" type="text/css" media="all">
<style type="text/css" media="all"></style>

<script type="text/javascript"></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>

この様に記述したのですがどこが間違っているのかわかりません。
仕事で使わなければならず非常に困っています。
宜しくお願いします。

通報する

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

質問の本文を隠す

回答 (4件)

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

No.4ベストアンサー

回答者： himajin100000
回答日時：2007/09/27 21:41

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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">


<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>

<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>

この回答への補足

ご回答ありがとうございます！
完璧です！ありがとうございました。
これで今夜眠れます・・。
本当に助かりました。

補足日時：2007/09/27 22:22

通報する

- 0
- 件

通報する

この回答へのお礼

助かりました。
ご親切な回答ありがとうございました。

通報する

お礼日時：2007/09/27 22:24

No.3

回答者： STICKY2006
回答日時：2007/09/27 20:00

こんちは。

ちょっと情報が少ないですかね。。。

とりあえず、本はちゃんと読みましたか？？

>>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でも再現できないとまずいんですが・・・。

補足日時：2007/09/27 20:07

通報する

- 0
- 件

通報する

No.2

回答者： hkd9001
回答日時：2007/09/27 19:53

こんばんは。

明らかに「これは？」という点だけを挙げてみます。
ご参考にしてください：

「 document.getElementByld(strID).style.display ="; 」
「 strlD="; 」

…ダブルクォーテーション（ " ）が１コだけなのは変ですね。

<a href="index.html" onMouseOver="strID='Products'; OnScreenHelp(event.pageX.event.pageY);" onMouseOut="OffScreenHelp()">Products</a>

…「 pageX 」と「 event 」の間のピリオド ( . ) は、正しくはカンマ ( , ) なのでは？

これで解決につながればいいのですが。