onmouseoverでリンク先の説明を表示する方法



0   名前:  : 2006/08/22(火) 09:35  ID:OjcQVSmF
以前HTML質問版で同じ質問をし、JacascriptかCSSの質問版の内容だと指摘されたので、
こちらに書き込みさせていただきます。

初めまして、私のHPでonmouseoverでリンク先の説明を表示させています。
IEではきちんとマウスをのせると文字が変わるのに、Firefoxで表示すると、文字が変わりません。
Firefoxでonmouseoverさせたい場合はどのようにHTMLを記入したらいいのでしょうか?

Headの中に
<script language="javascript"><!--
function SetWord(txtMsg)
{
parent.menu.d1.innerText=txtMsg;
}
//--></script>
を書いて

文字を変えたいところに
<div class="link" id="d1">リンク先説明</div>

マウスオーバーさせるリンクのところに
onmouseover="javascript:SetWord('管理人のプロフィールです')" onMouseOut="javascript:SetWord('リンク先説明');"
を書いています。

1   名前: 牛若 : 2006/08/22(火) 09:35  ID:WV5hpSZU
innerTextがIE専用だからですね。

DOM的には問題ありますが、一般的解決法は、innerTextの代わりにinnerHTMLを使う。

2   名前:  : 2006/08/22(火) 09:35  ID:OjcQVSmF
>牛若さん
回答ありがとうございます

<script language="javascript"><!--
function SetWord(txtMsg)
{
parent.menu.d1.innerText=txtMsg;
}
//--></script>



<script language="javascript"><!--
function SetWord(txtMsg)
{
parent.menu.d1.innerHTML=txtMsg;
}
//--></script>

にしたのですが、IEではマウスオーバーできるのに


いっこうにFirefoxでは動きませんでした。

3   名前: sevi- : 2006/08/22(火) 09:35  ID:A5/hQl8Z
まあこうすれば動くとは思うが,

function SetWord(txtMsg)
{
	parent.menu.document.getElementById("d1").innerHTML="<span>"+txtMsg+"</span>";
}

個人的には以下のようにした方が良いと思う.

function SetWord(txtMsg)
{
	var ele_target = parent.menu.document.getElementById("d1");
	while(ele_target.hasChildNodes())
		ele_target.removeChild(ele_target.lastChild);
	ele_target.appendChild(ele_target.ownerDocument.createTextNode(txtMsg));
}


sevi-

4   名前:  : 2006/08/22(火) 09:35  ID:OjcQVSmF
sevi-さん

ありがとうございました。

無事にFirefoxででもマウスオーバーがちゃんと動きました

一覧へ戻る