ボタンを押すたびに交互に切り替わる背景画像

解決済

質問者：noname#53163
質問日時：2008/02/16 14:42
回答数：4件

初めて質問させていただきます。
ボタンを押すたびに、押したボタンの背景画像を交互に切り替わせるにはどうすればいいでしょうか？
例えば×と○の画像があったとします。
○が背景だった場合、クリックすると×に、
×が背景だった場合、クリックすると○になるという物です。
初心者の為、詳しく教えてください。お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： ai10
回答日時：2008/02/17 00:07

画像ファイルを入れておく変数は、配列変数にした方がよろしいかと。

かつ、Imageオブジェクトにしておくとメモリ上に画像データが読み込まれますので瞬時に表示されます。(メモリを使うのでメモリリークに注意。)
また、HTML側でonclickとしないでスクリプトの中でやってしまった方が無難です。
--------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
　<head>
　　<meta http-equiv='Content-Type' content='text/html; charset=Shift_JIS'>
　　<meta http-equiv='Content-Style-Type' content='text/css'>
　　<meta http-equiv='Content-Script-Type' content='text/javascript'>
　　<script type='text/javascript'>
　　　//@cc_on
　　　window./*@if (@_jscript) attachEvent( 'on'+ @else@*/addEventListener( /*@end@*/ 'load', function ()
　　　{
　　　　　var arrImgs = [], imgIdx = 0, imgLen, objBtn;
　　　　　(arrImgs[0] = new Image()).src = 'images/A.jpg';
　　　　　(arrImgs[1] = new Image()).src = 'images/B.jpg';
　　　　　imgLen = arrImgs.length; // 毎回arrImgs.lengthを取得していると遅くなるので、最初に取得しておく。
　　　　　objBtn = document.getElementById( 'id-btn' );
　　　　　objBtn && objBtn./*@if (@_jscript) attachEvent( 'on'+ @else@*/addEventListener( /*@end@*/ 'click', function ()
　　　　　{
　　　　　　　// 毎回、button要素を取得しなおしている。
　　　　　　　if( (objBtn = document.getElementById( 'id-btn' )) )
　　　　　　　{
　　　　　　　　　imgIdx = ( imgIdx + 1 ) % imgLen;
　　　　　　　　　objBtn.style.backgroundImage = 'url(' + arrImgs[imgIdx].src + ')';
　　　　　　　}
　　　　　}, false );
　　　}, false );
　　</script>
　　<style type='text/css'>
　　　input#id-btn{
　　　　　background-image : url(images/A.jpg);
　　　}
　　</style>
　</head>
　<body>
　　<div>
　　　<input type='button' id='id-btn' value='背景画像チェンジ'>
　　</div>
　</body>
</html>
--------------------------------------------------------------
毎回、button要素を取得しなおしているのは、
万が一、他のスクリプトで(動的に)input要素が削除されたりした場合などを考慮してのこと。
input要素じゃなくても、その親要素に対してなんらかの操作がされる場合もあるかもしれない。
まぁ、そんなことないと思うけど…。
(あんまり、変数objBtnをイベントの中で使うのはしたくなかったが、しちゃった。あまり、よろしくない使い方かもしれません。)

