モテ期を経験した方いらっしゃいますか？

onmouseoverの表示切り替えが上手くいかない

解決済

  • 質問者：george2000
  • 質問日時：
  • 回答数：1件

onmouseoverを使って、隠していた＜DIV＞を表示させたいと思っています。
＜li＞にマウスが重なったら、その直前に表示させていた＜DIV＞を隠した上で、idに対応する＜DIV＞を表示させ、さらに＜H2＞に重なった場合にも隠す、という流れの処理を考えています。

firefoxのエラーコンソールでは「descriptionw0 is not defined」となって、動作しません。IEでもエラーになります。
どこかでミスをしてはずなのですが、どうやっても上手くできないので、知恵を貸していただけないでしょうか。よろしくお願いします。

--------------------------
javascript
---------------------------
<script language="javascript">
<!--
var target = null;
function mOver(t){
if(target!=null){
document.getElementByID(target).style.display = 'none';
}
document.getElementByID(t).style.display = 'block';
target = t;
}
function mOut(){
if(target!=null){
document.getElementByID(target).style.display = 'none';
}
target=null;
}
//-->
</script>

----------------------------
HTML部分
----------------------------
<div class="part">
<h2 class="title" onMouseover="mOut()">＊＊＊</h2>
<ul class="article">
<li onMouseover="mOver(descriptionw0)"><a href="#">ＡＡＡ</a></li>
<li onMouseover="mOver(descriptionw1)"><a href="#">ＢＢＢ</a></li>
</ul>
<div class="description" id="descriptionw0" style="display:none;">ａａａ</div>
<div class="description" id="descriptionw1" style="display:none;">ｂｂｂ</div>
</div>

通報する

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

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

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

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Q3771048 TestCase 1</title>
<script type="text/javascript">
//<![CDATA[
//個人的には<!--によるコメントアウト嫌いです。デクリメント書けないし。
//その他、Ecmascriptを理解しないUAには何も補足が表示されないが
//それはいいのか？
//(当方環境の都合上，IEではテストしてない)

var target = null;
function mOver(t){
if(target!=null){
document.getElementById(target).style.display = 'none'; /* Ecmascriptは大文字小文字を区別する。正しくはgetElementById*/
}
document.getElementById(t).style.display = 'block';
target = t;
}
function mOut(){
if(target!=null){
document.getElementById(target).style.display = 'none';
}
target=null;
}
//]]>
</script>
</head>
<body>
<div class="part">
<h2 class="title" onmouseover="mOut();">＊＊＊</h2>
<ul class="article">
<li onmouseover="mOver('descriptionw0');"><a href="#">ＡＡＡ</a></li> <!-- 変数ではなく文字列なので 'で括る必要がある -->
<li onmouseover="mOver('descriptionw1');"><a href="#">ＢＢＢ</a></li>
</ul>
<div class="description" id="descriptionw0" style="display:none;">ａａａ</div>
<div class="description" id="descriptionw1" style="display:none;">ｂｂｂ</div>
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

himajin100000さん、回答ありがとうございます。
指摘された修正点を反映させたところ、IEとfirefoxで表示することができました。
ダブルクオテーションとシングルクオテーションの使い方を、きちんと理解できていませんでした。（getElementByIdは論外ですね。）
javascript未対応ブラウザについては別途CSSで対応したいと思います。
ずっとこの問題について悩んでいたので、スッキリしました。
本当にありがとうございました。

通報する
お礼日時：2008/02/13 20:57

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報