今だけ人気マンガ100円レンタル特集♪

例えば、offという画像があり、その画像をクリックするとoff画像がon画像に変わり、もう一度クリックするとon画像になるというのを、チェックボックスで実現したいのですが、どなたかご教授願います。
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

#2です。



画像をクリックしてチェックボックスをon/offしたいということでしょうか?
#2のソースでそのように稼働しますけどスクリプトでやりたいのですか?

この回答への補足

ありがとうございます。
最終的にやりたいことが近づいてきましたが、
チェックボックスが複数個、仮に4個あり、
onとoffの画像もそれぞれ4種類あった際、
例 A、B、C、D、Aのオンとオフ、Bのオンとオフというように、
画像もそれぞれ変えたいというのが最終的にやりたい内容です。
※画像はAのオンとオフ用の画像、BはBのオンとオフの画像というようにそれぞれ画像がことなります。

よろしくお願いします。

補足日時:2007/11/27 15:47
    • good
    • 0

フォームでcheckboxを配置するところで、


代わりに画像を使いたい、という事でしょう?

マウスでしか操作できなくなるとか、弊害がありますが一応サンプルです。

<script type="text/javascript">
function sample(Img,name){
var onImg = 'on.gif';
var offImg = 'off.gif';
var Input = document.getElementsByName(name)[0];
if(Input.value){
Input.value = '';
Img.src = offImg;
}else{
Input.value = 'on';
Img.src = onImg;
}
}
</script>


<img src="off.gif" alt="" width="" height=""
onclick="sample(this,'CBOX1')">
<input type="hidden" name="CBOX1">
    • good
    • 0

こんな感じでどうでしょう?



<script>
function changeImg(obj,id){
var img=document.getElementById(id);
img.src=obj.checked?"on.gif":"off.gif";
}
</script>
<label for="check1"><img id="image1" src="off.gif"></label>
<input type="checkbox" id="check1" onClick="changeImg(this,'image1')">
<label for="check2"><img id="image2" src="off.gif"></label>
<input type="checkbox" id="check2" onClick="changeImg(this,'image2')">
<label for="check3"><img id="image3" src="off.gif"></label>
<input type="checkbox" id="check3" onClick="changeImg(this,'image3')">

この回答への補足

ありがとうござます、
大変恐縮ですが、チェックボックスをクリックした際のイベントではなく、画像をクリックした際のイベントととして実行したいです。
すみませんが、よろしくお願いします。

補足日時:2007/11/14 19:20
    • good
    • 0

まず



>offという画像があり、その画像をクリックするとoff画像がon画像に変わり、もう一度クリックするとon画像になるというのを

のソースを示してください。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QJavaScriptとチェックボックスで画像の切替

今月に入りJavaScriptの勉強を始めましたところ、
チェックボックスを使った画像の切り替えができなくて困っています。

具体的にはチェックボックスをチェックしたら画像を切り替えさせたいだけなのですが
対象画像一つに対してチェックボックスで切り替えることはできました。
しかし複数の画像にIDを割り当てて各々に対応するチェックボックスを
クリックすると画像を切り替えることができません。

勿論各々の画像毎に関数を追加していけば切り替えはできるのですが
一つの関数ですっきり収めたいのです。

作成したコードは以下に記しておきます。
どうかよろしくお願いいたします。

<script type="text/javascript">

function sample(imageID,checkbox) {
if (checkbox.checked) {
document.getElementById(imageID).src = "on.png";

} else {
document.getElementById(imageID).src = "on.png";

}
}
</script>

<img src="off.png" id="test1" alt="" />
<img src="off.png" id="test2" alt="" />

<form>
<input type="checkbox" onClick ="sample(test1','this')" />
<input type="checkbox" onClick ="sample(test2','this')" />
</form>

今月に入りJavaScriptの勉強を始めましたところ、
チェックボックスを使った画像の切り替えができなくて困っています。

具体的にはチェックボックスをチェックしたら画像を切り替えさせたいだけなのですが
対象画像一つに対してチェックボックスで切り替えることはできました。
しかし複数の画像にIDを割り当てて各々に対応するチェックボックスを
クリックすると画像を切り替えることができません。

