Javascriptの質問です。

・ボタンを2つ用意し、ボタン1を押すと画像がgazou1.jpgからgazou2.jpgに変わる。
・ボタン2はgazou2.jpgからgazou1.jpgに戻す
・最初はボタン1は押せるが、ボタン2は押せない状態
・ボタン1を押した後は、ボタン2は押せるようになるが、ボタン1はボタン2が押されるまで押せない
というスクリプトを作りたいと考えています。ソースなどお願いいたします。

回答の条件
  • 1人2回まで
  • 登録:2006/05/18 11:49:57
  • 終了:2006/05/19 00:10:37

ベストアンサー

id:miyamuko No.4

miyamuko回答回数29ベストアンサー獲得回数112006/05/18 12:44:20

ポイント20pt

・ボタンを2つ用意し、ボタン1を押すと画像がgazou1.jpgからgazou2.jpgに変わる。

・ボタン2はgazou2.jpgからgazou1.jpgに戻す

まず img タグに id を振っておき JavaScript で id を指定してオブジェクトを取得し src プロパティを書き換えるようにします。

・最初はボタン1は押せるが、ボタン2は押せない状態

ボタン2 は <button disabled="disabled"> として HTML に書くことで最初は押せないようにします。

・ボタン1を押した後は、ボタン2は押せるようになるが、ボタン1はボタン2が押されるまで押せない

JavaScript で disabled プロパティを書き換えるようにします。

なお、拡張性を考慮してこのスクリプトでは切り替える画像を間単に追加できるような作りにしています。

<html>
<head>
  <script type="text/javascript">
    <!--
    function switch_image(target, src) {
      // 画像の src を切り替える。
      var image = document.getElementById("gazou");
      image.src = src;
      // <p id="switcher"> の下の <button> の一覧を取得して、
      // 今 click されたボタンなら disable にし、それ以外は enable にする。
      var switcher = document.getElementById("switcher")
      var buttons = switcher.getElementsByTagName("button");
      for (var i = 0; i < buttons.length; i++) {
        if (buttons[i] == target) {
          buttons[i].disabled = "disabled";
        } else {
          buttons[i].disabled = "";
        }
      }
    }
    //-->
  </script>
</head>
<body>
  <p><img id="gazou" src="gazou1.jpg" /></p>
  <p id="switcher">
    <button onclick="switch_image(this, 'gazou2.jpg')">画像2に切り替え</button>
    <button onclick="switch_image(this, 'gazou1.jpg')" disabled="disabled">画像1に切り替え</button>
    <!-- ボタンはいくつでも追加可能 -->
  </p>
</body>
</html>
id:y0sh1yuk1

ありがとうございますm(__)m

2006/05/19 00:08:26

その他の回答(4件)

id:ito-yu No.1

ito-yu回答回数323ベストアンサー獲得回数142006/05/18 12:08:16

ポイント20pt

<script type="text/javascript"><!--//

function toggle(n){

if(n == 1){

document.toggleimg.src = 'gazou2.jpg';

document.formname.togglebtn1.disabled = true;

document.formname.togglebtn2.disabled = false;

}else if(n == 2){

document.toggleimg.src = 'gazou1.jpg';

document.formname.togglebtn1.disabled = false;

document.formname.togglebtn2.disabled = true;

}

}

//--></script>

<img name="toggleimg" src="gazou1.jpg">

<form name="formname" method="post">

<input type="button" name="togglebtn1" value="ボタン1" onClick="toggle(1);">

<input type="button" name="togglebtn2" value="ボタン2" onClick="toggle(2);" disabled>

</form>

FirefoxとIE6で確認済

id:y0sh1yuk1

ありがとうございますm(__)m

2006/05/19 00:05:48
id:llusall No.2

llusall回答回数505ベストアンサー獲得回数612006/05/18 12:10:28

ポイント20pt

<html>

<body >


<img id="idImg" src="gazou1.jpg" >

<br>

<input type="button" id="idBtn1" value="ボタン1" onclick="setImg(1)">

<input type="button" id="idBtn2" value="ボタン2" onclick="setImg(2)" disabled >


</body>

</html>

<script language='JavaScript'> 

<!-- 

function setImg(flg){

    if(flg==1){

        document.all.idImg.src = "gazou2.jpg";

        document.all.idBtn1.disabled = true;

        document.all.idBtn2.disabled = false;

    }else{

        document.all.idImg.src = "gazou1.jpg";

        document.all.idBtn1.disabled = false;

        document.all.idBtn2.disabled = true;

    }

}

