掲示板/JavaScript質問板/過去ログ/一覧/ フレーム越しのマウスオーバーで複数の文字を変換する方法

0 名前：創： 2006/08/28（月） 09:06 ID:OjcQVSmF: 先日Firefoxでのマウスオーバーの動かし方を質問しました。

そのとき、教えてもらった

function SetWord(txtMsg)
{
parent.menu.document.getElementById("d1").innerHTML="<span>"+txtMsg+"</span>";
}
とうのでFirefox、IEでのフレーム越しのマウスオーバーは可能になりました。

そこで、今、一つのマウスオーバーでフレーム越しに複数の文字を変換したいなと考えています。

今は

Javascriptに



<td align="center" bgcolor="#FFFFFF" width="100">
<a href="#" onmouseover="javascript:SetWord('出したい文字');" onMouseOut="javascript:SetWord('マウスを乗せたら意味はここにでます');">意味はここにでます</a>
</td>

とマウスオーバーする場所に書いて

フレーム越しのマウスオーバーさせたい場所に
<DIV id="definition">ここに文字がはいります</DIV><br>

としています。



のgetElementById("definition")の”definition”を変えて、新しいidを増やせば良いのかな？と思ったのですが、
うまくいきませんでした。

一つのマウスオーバー元から、フレーム越しに複数の文字を表示させるにはどうすれば良いのでしょうか？

よろしくお願いします。

1 名前： Pid ： 2006/08/28（月） 09:06 ID:J4isECb3: 「文字列の上書き」ではなく、「文字列の追加」を行えば良いのではないでしょうか（ヒント：+=）。

なお、

> ...... innerHTML="<span>"+txtMsg+"</span>";

HTML 文書にスクリプトを埋め込む場合、</ を直接書いてはいけません。つまり、<\/span> のように書かねばなりません（外部ファイルの場合は必要ありません）。面倒ですが一応ルールですので、覚えておいて下さいな。

もし余力があれば、innerHTML を使わない方法でもチャレンジしてみて下さい。

2 名前： Pid ： 2006/08/28（月） 09:06 ID:J4isECb3: あ、もう一つ。

> onmouseover="javascript:SetWord('出したい文字');"

onmouseover 属性の中は URI ではなくスクリプトデータなので、javascript: は無意味です（単なるラベルと認識されます）。

3 名前：創： 2006/08/28（月） 09:06 ID:OjcQVSmF: ヒントありがとうございました。

マウスオーバーの所に

<a href="#" onmouseover="Word('罪を犯す');Example('I commit suicide.');" onMouseOut="Word('マウスを乗せたら意味はここにでます');Example('ここに例文が出ます');">commit</a>

と追加し

Javascriptは外部ファイルにし



と書きました。

そして出したい先にもう一つ
<DIV id="example">ここに文字がはいります</DIV><br>
を加えてみたところ

うまく　二つとも　動かせました。
本当に　追加するだけで良かったのですね。
出来たとき、本当に嬉しかったです＾＾
すばらしいヒントありがとうございました。

それと、質問なのですが

Word('罪を犯す');Example('I commit suicide.');

で

Word('罪を犯す'); Example('I commit suicide.');

のように；とExampleは半角で離した方が良いのでしょうか？

あとinnerHTMLについてなのですが、

先日この掲示板の別のスレッド（http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=616 ）で、Firefoxででもマウスオーバーできないものかと、質問したところ、innerHTMLを勧められたので変えました。

そのほかに、Firefoxででもマウスオーバーは可能にできますか？

その時のスレッドでsevi-さんが

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));
}

が個人的には良いと仰っていましたが、短い方に今はしています。