勿論各々の画像毎に関数を追加していけば切り替えはできるのですが
一つの関数ですっきり収めたいのです。

作...続きを読む

Aベストアンサー

>document.getElementById(imageID).src = "on.png";
elseの処理が「on.png」になってますがこれ「off.png」の間違いじゃ?

><input type="checkbox" onClick ="sample(test1','this')" />
シングルコーテーションの位置がおかしいです。
正解↓
<input type="checkbox" onClick ="sample('test1',this)" />

Q画像をクリックしてラジオボタンにチェック

タイトルのそのままなのですが、
ロゴを募集するサイトを作成しているのですが
<label></label>でいけるかな?と思ったらできませんでした。
まだまだひよっこなので・・・。
どのような方法でもいいのでどなたかご教授ください。
よろしくお願いします~

Aベストアンサー

ちょっと質問がわかりにくいのですが、
「画像とそれに対となるラジオボタンが1セットとして、そのセットが数セット存在し手いる状態で、画像を押したらセットとなるラジオボタンを選択させたい。」
ということでしょうか?

その前提で記入します。

JavaScriptを使用してこんな感じでいかがでしょう
<input type=radio id=rdo1><img src="file.jpg" border=0 onClick="javascript:rdo1.checked=true;" style="cursor: hand;">

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QチェックボックスのOnとOffを2つの画像にするには

チェックボックスのOnとOffを2つの画像にして、POSTで通常通り
値を取得できる方法を教えてください。

Aベストアンサー

#1です。

例えばこんな感じ?
class="imgbox"を設定してある、inputとその後にあるimgが対になっているものとしています。(あまり厳密にチェックしていませんので、このルール以外で設置すると対応関係がおかしくなります)
画像はbtn1.gif、btn2.gifがチェックのon、offの画像と仮定。

<html>
<head>
<style type="text/css">
form input.imgbox { display:inline; }
form img.imgbox { display:none; }
</style>
<script type="text/javascript">
window.onload = function(){
elm = document.getElementsByTagName('IMG');
for (i=0; i<elm.length; i++) if (checkcls(elm[i])) set(elm[i]);
}
function set(e, f) {
var tmp = e.previousSibling;
while (tmp && tmp.nodeName!='INPUT') tmp = tmp.previousSibling;
if (tmp && tmp.type == 'checkbox' && checkcls(tmp)) {
if (f) tmp.checked = !tmp.checked;
tmp.style.display = 'none';
e.style.display = 'inline';
e.src = tmp.checked?'btn1.gif':'btn2.gif';
}
}
function checkcls(e){
var k = -1, cls = e.className.split(' ');
while (cls[++k]) if (cls[k]=='imgbox') return true;
return false;
}
</script>
</head>

<body>
<form action="" method="">
<input type="checkbox" name="cbx1" class="imgbox">
<img src="" class="imgbox" onclick="set(this,1);">チェックボックス1
<br>
<input type="checkbox" name="cbx2" class="imgbox">
<img src="" class="imgbox" onclick="set(this,1);">チェックボックス2
<br>
<input type="submit" value="送信">
</form>
</body>
</html>

#1です。

例えばこんな感じ?
class="imgbox"を設定してある、inputとその後にあるimgが対になっているものとしています。(あまり厳密にチェックしていませんので、このルール以外で設置すると対応関係がおかしくなります)
画像はbtn1.gif、btn2.gifがチェックのon、offの画像と仮定。

<html>
<head>
<style type="text/css">
form input.imgbox { display:inline; }
form img.imgbox { display:none; }
</style>
<script type="text/javascript">
window.onload = function(){
elm = document....続きを読む

Q

<div ~ </div> で囲まれたテキスト文字を取得する方法はありますか?

「 <div class="TEST" id="TEST">?</div> 」

上記のような、?部分の表示内容によって、処理を分けたいのです。

Aベストアンサー

手っ取り早いのはinnerHTMLとか・・・
きちんとやるならDOMで処理が必要

<script>
function check(){
var tag=document.getElementById("TEST");
alert(tag.innerHTML)
}
</script>
<div class="TEST" id="TEST">?</div>

<input type="button" value="check" onclick="check()">


人気Q&Aランキング