人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: y0sh1yuk1
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:.jpg JavaScript スクリプト ソース ボタン
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● ito-yu
●20ポイント

<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で確認済

◎質問者からの返答

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


2 ● llusall
●20ポイント

<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 ダミー

◎質問者からの返答

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


3 ● nabetomo
●20ポイント

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

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; //押下拒否

}

◎質問者からの返答

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


4 ● miyamuko
●20ポイント ベストアンサー

・ボタンを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>
◎質問者からの返答

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


5 ● aki73ix
●20ポイント

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>

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