別フレームに画像と文字を表示する方法を教えてください。

[新着] Webテンプレートを仮オープンしました

0   名前： rai ： 2007/07/30（月） 08:59  ID:hZnpg4by sub-dI

左フレームには画像があり右フレームには画像と文字があります。
左フレームの画像に触れると右フレーム内の画像と文字を変化させたいのですが、どなたかテンプレートを作って頂けませんか。

同じフレーム内の画像を触ると同じフレーム内の画像が変化したり、左フレーム内の画像を触ると右フレーム内の画像を変化させるやり方は乗っていました。

ですが上記の様に一つの画像に触れて二つの行動を起こす事は可能なのでしょうか、よろしくお願いします！
1   名前： カヅサツ ◆ThCi95HEzw ： 2007/07/30（月） 08:59  ［URL］  ID:O5hEMlpW sub-r2
1. 「左フレームには画像があり右フレームには画像と文字があります。 」
2. 別の画像と文字が書かれたページを作ります
3. 左フレームの画像を 2へのリンクにし、表示先を右フレームにします。
2   名前： rai ： 2007/07/30（月） 08:59  ID:hZnpg4by sub-dI
カヅサツさんありがとうございます。
クリックせずカーソルが左の画像に乗った時に右の画像と文字を変化させたいのですが、
そのやりかたでも出来ますか？？
3   名前： カヅサツ ◆ThCi95HEzw ： 2007/07/30（月） 08:59  ［URL］  ID:O5hEMlpW sub-r2
おっと「ポイントした時に」でしたか。ごめんなさい。

1. 「左フレームには画像があり右フレームには画像と文字があります。 」
2. 別の画像と文字が書かれたページを作ります
3. 左フレームの画像を 2へのリンクにし、表示先を右フレームにします。

4. 「左フレームリンクをポイントすると、左フレームの表示をリンク先に変える」というJavaScriptを書きます。

以下は左フレームのサンプルです。
右フレーム名が "main" だと仮定しています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<title>カレー弁当ルー無し</title>
</head>
<body>
<ul id="menu">
	<li><a href="http://www.yahoo.co.jp/" target="main"><img
		src="http://i.yimg.jp/images/search/head_050825.gif" alt="yahoo"></a></li>
</ul>
<script type="text/javascript">
if(document.compatMode=="CSS1Compat"){
	var menuList = document.getElementById('menu').getElementsByTagName("a");
	for (var i = 0; i < menuList.length; i++) {
		menuList[i].onmouseover = function(){
			parent.main.location.href = this.href;
		}
	}
}
</script>
</body>
</html>

JavaSciptを無視する環境の場合でも、普通にクリックするなどでアクセスが可能です。
4   名前： rai ： 2007/07/30（月） 08:59  ID:hZnpg4by sub-dI
カヅサツさんありがとうございます！
上の左フレームのサンプルはコピーして貼り付けでよろしいのでしょうか？？

右フレーム部分とフレーム部分は他のサイトからコピーして私が作って見ました。
ですが左右に別れてはいるのですがカーソルが当たっても画像が変化する気配がありません。

右フレーム部分はこうしました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja">
<HEAD>
<TITLE>サンプル</TITLE>
<META http-equiv="content-type" content="text/html; charset=Shift_JIS">
<META name="generator" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
</HEAD>
<BODY>


<IMG NAME="main" SRC="1.jpg" BORDER="0" align="left"><br>
<LAYER NAME="menu"><DIV ID="text">文章をここに</DIV></LAYER></BODY>
</HTML>

たぶんNAME=""が間違えてるんだと思いますが、どうか助言をください！
後少しなんです。
よろしくお願いします！
5   名前： rai ： 2007/07/30（月） 08:59  ID:hZnpg4by sub-dI
フレームの部分も載せます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
<FRAME name="menu" src="menu.html">
<FRAME name="main" src="main.html">
<NOFRAMES>
<BODY>
<P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

こんな感じになってます。
6   名前： カヅサツ ◆ThCi95HEzw ： 2007/07/30（月） 08:59  ［URL］  ID:O5hEMlpW sub-r2
>>4

> 上の左フレームのサンプルはコピーして貼り付けでよろしいのでしょうか？？

もちろん適宜改変する必要があります。
当たり前ですが、あのままでは画像に触れると右ページに表示されるのは yahooになってしまいますから、
http://www.yahoo.co.jp/ の代わりに「別の画像と文字が書かれたページ」の URI を書きます。

> カーソルが当たっても画像が変化する気配がありません。

何かをミスっているのでしょうが、>>4と>>5の情報だけでは不明です。
該当のページの URL がわかれば検証できるかもしれません。

> たぶんNAME=""が間違えてるんだと思いますが

>>4 の img要素や layer要素の name属性値が何であろうと、本件には無関係です。
>>5 の frame要素の name属性値は、合っているようです。

それぞれ、細かいところで文法が変なので妙なことになる(なり得る)のですが、とりあえず本件とは関係ありません。
7   名前： rai ： 2007/07/30（月） 08:59  ［URL］  ID:hZnpg4by sub-dI
カヅサツさんありがとうございます。
いちよう色々試行錯誤してここまで出来上がりました。
http://rid.aikotoba.jp/

もともとある左の画像に文章を加え、
左の画像に触れると右の画像の隣に文章を表示させたいのです。
よろしくお願いします
8   名前： カヅサツ ◆ThCi95HEzw ： 2007/07/30（月） 08:59  ［URL］  ID:O5hEMlpW sub-r2
>>> カーソルが当たっても画像が変化する気配がありません。

>> 何かをミスっているのでしょうが、>>4と>>5の情報だけでは不明です。
>> 該当のページの URL がわかれば検証できるかもしれません。

> いちよう色々試行錯誤してここまで出来上がりました。
> http://rid.aikotoba.jp/

左フレーム http://rid.aikotoba.jp/p4.html を拝見しましたが、まったく>>3が反映されていないみたいです。
一覧へ戻る