背景画像をボタンクリックで変える方法

[上に] [前に] [次に]
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が未定義なせいではないですか?

[上に] [前に] [次に]