背景画像をボタンクリックで変える方法
[上に]
[前に]
[次に]
kisara
[E-Mail]
2000/04/04(火) 20:23:13
いつもお世話になってます。
また質問ですが、
ボタンとかで背景画像を変更するスクリプトを書きたいのですが、
どうしても出来ません。。。
このラウンジでも何回か質問されてるものだと思いますが、
ネットスケープで表示されなかったり、
レイヤーを使ったもので、うまく動作しなかったりしてます。
できるならば、JavaScriptだけで動作するようにしたいのですが、
何かいいスクリプトはありませんかね。。。
宜しくお願いします。m(。−_−。)m
ヒソカ
2000/04/04(火) 22:45:20
MUGIさんみてないのかな?
このネタMUGIさんのページにあったはずなんだけど。
http://hp.vector.co.jp/authors/VA013453/js/index.htm
ここさがしてみて。
Mugi
[E-Mail]
[HomePage]
2000/04/05(水) 00:07:45
背景を変えるサンプルは27と49です。
> MUGIさんみてないのかな?
4日はラウンジには来ませんでした。
昔みたいに毎日来てるわけじゃないですから。
kisara
2000/04/05(水) 09:39:33
ヒソカさん、MIGIさん返答ありがとうございます。
MIGIさんのスクリプトは以前のラウンジでの質問時にみています。
レイヤーの使い方などもわかりませんでしたので、
自分なりに調べて作ってみたのですが、
やはりうまくいきませんでした。
原因は、多分他のスクリプトも入っていて、
それも画像をチェンジするスクリプトなので
それとの関係がうまくいってないと思いますが、
そこから先どうしたらいいかわかりません。
お手数ですが、お教えください。
念のためスクリプトを載せておきます。
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
body{font-size:12pt}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
//イメージの事前読み込み
if(navigator.appVersion.charAt(0)>=3)
{
movimg=new Array()
movimg[0] = new Image();movimg[0].src='image/cp_capri2.jpg';
movimg[1] = new Image();movimg[1].src='image/cp_capri.GIF';
};
//画像書き換え
function changImg1(imgNoA,imgNoB)
{
if(navigator.appVersion.charAt(0)>=3)
{
document.images[imgNoA].src=movimg[imgNoB].src;
};
};
//-->
</SCRIPT>
<script>
var ie=false
var nc=false
if(document.all){ie=true}
if(document.layers){nc=true}
function bg(file){
if(ie){
document.body.background=file
}
if(nc){
with(document.layers[0].document){
open()
writeln("<body background='"+file+"'></body>")
close()
}}
}
</script>
</HEAD>
<body onload="bg('image/cp_bg.gif')">
<layer width=100% height=100% top=0 left=0 zindex=-1>
<!-- 背景表示用layer -->
</layer>
<layer>
<div align="center"><img src="image/cp_capri2.jpg" border=0></div>
<p><br></p>
<div align="center"><font size="5" color="#CC0000"><blink><b>What's new!!</b></blink></font><br>
<div style="font-size: 8pt">(さかのぼって30日の情報)</div></div>
<center>
ボタンクリックでタイトル画像が変わります。</center>
<FORM>
<INPUT TYPE="button" VALUE=' タイトル1 ' onClick="changImg1(0,0)">
<INPUT TYPE="button" VALUE=' タイトル2 ' onClick="changImg1(0,1)">
<INPUT TYPE="button" VALUE=' タイトル3 ' onClick="changImg1(0,2)">
<INPUT TYPE="button" VALUE=' タイトル4 ' onClick="changImg1(0,3)">
</FORM>
<FORM>
<input type="radio" name=img onclick="bg(document.images['bg1'].src);return false" checked>
<img src="image/cp_bg.gif" name=bg1>
<input type="radio" name=img onclick="bg(document.images['bg2'].src);return false">
<img src="image/cp_bg1.gif" name=bg2>
</FORM>
</layer>
</BODY>
</HTML>
Mugi
[E-Mail]
[HomePage]
2000/04/05(水) 12:25:40
他の掲示板ですが、同じような例があります。
http://www2f.biglobe.ne.jp/~takan/javac/_cgi-bin/wforum/wforum.cgi
キーワード「レイヤーの中に入れる」で検索してください。
Mugi
[E-Mail]
[HomePage]
2000/04/05(水) 12:33:44
ソース書いたほうがいいか。
//画像書き換え
function changImg1(imgNoA,imgNoB)
{
if(navigator.appVersion.charAt(0)>=3)
{
if(document.layers){
document.layers[1].document.images[imgNoA].src=movimg[imgNoB].src
}else{
document.images[imgNoA].src=movimg[imgNoB].src;
}
};
};
kisara
2000/04/05(水) 13:34:24
わざわざすみません。。
いただいたスクリプトに書き換えてやってみたのですが、
出来ませんでした。。。。
ほんとに初心者で申し訳ないのですが、
原因わかりますかね。。。
Mugi
[E-Mail]
[HomePage]
2000/04/05(水) 14:08:52
movimgの2と3が未定義なせいではないですか?
[上に]
[前に]
[次に]