★PHWS・掲示板

HTMLに関するご質問、このページへのご要望、その他雑談など何でもお気軽にお書き下さい。
名前 : 必須です。
E-mail :
URL :
タイトル :
本文 :
必須です。手動改行。タグは不可。(http://で書いたものはリンクします。)
削除キー :

[[新しい内容]] [戻る] [Top Pageへ] [Contentsへ] [管理モード]


[70] 複数のフレームを同時変更する From hane [2005/ 8/10 17:19:46:Wed] [お返事]

ええと、ここにある下記のコードを使わせて頂きました。

(ttp://www.tees.ne.jp/~pokochan/tips/frame.html)

これは同一ページ内のフレームしか同時変更できないのでしょうか。

ページ内部の構想です。(全てiframe)

index┳enter━menu
┣main┳menu-navi(*)
┃ ┣main-window(*)
   ┃ ┗menu_n_b(*)
┗mid━(略)

(*)のある物がリンク先のフレームです。
ちなみにリンクタグとJAVAscriptはmenuに貼ってます。

ちなみにこれらは同一ディレクトリ上にあります。

リンクするとIE5.5、FireFoxともにエラーが発生しページを変更してくれません。

いかにすればよろしいでしょうか?
アドバイスお願いします。

只今メールを返信いたしました。
ご確認下さい。

[70.7] From 管理人 [2005/ 8/16 21:26:34:Tue]

ありがとうございます。
PCのほうは暫く触っていなかった為、随分と感覚が抜けてまして・・・。

調べてみたら絶対のほうでした。

サイトのほう、まだコンテンツのほうが未完成でして、公開予定が未定なので公にアップするのはあれかと思いますので、メールで添付させていただきます。
実はサイトをつくるというのもこれでかなり回数を重ねておりまして、今度は随分と気合を入れてつくっておりますので、画像の枚数もすごい事になっています。まあ見ていただければ分ると思いますが。


いろいろ尽くして頂いて感謝します。

[70.6] From hane [2005/ 8/16 13:17:11:Tue]

HTMLについてはお詳しいようですね。
いつもそうなのですが、私には相手方のスキルが全く分かりません。
ですから失礼なことを書く場合もありますので、その時はご容赦下さい。

haneさんは、相対パスと思われているようですが、HTMLで言うと絶対パスですよ。
リンク先がどこであろうと変わりません。
私の回答が全てです。
(私が言い切れるのは、こちらでも動作確認をしているからです。
これをしないと、もし実装の仕様が変わっていたら嘘を書いてしまいます。
今回の場合はブラウザにJava Scriptが実装されたころからの仕様ですから、
変わることはまず有り得ないと思いますが。)

動作しない原因は、記述ミスだと思われます。
1、スクリプトは全てmenuのページに書かれていますか?
 スクリプトはそのページ内のみ有効です。
2、スクリプトは1文字違っても動作しません。
 スクリプトが長くなれば記述ミスも出やすいです。
3、スクリプト内に全角のスペース等が入ってませんか?
 スクリプトは全角文字を認識しませんのでエラーとなります。

今一度記述ミスをご確認下さい。
もし、記述ミスが無い場合、(他のスクリプトをお使いになっていたら)他のスクリプトとの競合も考えられます。
その時は私にファイルを送ってくだされば、修正出来ると思います。

[70.5] From 管理人 [2005/ 8/14 07:32:12:Sun]

なるほど...フレームの相対パス指定するとは思いませんでした。
JAVAなんて滅多に使わないので全然です。

ただ少し問題がありまして。

index.html→menu(iframe)→リンク元
(index/menu/リンク元)

index.html→main(iframe)→対象のiframe
(index/main/対象のiframe)

という構成でして、menuのiframe中に対象のiframeが存在してないので上手くいきません。

説明の方では(aichiken)から(aichiken/nagoya)を変更するようで、リンク元とリンク先が一階層上で別フレームにある場合はどうすれば良いでしょうか?

[70.4] From hane [2005/ 8/13 23:53:36:Sat]

図で説明されるとよく分かります。
深い階層(インラインフレームの中のインラインフレーム)を変更するわけですね。
これはスクリプトの基本と言えば基本なのですが、初心者の方には分かり難いかもしれませんね。
私のtipsでやっていることは、ターゲットのフレームにファイル名を指定しているだけです。
分かり易く言うとフレームの住所を指定するだけです。
function ChangeIFrame(CIF1,CIF2)
{
parent.leftframe.location.href = CIF1;
parent.rightframe.location.href = CIF2;
}
このスクリプトのparent.leftframeとparent.rightframeが住所だと思って下さい。
例えば、
home.htmlの中に
<iframe name="aichiken" src="aichi.html"></iframe>
として
aichi.htmlの中に
<iframe name="nagoyasi" src="nagoya.html"></iframe>
となっていてnagoya.htmlをtoyota.htmlに変更したい場合は
スクリプトを
function ChangeIFrame(CIF1)
{
parent.aichiken.nagoyasi.location.href = CIF1;
}
とし、
<a href="javascript:ChangeIFrame('toyota.html')">豊田市に変更</a>
の様に記述します。
この様にiframeのname属性を順に入れるだけです。
基本的にいくら深い階層でもやり方は同じです。

[70.3] From 管理人 [2005/ 8/12 08:14:21:Fri]

遅ればせながら、初めまして。

説明わかりにくくてすみません(図もずれてますね)

ええと。全てのページのhtmlは同一ディレクトリ内部にあるんですが、
フレームを隔てて複数のフレームを更新したいのです。

稚拙な図ですがこのような感じで。

ttp://eternal00.hp.infoseek.co.jp/data/html.gif

黒線がページ全体(index.html)
緑線がテーブルタグ、青線がインラインフレームです。
ページの構成はテーブルタグ多用で複雑になってます。

上記のmenuと記載したフレーム内部のページからオレンジで塗りつぶしたフレーム三つを変更する予定ですが...

やはり、一つのページ内に存在するフレームしか更新できないでしょうか?
もしできるならば、どのようにすればできるでしょうか?

[70.2] From hane [2005/ 8/11 23:09:18:Thu]

はじめまして。管理人です。
通常の使い方は同一ページ内のフレームを変更すると思いますが。どのような事をしたいのでしょうか?
具体的に仰っていただけますか?
一つのウィンドウには1ページしか表示出来ないです。他のウィンドウのページを変更するとかでしょうか?

[70.1] From 管理人 [2005/ 8/10 21:41:48:Wed]

[69] 初めまして From Chako http://mylittle.boy.jp/weblog/ [2005/ 3/29 21:42:53:Tue] [お返事]

大変参考になりました。
でも、どうしても解決できないことがあり、
もしよろしかったら教えていただけないかと思い、
書き込みさせていただきます。

写真に枠を付けたいと思い、
.photo{
    float: left;
    background-color: #f6f6f6;
border-width: 2px;
margin-right: 0px;
     margin-bottom: 0px;
margin-top:0px;
margin-left:0px;
     padding-right: 10px;
padding-bottom: 50px;
padding-top:10px;
padding-left:10px;
border-style: solid;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3; }

としています。
IEで表示すると、きれいに写真の周りを枠で囲っているのですが、
FireFoxで表示すると、なぜか右側の枠線が延びてしまっています。
あれこれいじってみましたが直りません。
どうしてよいやら途方にくれてしまいました。
お時間のあるときで結構ですので、教えていただければ幸いです。

すみません、理由はわからないままなのですが、
なぜか解決しました。
失礼いたしました。

[69.1] From Chako http://mylittle.boy.jp/weblog/ [2005/ 3/29 22:22:20:Tue]

[68] こんにちは From Armadillo http://www.atlantisdo.com [2005/ 3/11 22:12:58:Fri] [お返事]

アトランティス堂Armadilloです。
ご無沙汰しております。
開発中のPIGYEDIT2がなんとか動くようになってきましたのでご報告に参上しました。
今後ともよろしくお願いいたします(^-^)/

こんにちは。こちらこそご無沙汰しております。
PIGYEDIT2ですね。是非使わせて下さい。
少しでも開発に寄与できたらと思います。

[68.1] From 管理人 [2005/ 3/13 16:58:33:Sun]

[67] スペースが出来てします。 From 義久 [2004/10/ 3 06:05:29:Sun] [お返事]

はじめまして。
テーブルを作っていて、<br>タグなどは
使っていないのにテーブル内の上部に
無駄な空白が出来てしまうのです。
どうしたら無駄な空白を削除できるのでしょうか?教えてください。よろしくお願いします。

管理人さん、返信ありがとうございました。
一から打ち直したら、直ったみたいです。

[67.2] From 義久 [2004/10/ 3 23:01:39:Sun]

はじめまして。管理人です。
テーブル内の上部の空白を削除とのことですが、今ひとつ意味が分かりません。
私自身が表示確認が出来ないとアドバイス出来ません。
もし、差し支えなければソースをこの掲示板へカキコして下さい。
人様に見せられないのでしたら、メールして下さい。

[67.1] From 管理人 [2004/10/ 3 17:22:38:Sun]

[63] アドバイスありがとうございます。 From みうら [2004/ 7/ 7 09:19:07:Wed] [お返事]

みうらです。
アドバイスありがとうございました。
また質問で申し訳ないのですが

function calc1()

function calc2()
   ・
function calc3()
   ・
   ・
   ・
と、関数定義を続けて入力していますが
関数呼び出しの処理で
<INPUT TYPE="button"VALUE="計算"
でまとめて計算させたいのですが、
どのような処理をすれば宜しいのでしょうか?
function calc()ひとつであれば、
<INPUT TYPE="button"VALUE="計算"onClick="calc()">で処理ができたのですが、2つ3つと作成して
<INPUT TYPE="button"VALUE="計算"onClick="calc()">をどうしたらよいのかも分かりません。
もう一つなのですが
function calc11()
{//計算結果履歴
with(document.suchi)
{
var string = "<table border=1><tbody><tr>"+
"<td><b>辺a="+(hena.value)+"</b></td>"+
"<td><b>辺b="+(henb.value)+"</b></td>"+
"<td><b>辺c="+(henc.value)+"</b></td>"+
"<td><b>角A="+(ado.value)+"</b></td>"+
"<td><b>角B="+(bdo.value)+"</b></td>"+
"<td><b>角C="+(cdo.value)+"</b></td>"+
"<td><b>面積="+(menseki.value)+"</b></td>"+
"</tr></tbody></table>";
results.innerHTML += string;
}
}
計算したあとに(計算させることも出来ないのですが・・・)その結果を
<INPUT TYPE="button"VALUE="計算結果を残す"
を押すと画面にその結果を貼り付ける処理にしたいのですがその対処法も分からず悩んでいます。
先に関数定義を作ってしまいその対処が出来ず記述途中の様な式になってしまいました。自分なりに色々調べてここまで作成したつもりですがまだまだ勉強不足です。以上の点につきましてお手数ですが教えていただけないでしょうか?
宜しくお願いいたします。

こんばんは。管理人です。

複数の処理をさせる場合は、
onClick="calc1();calc2();calc3();"
のようにセミコロン(;)で区切って記述して下さい。
要はスクリプトがそのまま書き込めると言うことになります。

ただし、あまりたくさん記述するのも嫌だなあと思われるなら
以下のように
function calcAll()
{
calc1();
calc2();
calc3();
calc4();
calc5();
}
としておいて、
onClick="calcAll();"
とすれば良いでしょう。

計算結果を貼り付ける処理ですが、innerHTMLを使用しているので
画面上に表示したいわけですね。

単純にdivエレメントで表示します。
表示したい位置へ以下のように
<div id="results"></div>
と記述します。
また、スタイルシートを使えば自由自在に表示位置を指定出来ます。
例、<div id="results" style="position:absolute;top:350px;left:25px;"></div>

JavaScriptの部分はブラウザをIEに絞った場合は以下のように if (document.all) として下さい。
こうすることによってクロスブラウザ化が出来ます。
function calc11()
{ //計算結果履歴
with(document.suchi)
{
var string = "<table border=1><tbody><tr>"+
"<td><b>辺a="+(hena.value)+"</b></td>"+
"<td><b>辺b="+(henb.value)+"</b></td>"+
"<td><b>辺c="+(henc.value)+"</b></td>"+
"<td><b>角A="+(ado.value)+"</b></td>"+
"<td><b>角B="+(bdo.value)+"</b></td>"+
"<td><b>角C="+(cdo.value)+"</b></td>"+
"<td><b>面積="+(menseki.value)+"</b></td>"+
"</tr></tbody></table>";
}
if (document.all) document.all["results"].innerHTML += string;
}

以上、私の説明で分からないところがあれば、また質問して下さい

[63.1] From 管理人 [2004/ 7/ 7 20:55:31:Wed]

[62] はじめまして From みうら [2004/ 7/ 6 14:45:01:Tue] [お返事]

初心者なのですが三角形の計算式を作りたいと
見よう見真似でここまで作成したのですが、
どこが間違っているのかもわからずこまっています。
アドバイスをお願いが致します。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function calc1()
{
with(document.suchi)
{
if(document.suchi.hena.value=="")
alert("必ずaに数値を入力して下さい!!");//必須の確認
else if(henb.value==""){//bの入力確認OKなら■、NOなら次に
if(henc.value==""){//cの入力確認OKなら◎、NOなら次に
if(ado.value==""){//Aの入力確認OKなら▼、NOなら次に
if(bdo.value==""){//Bの入力確認OKなら●、NOなら次に
if(cdo.value=="") alert("残り2つの数値も入力して下さい。");
else alert("Aかbの数値を入力して下さい。");}
else if(cdo.value=="") alert("AかCの値を入力して下さい。");//●既知aB状態、c,A,Cの確認
else calc2()}
else if(bdo.value==""){//▼既知aA状態、B,Cの確認
if(cdo.value=="") alert("B,Cのいずれか1つの値を入力して下さい。");
else calc3()}
else calc4()}
else if(ado.value==""){//◎既知ac状態、A,B,Cの確認
if(bdo.value==""){
if(cdo.value=="") alert("b,A,Bのいずれか1つの値を入力して下さい。");
else calc10()}
else calc5()}
else calc6()}
else if(henc.value==""){//■既知ab状態、c,A,Cの確認
if(ado.value==""){
if(bdo.value==""){
if(cdo.value=="") alert("c,A,Cのいずれか1つの数値を入力して下さい。");
else calc7()}
else alert("c,A,Cのいずれか1つの数値を入力して下さい。");}
else calc9()}
else calc8()}
}
}
function calc2()
{//既知aBC
with(document.suchi)
{
ado.value = (180-(bdo.value)-(cdo.value));
henb.value = Math.sin(bdo.value/360*2*Math.PI)*(hena.value)/Math.sin(ado.value/360*2*Math.PI);
henc.value = Math.sin(cdo.value/360*2*Math.PI)*(hena.value)/Math.sin(ado.value/360*2*Math.PI);
menseki.value = 1/2*(hena.value)*(henb.value)*Math.sin(cdo.value/360*2*Math.PI)
if(menseki.value=="NaN")alert("入力間違いと思われます。取消ボタンを押し再度入力し直して下さい。");
}
}
function calc3()
{//既知aAC
with(document.suchi)
{
bdo.value = (180-(ado.value)-(cdo.value));
henb.value = Math.sin(bdo.value/360*2*Math.PI)*(hena.value)/Math.sin(ado.value/360*2*Math.PI);
henc.value = Math.sin(cdo.value/360*2*Math.PI)*(hena.value)/Math.sin(ado.value/360*2*Math.PI);
menseki.value = 1/2*(hena.value)*(henb.value)*Math.sin(cdo.value/360*2*Math.PI)
if(menseki.value=="NaN")alert("入力間違いと思われます。取消ボタンを押し再度入力し直して下さい。");
}
}
function calc4()
{//既知aAB
with(document.suchi)
{
cdo.value = (180-(ado.value)-(bdo.value));
henb.value = Math.sin(bdo.value/360*2*Math.PI)*(hena.value)/Math.sin(ado.value/360*2*Math.PI);
henc.value = Math.sin(cdo.value/360*2*Math.PI)*(hena.value)/Math.sin(ado.value/360*2*Math.PI);
menseki.value = 1/2*(hena.value)*(henb.value)*Math.sin(cdo.value/360*2*Math.PI)
if(menseki.value=="NaN")alert("入力間違いと思われます。取消ボタンを押し再度入力し直して下さい。");
}
}
function calc5()
{//既知acB
with(document.suchi)
{
henb.value = Math.sqrt(Math.pow(hena.value,2)+Math.pow(henc.value,2)-2*hena.value*henc.value*Math.cos(bdo.value/360*2*Math.PI));
var i = henb.value/Math.sin(bdo.value/360*2*Math.PI);
var j = Math.asin(hena.value/i);
ado.value = (Math.round((j*180/Math.PI)*1000000))/1000000;
var k = Math.asin(henc.value/i);
cdo.value = (Math.round((k*180/Math.PI)*1000000))/1000000;
menseki.value = 1/2*(hena.value)*(henb.value)*Math.sin(cdo.value/360*2*Math.PI)
if(menseki.value=="NaN")alert("入力間違いと思われます。取消ボタンを押し再度入力し直して下さい。");
}
}
function calc6()
{//既知acA
with(document.suchi)
{
var i = henc.value*Math.sin(ado.value/360*2*Math.PI)/hena.value;
cdo.value = (Math.round((Math.asin(i)*180/Math.PI)*1000000))/1000000;
bdo.value = (180-(ado.value)-(cdo.value));
henb.value = Math.sin(bdo.value/360*2*Math.PI)*(hena.value)/Math.sin(ado.value/360*2*Math.PI);
menseki.value = 1/2*(hena.value)*(henb.value)*Math.sin(cdo.value/360*2*Math.PI)
if(menseki.value=="NaN")alert("入力間違いと思われます。取消ボタンを押し再度入力し直して下さい。");
}
}
function calc7()
{//既知abC
with(document.suchi)
{
henc.value = Math.sqrt(Math.pow(hena.value,2)+Math.pow(henb.value,2)-2*hena.value*henb.value*Math.cos(cdo.value/360*2*Math.PI));
var i = henc.value/Math.sin(cdo.value/360*2*Math.PI);
var j = Math.asin(henb.value/i);
bdo.value = (Math.round((j*180/Math.PI)*1000000))/1000000;
var k = Math.asin(hena.value/i);
ado.value = (Math.round((k*180/Math.PI)*1000000))/1000000;
menseki.value = 1/2*(hena.value)*(henb.value)*Math.sin(cdo.value/360*2*Math.PI)
if(menseki.value=="NaN")alert("入力間違いと思われます。取消ボタンを押し再度入力し直して下さい。");
}
}
function calc8()
{//既知abc
with(document.suchi)
{
var i = (hena.value)/2+(henb.value)/2+(henc.value)/2;
ado.value = (Math.round((Math.atan(Math.sqrt((i-henb.value)*(i-henc.value)/i/(i-hena.value)))*180/Math.PI*2)*1000000))/1000000;
bdo.value = (Math.round((Math.atan(Math.sqrt((i-hena.value)*(i-henc.value)/i/(i-henb.value)))*180/Math.PI*2)*1000000))/1000000;
cdo.value = (Math.round((Math.atan(Math.sqrt((i-hena.value)*(i-henb.value)/i/(i-henc.value)))*180/Math.PI*2)*1000000))/1000000;
menseki.value = 1/2*(hena.value)*(henb.value)*Math.sin(cdo.value/360*2*Math.PI)
if(menseki.value=="NaN")alert("入力間違いと思われます。取消ボタンを押し再度入力し直して下さい。");
}
}
function calc9()
{//既知abA
with(document.suchi)
{
var i = henb.value*Math.sin(ado.value/360*2*Math.PI)/hena.value;
bdo.value = (Math.round((Math.asin(i)*180/Math.PI)*1000000))/1000000;
cdo.value = (180-(ado.value)-(bdo.value));
henc.value = Math.sqrt(Math.pow(hena.value,2)+Math.pow(henb.value,2)-2*hena.value*henb.value*Math.cos(cdo.value/360*2*Math.PI));
menseki.value = 1/2*(hena.value)*(henb.value)*Math.sin(cdo.value/360*2*Math.PI)
if(menseki.value=="NaN"||menseki.value=="0")alert("入力間違いと思われます。取消ボタンを押し再度入力し直して下さい。");
}
}
function calc10()
{//既知acC
with(document.suchi)
{
var i = hena.value*Math.sin(cdo.value/360*2*Math.PI)/henc.value;
ado.value = (Math.round((Math.asin(i)*180/Math.PI)*1000000))/1000000;
bdo.value = (180-(ado.value)-(cdo.value));
henb.value = Math.sin(bdo.value/360*2*Math.PI)*hena.value/Math.sin(ado.value/360*2*Math.PI);
menseki.value = 1/2*(hena.value)*(henb.value)*Math.sin(cdo.value/360*2*Math.PI)
if(menseki.value=="NaN")alert("入力間違いと思われます。取消ボタンを押し再度入力し直して下さい。");
}
}
function calc11()
{//計算結果履歴
with(document.suchi)
{
var string = "<table border=1><tbody><tr>"+
"<td><b>辺a="+(hena.value)+"</b></td>"+
"<td><b>辺b="+(henb.value)+"</b></td>"+
"<td><b>辺c="+(henc.value)+"</b></td>"+
"<td><b>角A="+(ado.value)+"</b></td>"+
"<td><b>角B="+(bdo.value)+"</b></td>"+
"<td><b>角C="+(cdo.value)+"</b></td>"+
"<td><b>面積="+(menseki.value)+"</b></td>"+
 "</tr></tbody></table>";
results.innerHTML += string;
}
}
function calc12()
{//平方根の計算
with(document.sqrue)
{
if(atai.value=="") atai.value=Math.pow(btai.value,2);
else if(atai.value=="")alert("どちらかに数値を入力してください。");
else btai.value=Math.sqrt(atai.value);
}
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FORM NAME="suchi">
 *** 三角形の自動計算 ***<BR>
<BR>
   辺a= <INPUT TYPE="text" NAME="hena" size=15><BR>
   辺b= <INPUT TYPE="text" NAME="henb" size=15><BR>
   辺c= <INPUT TYPE="text" NAME="henc" size=15><BR>
   角A= <INPUT TYPE="text" NAME="ado" size=15>°<BR>
   角B= <INPUT TYPE="text" NAME="bdo" size=15>°<BR>
   角C= <INPUT TYPE="text" NAME="cdo" size=15>°<BR>
 面積F= <INPUT TYPE="text" NAME="menseki" size=15><BR>
<BR>
      <INPUT TYPE="button"VALUE="計算"onClick="calcs(1,2,3,4,5,6,7,8,9,10)"><BR>
      <INPUT TYPE="reset"VALUE="取消"onClick="calc()"><BR>
      <INPUT TYPE="button"VALUE="計算結果を残す"onClick="calc()"><BR>
</FORM>
<HR>
</CENTER>
<FORM NAME="sqrue">

<CENTER>
 *** 平方根の計算 ***<BR>
<BR>
   √ <INPUT TYPE="text" NAME="atai" size=25> = <INPUT TYPE="text" NAME="btai" size=25> <INPUT TYPE="button"VALUE="平方根の計算"onClick="calcs(12)"> <INPUT TYPE="reset"VALUE="取消"onClick="calc()"><BR>
<BR>
どちらかのテキストボックスに知りたい数値を入力し[平方根の計算]ボタンをクリックして下さい。<BR>
例えば、√[4]を入力し[平方根の計算]ボタンをクリックすると、右項に[2]と表示されます。
<HR>
</CENTER>
</FORM>
</BODY>
</HTML>

はじめまして、管理人です。
見よう見真似と言われますが、良く頑張っておられますね。
ここまで出来れば凄いです。

さて、みうらさんのソースですが、どこまでを希望されているのかが
分かりませんので、ロードした時の間違いだけ記しておきます。

ソースの37行目の}がひとつ多いです。削除して下さい。
このような間違いはif〜else文等で深いネストをした場合などに引き起こし易いです。
ネストは浅い方が分かり易いし、間違いも無くなります。
みうらさんの考えられている仕様が分かりませんので、適切なアドバイスは出来ませんが、for文等でbreakしても似た動作は出来るかも知れません。
例えば、こんな感じです。

//メッセージの設定
message = new Array();
message[0] = "必ずaに数値を入力して下さい!!";
message[1] = "残り2つの数値も入力して下さい。";
message[2] = "@@@@@@@@@@";
message[3] = "**********";


//入力忘れがあった場合メッセージをポップアップ
for (i = f; i <= e; i++)
{
FormObj = document.forms[f].elements[i];
if (FormObj.value == "")
{
alert(message[i]);
break;
}
else
{
if (i == n)
{
実行関数;
}
}
}

あともう一つ間違いがあります。
159行目に全角のスペースが入っています。
削除して下さい。

実際の動作については検証していません。
何故なら、ボタンのonClickには記述されていない関数名や引数等が指定されていることから、未だ記述途中だと判断したからです。

以上、私の説明で分からないところがあれば、また質問して下さい。

[62.1] From 管理人 [2004/ 7/ 6 22:34:56:Tue]

[61] FORMについて教えてください。 From Mukacci☆ [2004/ 6/10 21:38:12:Thu] [お返事]

たびたびすみません。
今夜はFORMについて悩んでます。朝からずっとFORMを研究、作成してやっと、ここまで作ったのですが、送信ボタンを押しても、内容がメールに反映されないみたいなんです。どこが間違ってるのでしょうか。見てもらっていいですか?

<table border="2" cellpadding="2" cellspacing="0" align="center" width="810">
<tr>
<th bgcolor="lavender">
<font size="4" color="brown">
<FORM ACTION="mailto:mukacci0211@yahoo.co.jp" METHOD="post" enctype="text/plain"><p>お名前</th>
<td bgcolor="lavender">
<font size="4" color="brown">
<input type="text" name="name" value="" size="40"></td></tr>
<tr>
<th bgcolor="lavender">
<font size="4" color="brown">
性別</th>
<td bgcolor="lavender">
<font size="4" color="brown">
<input type="checkbox" name="sex" value="おとこ">♂
<input type="checkbox" name="sex" value="おんな">♀</td></tr>
<tr>
<td bgcolor="lavender">
<font size="4" color="brown">
生年月日/年齢</th>
<td bgcolor="lavender">
<font size="4" color="blown">
19
<select name="toshi1">
<option value="60" selected>60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="61">67</option>
<option value="62">68</option>
<option value="63">69</option>
<option value="64">70</option>
<option value="65">71</option>
<option value="66">72</option>
<option value="61">73</option>
<option value="62">74</option>
<option value="63">75</option>
<option value="64">76</option>
<option value="65">77</option>
<option value="66">78</option>
<option value="61">79</option>
<option value="62">80</option>
<option value="63">81</option>
<option value="64">82</option>
<option value="65">83</option>
<option value="66">84</option>
<option value="61">85</option>
<option value="62">86</option>
<option value="63">87</option>
<option value="64">88</option>
<option value="65">89</option>
<option value="66">90</option>
<option value="61">91</option>
<option value="62">92</option>
<option value="63">93</option>
<option value="64">94</option>
<option value="65">95</option>
<option value="66">96</option>
<option value="61">97</option>
<option value="62">98</option>
<option value="63">99</option>
</select>

<select name="toshi2">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>

<select name="toshi2">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
日生まれ
<select name="toshi2">
<option value="10才以下" selected>10才以下</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
</select>

</td></tr>
<tr>
<th bgcolor="lavender">
<font size="4" color="brown">
住所</th>
<td bgcolor="lavender">
<font size="4" color="brown">
<input type="text" name="adores" value="" size="120"></td></tr>
<tr>
<th bgcolor="lavender">
<font size="4" color="brown">
電話番号</th>
<td bgcolor="lavender">
<font size="4" color="brown">
<input type="text" name="mail" value="" size="60"></td></tr>
<tr>
<th bgcolor="lavender">
<font size="4" color="brown">
メールアドレス</th>
<td bgcolor="lavender">
<font size="4" color="brown">
<input type="text" name="mail" value="" size="60"></td></tr>
<tr>
<th>
<input type="submit" value="送信する">
</th>
</p>
</form>





</table>



やはり、そうでしたか。

enctype="text/plain"は日本語文字セットのままで送信内容を受け取ることが
できる形式なので、これを理解するブラウザは日本語のままFORM内容を送信
してくれるでしょう。(私の環境では、正常に送信できます。)
しかし、未対応の場合、文字化けしたようになるわけです。
(英数字以外の文字が特別なフォーマットを成されています。)
送信はブラウザが標準メーラーを起動させて送信させます。

要するに送る側の環境に依存するのです。
メーラーが起動するのもそういった環境にあるからです。

action="mailto:では、現状こうした事が避けられないと思われます。
CGIとかPHP等のサーバーサイド・プログラムを使えばメーラーを起動させない
ので良いのですが、サーバーサイド・プログラムを許可してくれるレンタル
サーバーを借りなければなりません。
ジオの場合は、許可してませんので、どうしても実現したい場合は他の
レンタルサーバーを探さなくてはなりません。

検索エンジンでレンタルサーバー・CGI・PHP等をキーワードに探せば
たくさんあるかと思います。プログラムは用意されている場合も有れば
無い場合もあるので、提供されているサービスを良く理解した上で
契約して下さい。

[61.3] From 管理人 [2004/ 6/11 22:14:06:Fri]

内容をボックスに記入して送信ボタンを押しますと、メールの作成画面が出てくるだけで、ボックスに記入しても意味無いじゃんって感じです。あと届いたメールは文字化けしちゃってます。

[61.2] From Mukacci☆ http://www.geocities.jp/mukacci0211/ [2004/ 6/11 04:46:57:Fri]

よく頑張られていますね。

> 送信ボタンを押しても、内容がメールに反映されないみたいなんです。

反映されないというのは具体的にどうなるのでしょうか?
文字化けを起こしているとか、内容が無いまま送信されているとかでしょうか?

[61.1] From 管理人 [2004/ 6/10 22:55:18:Thu]

[60] METAについて質問させてください。 From Mukacci☆ http://www.geocities.jp/mukacci0211/ [2004/ 6/ 9 19:33:54:Wed] [お返事]

はじめまして。
突然おじゃまして、突然質問させていただいて申し訳ありません。
<META>についての質問です。
今まで、METAなんか書かなくても、ホームページ見れるからいいやって思っていましたが、先日、METAが無いと文字化けをしたり、検索サイトにも登録されにくいときき、早速付けはじめたのですが、書き方がさっぱりわかりません。色々な資料で調べてはみたのですが、知識の無い僕には難しくてわからないんです。
そもそも、JISって何?ECUって何?シフトJISって何?ってな具合です。
僕のホームページに文字化けするページがあるものですから、何とか、お手数ですが教えてはいただけないでしょうか。

一応ホームページのアドレスは
http://www.geocities.jp/mukacci0211/
です。


ありがとうございました。
参考になりました。早速やってみます。
しかし、たくさんのレンタルスペースがあるわけじゃないですか。
その中で自分の借りているスペースの文字コードがJISなのかEUCなのかっていうのは、どこで見分けるのですか?
あっ!そのレンタル屋さんのソースのMETAが何になっているのかを見たらいいのかな?
はいっ!ありがとうございました。早速作業にとりかかってみます。

[60.2] From Mukacci☆ http://www.geocities.jp/mukacci0211/ [2004/ 6/10 01:49:39:Thu]

はじめまして。管理人です。
METAのことですね。
METAエレメントは任意な情報を文書に付加するものです。
書かなければならないものではありません。
詳しくは以下のリンクをご参照ください。

http://www.tees.ne.jp/~pokochan/html/meta.html

文字化けは何をやっても完全には無くならないかも知れません。
ブラウザは通常文字コードを自動認識します。
さて、文字コードとは、何か?と言いますと・・・
コンピュータは主にアメリカで発達してきました。
ですから、アルファベットや数字などの1バイトを基本単位として扱うようになっています。
日本語のように多くの文字を必要とする言語は、1文字を表わすのに2バイト以上を要します。
文字コードはその言語の表し方を定義したものです。
文字コードはいくつかの種類があります。それが、JISでありシフトJISでありEUCであるわけです。
でこれをブラウザが誤認識したときに文字化けを起こすわけです。
(シフトJISとEUCを行き来すると文字化けし易いです。)

Mukacci☆さんのページですが、ジオのツールを使って作成されているかと思います。
ジオのツールはEUCで吐き出されます。
この場合METAは、

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">

となります。

現在はEUCでありながら、Shift_JISと指定しているのです。
これではブラウザが迷ってしまいます。誤認識を誘発しているわけですね。

修正してみて下さい。少しは改善されると思います

[60.1] From 管理人 [2004/ 6/ 9 21:48:25:Wed]

[59] HTMLの差し替え From kasumin [2004/ 6/ 1 10:24:40:Tue] [お返事]

はじめまして。
以下のCGIに実装されているDHTMLが
Netscape7で動作しなくて四苦八苦しています。
http://akiba55.hp.infoseek.co.jp/cgi-bin/ealis/ealis.cgi?dhtml&start=0&show=20

IEだとレス欄が出ますが、NN7だと動作しません。
引数の取り方とか、ちょっとした事で解決するような気もするのですが…

よろしければアドバイスお願いします。

なんとそこまで知らないといけなかったとは…
ちょこっと関数を変えれば何とか思っていたのですが
甘かったみたいですね。

さっそく変更してみましたが、問題なく動くようです。
ありがとうございました。
勉強にもなりました。

[59.4] From kasumin [2004/ 6/ 7 02:04:11:Mon]

サーバーが弾いていたのですね。申し訳ないです。

コピペでアクセス出来ました。


> ソースの冒頭にスクリプト表記があります。
> これをどう直せばいいか悩んでいます。

はい、function view(name)の記述がレスを表示非表示させるスクリプトです。
以下の記述に注目して下さい。
var txtObj = document.all(name);
となっていますね。
これはIEのみを対象にした記述です。document.allはIE独自のものです。
ですからNetscape7だけの問題ではないということになります。
このスクリプトの作者さんの考え方なので私がどうこうは言いませんが、
掲示板の性質からして色々な方が書き込みをすることを念頭に置くと、
もう少し配慮した方が良いのでは?と思います。

で私ならこうするというか、一応解決方法を以下に記します。

CGIのHTML吐き出しの
function view(name) {
var txtObj = document.all(name);
if (txtObj.style.display != 'none') { txtObj.style.display = 'none'; }
else { txtObj.style.display = ''; }
}

function view(name) {
if (document.all) txtObj = document.all[name];
if (document.getElementById) txtObj = document.getElementById(name);
if (txtObj.style.display != 'none') { txtObj.style.display = 'none'; }
else { txtObj.style.display = ''; }
}
にして下さい。

以上のスクリプトの簡単な説明をしますと、
DOMを使いスタイルシートの属性を変更する方法です。
DOMの詳細はW3Cをご覧下さい。

もう少し補足しますと、document.allを入れているのは、IE4対応のためです。
また、if文で対応している場合のみtxtObjの入れ替えをします。
これがクロスブラウザと言われる手法だと思って下さい。

動作対象は、IE4以上とDOM対応ブラウザです。
動作検証は、IE6・Netscape7・Mozilla・Konqerorにて行いました。

以上、また分からないこと等有りましたら質問して下さい。

[59.3] From 管理人 [2004/ 6/ 6 09:34:40:Sun]

あわわ
すいません。このサーバー、ダイレクトリンクは弾かれます。
コピペすれば入れますのでよろしくどうぞ。

ソースの冒頭にスクリプト表記があります。
これをどう直せばいいか悩んでいます。

[59.2] From kasumin [2004/ 6/ 5 23:13:54:Sat]

はじめまして。管理人です。
すみませんが、そのリンク先にはアクセス出来ませんでした。ブラウザはIE6です。

推測でしか言いようがないのですが、IE独自のDHTMLを使っているというような事なのでしょうか?

もしそうでしたら、NN7用に条件分岐(クロスブラウザ)させて表示させては如何ですか?

[59.1] From 管理人 [2004/ 6/ 2 23:35:16:Wed]

[58] はじめまして・・ From りる [2004/ 4/20 21:30:21:Tue] [お返事]

こんにちはです。
タグの使い方を調べていたらこちらにたどり着きました。
もしお門違いの質問でしたらすみません、言って頂ければ削除します;

本題なのですが、
どうしても分からないのが掲示板のようなトコロ?で
<SPAN>によって 周り全体の色を変えることです。
普通にspanを使うと文字の背景だけ変えられるというのは分かるのですが、
どうにも背景全般を変えるのが分からなくて・・
そこではdivは使えないのでどうすればいいのかもうさっぱりで;

文章が拙くて分かりづらいかもですが、教えて下さると嬉しいです。
それでは用件だけにて失礼します。

はじめまして。管理人です。
どんな質問でも構いませんよ。私の知識の範囲内でお答えいたします。

spanの使い方ですね。りるさんは、スタイルシートの使い方はご存知のようですので省きます。
親エレメント内だけで宜しければスタイルシートのwidthとheightの指定を100%にすれば良いでしょう。
例、http://pokochan.s2.poporo.net/span.htm

参考、
http://www.tees.ne.jp/~pokochan/style/width.html
http://www.tees.ne.jp/~pokochan/style/height.html


[58.1] From 管理人 [2004/ 4/21 21:10:01:Wed]

発信番号 : 削除キー :

[[もっと前の内容]] [先頭へ] [Top Pageへ] [Contentsへ]


Copyright (C) pokochan 2000-2004 http://www.tees.ne.jp/cgi-bin/gbook.pl/pokochan/notice.html
E-mailpokochan@mx1.tees.ne.jp