親ウィンドウ⇒子ウィンドウの操作について
-
0 名前： ニーヴ ： 2007/08/03（金） 01:06 ID:PeTe5Gy8 sub-9g
- 【何をしたいのか】
親ウィンドウに複数の画像（Ａ・Ｂ・Ｃとします）リンクがあります。
子ウィンドウのa.htmlには画像（●）・セレクトボックスのあるフォーム・テキストがあります。
親ウィンドウの画像（Ａ・Ｂ・Ｃ）をそれぞれクリックすると子ウィンドウ（a.html）が開き、
●部分に、クリックした画像に対応した画像（＝Ａ・Ｂ・Ｃ）が表示され、
また、セレクトボックスの初期値もＡ・Ｂ・Ｃそれぞれに対応したテキストになります。
子ウィンドウのセレクトボックスでアイテム名（Ａ・Ｂ・Ｃ）を選択してもやはり●部分が対応した画像に切り替わります。
このようにしたいと思っております。
大体お察しかと思いますが、注文フォームです。
【現在の状況】
セレクトボックスと●の連動はうまくいっているのですが、
親ウィンドウでクリックした時に●の初期値をＡorＢorＣに対応させるやり方がわからず、
今は全部別々のhtmlファイルを作ることでごまかしている状態です。
【サンプルの提示】
■親ウィンドウのソース
└head内
<script type="text/javascript">
<!--
function openorder(url) {
window.open(url,"","width=600,height=720,scrollbars=yes");
}
-->
</script>
└body内
<a href="javascript: openorder('●●1.html?★1');" title="この商品を注文する"><img src="Ａ.jpg" width="166" height="112" alt="" border="0"></a>
<a href="javascript: openorder('●●2.html?★2');" title="この商品を注文する"><img src="Ｂ.jpg" width="166" height="112" alt="" border="0"></a>
<a href="javascript: openorder('●●3.html?★3');" title="この商品を注文する"><img src="Ｃ.jpg" width="166" height="112" alt="" border="0"></a>
※↑ここの●●1〜3.htmlをa.html一つですませれたらいいなあと！※
■子ウィンドウのソース
└head内（セレクトボックス＝●の連動はwebで配布されていたものを使用させていただきました）
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
//ver.2.0
i_list = new Array();
i_list2 = new Array();
//設定
i_list[1] = new Array();
i_list[1][1] = 'Ａ.jpg';
i_list[1][2] = 'Ｂ.jpg';
i_list[1][3] = 'Ｃ.jpg';
//ここまで
for(i in i_list)
{i_list2[i] = new Array();
for(ii in i_list[i])
{i_list2[i][ii] = new Image();
i_list2[i][ii].src = i_list[i][ii];}}
function icon_selecter(i,posi)
{if(i_list2[i][posi.selectedIndex])
{document.images["i_icon"+i].src=i_list2[i][posi.selectedIndex].src;}}
// -->
</script>
└body内（セレクトボックス初期値の変更もwebで配布されていたものを使用させていただきました）
<form action="./order.cgi" method="post" name="send-mail" style=" margin-bottom: 30px;">
・
・
・
<img src="●" width="166" height="112" alt="itemphoto" class="photo" name="i_icon1">
<select name="カラー" size="1" class="form2" id="sel1" onChange="icon_selecter(1,this);">
<option value="">--選択して下さい。--</option>
<option value="★1">商品Ａ</option>
<option value="★2">商品Ｂ</option>
<option value="★3">商品Ｃ</option>
</select>
<script type="text/javascript">
<!--
if(location.search) {
var Value= location.search.substring(1);
var Sel=document.getElementById('sel1');
for(var i=0;i<Sel.options.length;i++) {
if(Value == Sel.options[i].value) {
Sel.selectedIndex = i;
break;
}
}
}
// -->
</script>
・
・
・
</form>
【何をしてみたのか】
一からjavascriptを書くということができないので、検索してみたりこちらの過去ログをさかのぼってみたりした程度ですが、
配布されているものを使っていることもあって、それを壊さないように組み合わせる方法がさっぱりわかりませんです。
自分がどこから間違ってるのか、最初から間違ってるのか、そこからしてわからなくなっております。
【検索用語】
・親ウィンドウの画像 子ウィンドウの画像 変える
・親ウィンドウ リンク 子ウィンドウ 画像 切り替え
全部は覚えていませんが大体似たような感じです。
なにとぞご教授下さいませorz
-
1 名前： Z ◆XTzyosZXcL ： 2007/08/03（金） 01:06 ID:PnVztGQA sub-Cl
- >>0のソースですと、クライアント側スクリプトが使えない（を使わない）環境の”お客様”は注文もなにも出来ませんが、そういう場合はいかがしましょう？
Jakob Nielsen博士のAlertbox：
http://www.usability.gr.jp/alertbox/index.html
A.A.O.
http://www.aao.ne.jp/
infoaxia：
http://www.infoaxia.com/
ハンディがあっても利用できるページづくり：
http://www.kanzaki.com/docs/html/accessible.html
ユーザビリティコラム：
http://www.bebit.co.jp/column/
-
2 名前： 匿名 ： 2007/08/03（金） 01:06 ID:m4JbUTgw sub-Cz
- 親←→子のデータのやり取りについては、ほとんど同内容の質問がすぐ前あたりにあったので、みんな静観モードだったんじゃね？
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=1268
と言うか、今どき（と言っても昔から言われ続けているのだけど）「望まない別ウィンドウ」をポコポコ開くようなインタフェースは避けるべきでしょ。諸々の事情で別ウィンドウが開かない、あるいは開いたことに気付けない場合もあるし、突然フォーカスを奪われるのは個人的にも不快なんだ。タブブラウザ化が進み、ポップアップブロックがデフォルトになりつつある現状、制作者・利用者どちらにとってもメリットを感じない。
デスクトップ上の「使いやすさ」を、Web ページ（特にフォーム）にそのまま持ち込まない方が良いよ。もしウィンドウ状の何かが必要だとしても、今ではスクリプトで疑似ウィンドウでも出した方が早いくらいだ。