//--> 

</script> 


http://www.yahoo.co.jp ダミー

id:y0sh1yuk1

ありがとうございますm(__)m

2006/05/19 00:06:25
id:nabetomo No.3

nabetomo回答回数125ベストアンサー獲得回数62006/05/18 12:34:04

ポイント20pt

こんなので実現可能だと思います。

function btn1_click{

document.all.img.src = gazou2.jpg; //イメージ切り替え

document.all.btn1.disabled=true; //押下拒否

document.all.btn2.disabled=false; //押下許可

}

function btn1_click{

document.all.img.src = gazou1.jpg; //イメージ切り替え

document.all.btn1.disabled=false; //押下許可

document.all.btn2.disabled=ture; //押下拒否

}

id:y0sh1yuk1

ありがとうございますm(__)m

2006/05/19 00:07:21
id:miyamuko No.4

miyamuko回答回数29ベストアンサー獲得回数112006/05/18 12:44:20ここでベストアンサー

ポイント20pt

・ボタンを2つ用意し、ボタン1を押すと画像がgazou1.jpgからgazou2.jpgに変わる。

・ボタン2はgazou2.jpgからgazou1.jpgに戻す

まず img タグに id を振っておき JavaScript で id を指定してオブジェクトを取得し src プロパティを書き換えるようにします。

・最初はボタン1は押せるが、ボタン2は押せない状態

ボタン2 は <button disabled="disabled"> として HTML に書くことで最初は押せないようにします。

・ボタン1を押した後は、ボタン2は押せるようになるが、ボタン1はボタン2が押されるまで押せない

JavaScript で disabled プロパティを書き換えるようにします。

なお、拡張性を考慮してこのスクリプトでは切り替える画像を間単に追加できるような作りにしています。

<html>
<head>
  <script type="text/javascript">
    <!--
    function switch_image(target, src) {
      // 画像の src を切り替える。
      var image = document.getElementById("gazou");
      image.src = src;
      // <p id="switcher"> の下の <button> の一覧を取得して、
      // 今 click されたボタンなら disable にし、それ以外は enable にする。
      var switcher = document.getElementById("switcher")
      var buttons = switcher.getElementsByTagName("button");
      for (var i = 0; i < buttons.length; i++) {
        if (buttons[i] == target) {
          buttons[i].disabled = "disabled";
        } else {
          buttons[i].disabled = "";
        }
      }
    }
    //-->
  </script>
</head>
<body>
  <p><img id="gazou" src="gazou1.jpg" /></p>
  <p id="switcher">
    <button onclick="switch_image(this, 'gazou2.jpg')">画像2に切り替え</button>
    <button onclick="switch_image(this, 'gazou1.jpg')" disabled="disabled">画像1に切り替え</button>
    <!-- ボタンはいくつでも追加可能 -->
  </p>
</body>
</html>
id:y0sh1yuk1

ありがとうございますm(__)m

2006/05/19 00:08:26
id:aki73ix No.5

aki73ix回答回数5224ベストアンサー獲得回数272006/05/18 12:46:38

ポイント20pt

http://nifberry.727.net/test/hatena128/hatena192.htm

これがメインの部分です OnClickでそれぞれのボタンが無効になり、片方が有効になるようにしています

<FORM Name="form1">

<INPUT TYPE="BUTTON" NAME="B1" VALUE="イメージ 2" 

OnClick="JavaScript:C_Img(1);document.form1.B1.disabled=true;document.form1.B2.disabled=false;">

<INPUT TYPE="BUTTON" NAME="B2" VALUE="イメージ 1" 

OnClick="JavaScript:C_Img(0);document.form1.B2.disabled=true;document.form1.B1.disabled=false;">

</FORM>

<IMG SRC="test1.gif" name="img1">

まず、最初のロード時にボタン2を無効にして起きましょう

<BODY OnLoad="JavaScript:document.form1.B2.disabled=true;">

これがスクリプト本体ですImage1に呼び出す画像を登録しておきます

<script language="JavaScript">

<!--

var Image1 = new Array();

Image1[0] = new Image;

Image1[1] = new Image;

Image1[0].src = 'test1.gif';

Image1[1].src = 'test2.gif';

function C_Img(i) { 

//イメージの変更

  document.img1.src=Image1[i].src;

}

// -->

</script>

id:y0sh1yuk1

みなさんありがとうございましたm(__)m

2006/05/19 00:09:10

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません