WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:画像をボタンで変化させたい。

竹田雅紀[MAIL][URL][WriteDate : Fri Oct 6 07:26:13 2000]

1つの枠で画像をいれかえるのはわかったのですが2つ重ねた場合
レイアで上になっている画像、下の画像をそれぞれ変化させたいです。
ボタンをおして、また3つの場合もどうすればよいかどなたか
宜しくお願いいたします。

ちゃいぱ[MAIL][URL][WriteDate :Fri Oct 6 10:41:39 2000]

とりあえず、レイヤーでやってみました。
当然、レイヤーなのでネスケオンリーです!

<SCRIPT LANGUAGE="JavaScript">
function test1(){
    document.L1.visibility = "hide";
    document.L2.visibility = "show";
}
function test2(){
    document.L1.visibility = "show";
    document.L2.visibility = "hide";
}
function test3(){
    document.L3.visibility = "hide";
    document.L4.visibility = "show";
}
function test4(){
    document.L3.visibility = "show";
    document.L4.visibility = "hide";
}

</SCRIPT>
<LAYER visibility="show" id="L1" z-index=1 top=30 left=50 OnMouseOver="test1()" OnMouseOut="test2()"><IMG src="sws001bg.gif" name="img1" ></LAYER>
<LAYER visibility="hide" id="L2" z-index=2 top=30 left=50 OnMouseOver="test1()" OnMouseOut="test3()"><IMG src="V9.gif" name="img1" ></LAYER>
<LAYER visibility="show" id="L3" z-index=3 top=50 left=30 OnMouseOver="test3()" OnMouseOut="test4()"><IMG src="Image1.gif" name="img2"></LAYER>
<LAYER visibility="hide" id="L4" z-index=4 top=50 left=30 OnMouseOver="test3()" OnMouseOut="test4()"><IMG src="V0.gif" name="img2"></LAYER>


竹田雅紀[MAIL][URL][WriteDate :Mon Oct 9 19:03:16 2000]

お返事誠にありがとうございます。
すいませんがよく一つのボタンで1カ所が
画像が変化するのはあるのですが2つ、3つ。。
画像のあらわれるとこも2.3.。
となりかさねてへんかさせたいのですが
どうしたらよいのでしょうか、エクスプローラ、ネスケでも
いけるようにしたいのです。
宜しくお願いいたします。

ちゃいぱ[MAIL][URL][WriteDate :Tue Oct 10 09:39:12 2000]


>画像が変化するのはあるのですが
すみませんが、そのページのURLを教えて下さい!

竹田雅紀[MAIL][URL][WriteDate :Tue Oct 10 14:54:23 2000]

ちゃいぱ様たけだです。http://www.bousi.com/のところ
デシュミレーションの所です。またこれに画像をかさねたりして
いきたいのですがかさねてそれぞれへんかさせたいのです。


ちゃいぱ[MAIL][URL][WriteDate :Tue Oct 10 15:18:36 2000]

カラーシュミレーションの所ですね!

これは、ブラウザでソースの表示をして、解析するしかないですね...。

ぱっと見た感じだと、ネスケとIE両方処理していて、画像データを入替えているだけでみたいです。

わたしも、解析してみます。
今日は、これから外に出ないといけないので(ネットできない)、明日、お返事します。

竹田さんも、解析して見て下さい!

竹田雅樹[MAIL][URL][WriteDate :Tue Oct 10 23:23:34 2000]

すいませんがガゾウデーターをいれかえたいのです。
じぶんのhttp://www.sportsuya.com/tshirts/simulation.htmのとこの分でそでと身頃部分をかさねて画像をそれぞれいれかいたのです。
また3つ4つの場合でもおなじようにそれぞれノボタンもつくって
ボタンえをおすと画像がかわる。
すいませんがよろしくおねがいいたします。

ちゃいぱ[MAIL][URL][WriteDate :Wed Oct 11 10:09:32 2000]

以下が基本型です。まず以下を理解して下さい。

<HTML>
<BODY>
<SCRIPT Language="JavaScript">
<!--
  function setBGIMG(layName,image){  
    if(document.layers)document.layers[layName].background.src=image 
    if(document.all)document.all(layName).style.backgroundImage='url('+image+')'
  }
</SCRIPT>
<DIV ID="bousi" 
     STYLE="position:absolute;left:0px;top:0px;
     width:300;height:340;clip:rect(0,300,340,0); visibility: visible; z-index: 2; background-image: url(V0.gif); layer-background-image: url(V1.gif); border: 1px none #000000"> 
</DIV>
  <table width="298" border="0" cellspacing="0" cellpadding="0" height="354" align="left">
    <tr> 
      <td height="80" width="50"> </td>
      <td height="80" width="200"> </td>
      <td height="80" width="50"> </td>
    </tr>
    <tr> 
      <td height="150" width="50"> </td>
      <td height="150" width="200" align="center" valign="middle">  </td>
      <td height="150" width="50"> </td>
    </tr>
    <tr> 
      <td width="50" height="100"> </td>
      <td width="200" height="100"> </td>
      <td width="50" height="100"> </td>
    </tr>
  </table>
<FORM>
<input type="button" name="buttonx" value="テスト" onClick="setBGIMG('bousi','V9.gif')">
</FORM>
</BODY>
</HTML>

要は、レイヤの画像を入替えているだけです。
これを応用すれば、3つ4つの場合も同じです。
尚、テーブルはレイヤと重なるようにして、パッテングしているだけです。(他の文書を見せるため、逆に云うと、これがないとレイヤに隠れちゃう)

基本を押さえないと応用は難しいですよ!
がんばって!

ちゃいぱ[MAIL][URL][WriteDate :Wed Oct 11 10:13:40 2000]

上記の
layer-background-image: url(V1.gif); 

layer-background-image: url(V0.gif); 
でした。
回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]