画像の上にマウスが乗ったら別フレームのテキストフィールドに文字を表示する

解決済

質問者：rz2525
質問日時：2009/08/14 19:08
回答数：2件

まったくの素人です。
盆休みの宿題のごとく、下記に取り組んでいます。
下記では、同一フレームに、マウスの重なりによって表示が「１２３」から「ＡＢＣ］等に変わるのですが、この表示を別（例えば、上の）フレームに表示させたいのですが、どうすればよいでしょうか？
フレーム定義でueFrameを決めて、parent.ueFrame.document.....など
したのですが、駄目でした。
宜しくお願い致します。
<html>
<head>
<tilte></title>
<script language="JavaScript">
</script>
</head>
<body>
<a href="#" onMouseover="ltext('ABC')" onMouseout="ltext('123')">表示</a>
<a href="#" onMouseover="ltext('abc')" onMouseout="ltext('イロハ')">ひょうじ</a>
</body>
<html>

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2ベストアンサー

回答者： yambejp
回答日時：2009/08/15 13:03

フレーム自体があまりよい仕組みではないのでなんですが・・・

提示されている方法でできると思いますが・・・

//main.htm
<frameset rows="50%,*">
<frame name="ueFrame" src="ue.htm">
<frame name="sitaFrame" src="sita.htm">
</frameset>

//ue.htm
<form name="myForm">
<input type="text" name="obox">
</form>

//sita.htm
<script>
function ltext(s){
parent.ueFrame.document.myForm.obox.value=s;
}
</script>
<a href="#" onMouseover="ltext('ABC')" onMouseout="ltext('123')">表示</a>
<a href="#" onMouseover="ltext('abc')" onMouseout="ltext('イロハ')">ひょうじ</a>

オブジェクトをnameで管理したりするのもお勧めできませんが、
とりあえず動くと思います

- 0
- 件

通報する

この回答へのお礼

解りやすい回答をありがとうございます。
表示できました。さっそく、該当ページの改造を始めてみます。

通報する

お礼日時：2009/08/15 17:19

No.1

回答者： himajin100000
回答日時：2009/08/14 22:32

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Q5207243 TestCase 1</title>
</head>
<frameset cols="50%,50%">
<frame src="Q5207243-2.html" id="x1" />
<frame src="Q5207243-3.html" id="x2" />
</frameset>
</html>
=========================
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Q5207243 TestCase 2</title>
<style type="text/css">
p{background-color:red;}
</style>
<script type="text/javascript">
//<![CDATA[
function test(){
// interface window is defined to have parent attribute in Window Object 1.0
// http://www.w3.org/TR/Window/
// interface abstractView is defined to have document attribute in DOM Level 2 Views
// http://www.w3.org/TR/DOM-Level-2-Views/idl-defin …
// interface Document is defined to have getElementById() method in DOM Level 2 Cpre
// http://www.w3.org/TR/DOM-Level-3-Core/core.html# …
// interface HTMLFrameElement is defined to have contentDocument attribute in DOM Level 2 HTML
// http://www.w3.org/TR/DOM-Level-2-HTML/html.html# …
// interface HTMLInputElement is is defined to have value attribute in DOM Level 2 HTML
// http://www.w3.org/TR/DOM-Level-2-HTML/html.html# …

parent.document.getElementById("x2").contentDocument.getElementById("test").value = 5;
}

//]]>
</script>
</head>
<body>
<p onmouseover="test();">あ</p>
</body>
</html>
=========================
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Q5207243 TestCase 3</title>
</head>
<body>
<p><input id="test" type="text" /></p>
</body>
</html>

IE8
Opera 10.00 Beta 2
Minefield 3.6a2pre
Safari v4.0.2(最新はv4.0.3)
で確認。

●多分IE6,IE7ではうまくいかない。
(contentDocumentはサポートされていないと思う。回避はcontentWindowを使うとか聞いたような気がするが,検証する気がない。気があっても仮想環境立ち上げられるほど性能良いマシンじゃないからできないけど)

●IEのインターネットオプションでの設定「ドメイン間でのデータソースのアクセス」の効果も勉強のために調べておくといいかも

あと,耳に痛いかもしれないけど,警告はしておく。
●「可能」と「適切」は全然違うものだ。本当にこの仕組みが必要なのかよく考えて使え

- 0
- 件

通報する

この回答へのお礼

さっそくの回答ありがとうございます。
ただ、難しすぎてよくわかりません。あと、ＩＥ７では使えないとの事ですので、これもちょっと困ります。
下フレームのリンク項目が多くどうしてもスクロールが必要で、上フレームにそのリンク先の概要を表示させたいので、出来るととても便利なので、出来ると助かります。よろしくお願いましす。

通報する

お礼日時：2009/08/15 07:35

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