ちなみに、ボタンの背景を変更する場合、ＩＥ７では上記のソースではうまくできなかった。
一応buttonタグならＩＥ7でもできるみたいです。
buttonタグはオススメできないけど。
<input type='image'>は送信ボタン扱いっぽいし…。
--------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
　　<script type='text/javascript'>
　　　//@cc_on
　　　window./*@if (@_jscript) attachEvent( 'on'+ @else@*/addEventListener( /*@end@*/ 'load', function ()
　　　{
　　　　　var arrImgs = [], imgIdx = 0, imgLen, objBtn;
　　　　　(arrImgs[0] = new Image()).src = 'images/A.jpg';
　　　　　(arrImgs[1] = new Image()).src = 'images/B.jpg';
　　　　　imgLen = arrImgs.length; // 毎回arrImgs.lengthを取得していると遅くなるので、最初に取得しておく。
　　　　　objBtn = document.getElementById( 'id-btn' );
　　　　　objBtn && objBtn./*@if (@_jscript) attachEvent( 'on'+ @else@*/addEventListener( /*@end@*/ 'click', function ()
　　　　　{
　　　　　　　var cobj;
　　　　　　　// 毎回、button要素を取得しなおしている。
　　　　　　　if( (objBtn = document.getElementById( 'id-btn' )) )
　　　　　　　{
　　　　　　　　　if( !(cobj = objBtn.childNodes[0]) ) return; // div
　　　　　　　　　if( !(cobj = cobj.childNodes[0]) ) return; // div
　　　　　　　　　if( !(cobj = cobj.childNodes[0]) ) return; // img
　　　　　　　　　imgIdx = ( imgIdx + 1 ) % imgLen;
　　　　　　　　　cobj.src = arrImgs[imgIdx].src;
　　　　　　　}
　　　　　}, false );
　　　}, false );
　　</script>
　　<style type='text/css'>
　　　button#id-btn
　　　{
　　　　　width : 100px;
　　　　　height : 20px;
　　　}
　　　button#id-btn div
　　　{
　　　　　position : relative;
　　　　　width : 100px;
　　　　　height : 20px;
　　　　　cursor : default;
　　　}
　　　button#id-btn div div
　　　{
　　　　　position : absolute;
　　　　　left : 0px;
　　　　　top : 0px;
　　　}
　　　button#id-btn div div img
　　　{
　　　　　position : absolute;
　　　　　left : 0px;
　　　　　top : 0px;
　　　　　width : 94px;
　　　　　height : 14px;
　　　}
　　</style>
</head>
<body>
　<div>
　　<button id='id-btn'><div><div><img src='images/A.jpg'></div><div>画像チェンジ</div></div></button>
　</div>
</body>
</html>
--------------------------------------------------------------
ちなみに、動作確認はしていないです。

個人的にはtype='image'もbuttonも一度も使ったことがない。
そもそもボタンに画像を使うより、
imgタグをボタン代わりとして使ったほうがいいのではないかと思う。
この方がどのブラウザでもできるはずだし。

- 0
- 件

通報する

No.3

回答者： leap_day
回答日時：2008/02/16 23:25

こんにちは

こんなやつですか？

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

<input type="button" id="imagebutton" style="background-image:url(○.gif);" value="ボタン背景変更" onclick="imgch()">

style="background-image:url();"　で背景画像指定
url()の()内には画像のアドレスが入ります(計4ヶ所)
画像を1回しか表示しないのであれば<input type=～の中の style=""の中に　background-repeat:no-repeat;　を追加
※Operaではできません（－－；）

代替えとして背景画像の違うボタンを２つ用意して表示の有無を切り替えてやる方法
<script type="text/javascript"></script>

<input type="button" id="imagebutton0" style="background-image:url(○.gif);" value="ボタン背景変更" onclick="imgch(this,'imagebutton1')">
<input type="button" id="imagebutton1" style="background-image:url(×.gif);display:none;" value="ボタン背景変更" onclick="imgch(this,'imagebutton0')">

- 0
- 件

通報する

No.2

回答者： auty
回答日時：2008/02/16 16:02

申し訳ありません。

ボタンですね。
---------------------------------------------------------------
<html>
<head>
<title>画像の変更</title>
<script language="JavaScript" type="text/javascript">

</script>
</head>

<body bgcolor="#ffffff">
<input type="button" value="画像の変更" onClick="changeImage()">
<hr />
<img src="img1.gif" id="imgA" border="0" alt="画像をクリックすると、画像が入れ替わります。">
<br>
</body>
</html>
---------------------------------------------------------------

- 0
- 件

通報する

No.1

回答者： auty
回答日時：2008/02/16 15:37

画像が2つの場合の簡単な例を参考にしてみてください。

画像のファイル名を
　　　img1.gif、img2.gif
とし、HTMLファイルと同じディレクトリにあるとします。
---------------------------------------------------------------
<html>
<head>
<title>画像の変更</title>
<script language="JavaScript" type="text/javascript">

</script>
</head>

<body bgcolor="#ffffff">
画像をクリックすると、画像が入れ替わります。
<hr />
<a href="JavaScript:changeImage()"><img src="img1.gif" name="imgA" border="0" alt="画像をクリックすると、画像が入れ替わります。"></a>
<br>
</body>
</html>
---------------------------------------------------------------