(JavaScript)背景・テキストなどの色チェックをするには？
[上に]
[前に]
[次に]
よーろれいひー
2000/02/03(木) 14:41:27
JavaScriptを利用して、そのページで背景色、テキスト色などをボタンを押すことでチェックできるものを作ってみたのですがうまく行きません（入力値に関わらず、背景色が赤・テキスト色がピンク(?)になってしまう）。
いったい、どこが悪いのでしょう？
<HTML>
<BODY BGCOLOR=WHITE TEXT=BLACK>
<FORM NAME="form1" ACTION="">
背景色 <input type=text name="bgcolor" size=20><BR>
背景画像 <input type=text name="background" size=70><BR>
テキスト色<input type=text name="textcolor" size=20><BR>
<P>
リンク <input type=text name="linkcolor" size=20><BR>
Ｖリンク <input type=text name="vlinkcolor" size=20><BR>
Ａリンク <input type=text name="alinkcolor" size=20><BR>
<A HREF="hogehoge.html">リンク</A><BR>
<input type=submit value="このページで色確認をしてみる"
onClick="
document.bgColor ='form1.bgcolor';
document.fgColor ='form1.textcolor';
document.linkColor ='form1.linkcolor';
document.vlinkColor='form1.vlinkcolor';
document.alinkColor='form1.alinkcolor';
return false;">
<input type=reset value="リセット">
</FORM>
</BODY>
</HTML>
初級者
2000/02/03(木) 15:14:52
<input type=submit value="このページで色確認をしてみる"
onClick="
document.form1.bgcolor.value=document.bgColor;
document.form1.textcolor.value=document.fgColor;
document.form1.linkcolor.value=document.linkColor;
document.form1.vlinkcolor.value=document.vlinkColor;
document.form1.alinkcolor.value=document.alinkColor;
return false;">
に変更してみてください。
よーろれいひー
2000/02/03(木) 15:32:09
＞初級者さま
やってみましたが、「このページで色確認をしてみる」をクリックすると
フォーム内に入力された値が
テキスト：#ffffff
リンク：#0000ff（ＮＮの場合、#0000ee）
Ｖリンク：#800080（ＮＮの場合、#551a8b）
Ａリンク：#0000ff（ＮＮの場合、#ff0000）
に変わっただけで、背景やテキストなどの色は変更されませんでした。
それと、私が最初に書いたスクリプトでは、背景画像の設定が分からなかったので省略してしまいましたが、もしそれも分かればお願いします。
ひつじ
[E-Mail]
2000/02/03(木) 15:32:27
document.bgColor = form1.bgcolor.value;
です。
初級者
2000/02/03(木) 15:45:01
現在の背景色等を確認するのかと勘違いしてました。申し訳ない。
全部の式を左右逆にして下さい。
背景画像の設定はJavaScriptでは出来なかったような気がします。
Mugi
[E-Mail]
[HomePage]
2000/02/03(木) 15:58:27
> 背景画像の設定はJavaScriptでは出来なかったような気がします。
4.x以上のブラウザなら可能。
27番です。
http://hp.vector.co.jp/authors/VA013453/js/index.htm
Mugi
[E-Mail]
[HomePage]
2000/02/03(木) 16:10:52
IEでは、bg、fg、link、alink、vlink すべて後から変更可能ですが、
ねすけでは、bg、vlinkしか変更できません。
初級者
2000/02/03(木) 17:06:35
フレーム分けして表示してみては？
例： （かなり長くなってしまいました）
フレームページ
<html>
<frameset rows="*,100">
<frame src="input.html" name="FRAME1">
<frame src="chk.html" name="FRAME2">
</frameset>
</html>
入力ページ(input.html)
<HTML>
<head>
<BODY>
<FORM NAME="form1">
背景色 <input type=text name="bgcolor" size=20><BR>
背景画像 <input type=text name="background" size=70><BR>
テキスト色<input type=text name="textcolor" size=20><BR>
<P>
リンク <input type=text name="linkcolor" size=20><BR>
Ｖリンク <input type=text name="vlinkcolor" size=20><BR>
Ａリンク <input type=text name="alinkcolor" size=20><BR>
<input type=reset value="リセット">
</FORM>
<A HREF="chk.html" target="FRAME2">確認</A><BR>
</BODY>
</HTML>
表示ページ (chk.html)
<HTML>
<script langage="Javascript">
document.write("<body ")
document.write("bgcolor='"+parent.FRAME1.document.form1.bgcolor.value+"' ");
document.write("text='"+parent.FRAME1.document.form1.textcolor.value+"' ");
document.write("link='"+parent.FRAME1.document.form1.linkcolor.value+"' ");
document.write("vlink='"+parent.FRAME1.document.form1.vlinkcolor.value+"' ");
document.write("alink='"+parent.FRAME1.document.form1.alinkcolor.value+"' ");
document.write("background='"+parent.FRAME1.document.form1.background.value+"' >");
</script>
テキスト<br>
<A HREF="hogehoge.html">リンク</A><BR>
</HTML>
よーろれいひー
2000/02/03(木) 17:28:43
初級者さん、すいません。
その間に、「別ウインドウに表示」という形で作ってしまいました。
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function check() {
w = open("", "w","width=300,height=200");
w.document.open();
w.document.write('<BODY BACKGROUND="');
w.document.write(document.form1.background.value);
w.document.write('" BGCOLOR=');
w.document.write(document.form1.bgcolor.value);
w.document.write(' TEXT=');
w.document.write(document.form1.textcolor.value);
w.document.write('>\n');
w.document.write('背景画像を読みこめた場合\n<HR><P>\n');
w.document.write('テキスト<BR>\n');
w.document.write('<FONT COLOR=')
w.document.write(document.form1.linkcolor.value)
w.document.write('>リンク</FONT><BR>\n');
w.document.write('<FONT COLOR=');
w.document.write(document.form1.vlinkcolor.value);
w.document.write('>Ｖリンク</FONT><BR>\n');
w.document.write('<FONT COLOR=');
w.document.write(document.form1.alinkcolor.value);
w.document.write('>Ａリンク</FONT><BR>\n');
w.document.close();
x = open("", "x","width=300,height=200");
x.document.open();
x.document.write('<BODY BGCOLOR=');
x.document.write(document.form1.bgcolor.value);
x.document.write(' TEXT=');
x.document.write(document.form1.textcolor.value);
x.document.write('>\n');
x.document.write('背景画像を読みこめなかった場合\n<HR><P>\n');
x.document.write('テキスト<BR>\n');
x.document.write('<FONT COLOR=')
x.document.write(document.form1.linkcolor.value)
x.document.write('>リンク</FONT><BR>\n');
x.document.write('<FONT COLOR=');
x.document.write(document.form1.vlinkcolor.value);
x.document.write('>Ｖリンク</FONT><BR>\n');
x.document.write('<FONT COLOR=');
x.document.write(document.form1.alinkcolor.value);
x.document.write('>Ａリンク</FONT><BR>\n');
x.document.close();
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE TEXT=BLACK>
<FORM NAME="form1" onSubmit="return check()">
背景色 <input type=text name="bgcolor" size=20><BR>
背景画像 <input type=text name="background" size=70>(http://から指定して下さい)<BR>
テキスト色<input type=text name="textcolor" size=20><BR>
<P>
リンク <input type=text name="linkcolor" size=20><BR>
Ｖリンク <input type=text name="vlinkcolor" size=20><BR>
Ａリンク <input type=text name="alinkcolor" size=20><BR>
<input type=submit value="別ウィンドウで色確認をしてみる">
<input type=reset value="リセット">
</FORM>
</BODY>
</HTML>
御覧になれば分かると思いますが、色のバランスさえわかれば良いので、ウインドウ内ではFONT COLORで表示しているだけです。また、背景画像ありの場合と、無しの場合と二つのウインドウを開くようにしています。
処理はうまく行くようになりましたが、ここで質問です。
今のままだと、二つのウインドウが画面の同じ座標に開いて、重なってしまうのですが、「ウインドウを開く時に画面内座標を指定」する方法なんてあるでしょうか？
ひつじ
2000/02/03(木) 17:38:08
w = open("", "w","width=300,height=200,top=0,left=0");
とほほのリファレンスにのってますよ。
よーろれいひー
2000/02/03(木) 17:50:24
[[解決]]
w = open("", "w","width=300,height=200,top=0,left=0");
x = open("", "x","width=300,height=200,top=200,left=0");
に変えることで、ウインドウも重ならなくなりました。
答えてくださった皆様、ありがとうございました。
[上に]
[前に]
[次に]