No.3
131
5
15pt
http://www.bsc-j.com/~moritake/oboegaki/h_js_smp083.html
JavaScript サンプル：『画像クリックで画像を変更させてみる』
JavaScriptを組み込み合わせるにより可能だと思います。以下サンプルです。動作確認はしていないのでバグっているかもしれませんが。
---------------------------------------------
var clicked = 0;
function change() {
if ( clicked = 0 ) clicked = 1;
else clicked = 0;
document.checkimg.src = ”check”+clicked+”.jpg”;
document.forms[0].mycheckbox.value = clicked;
}
<a href=”javaScript:change()”>
<img src=”type0.jpg” name=”checkimg” border=”0”>
</a>
<input type=hidden name=mycheckbox value=0>
No.4
9123
15pt
取り急ぎ、作ってみました。
<html>
<head>
<title>checkbox</title>
<script type=”text/javascript”>
var box = new Array(0,0,0,0,0);
function invert(num) {
if(box[num-1] == 0) {
box[num-1] = 1;
document.getElementById(”chkbox”+num).src = ”1.png”;
} else {
box[num-1] = 0;
document.getElementById(”chkbox”+num).src = ”0.png”;
}
}
function check() {
var i;
var str = ’’;
for(i=0;i<5;i++) {
str += ’ボタン’+(i+1)+’はチェックされて’;
if(box[i]) {
str += ’いる。’;
} else {
str += ’いない。’;
}
}
alert(str);
}
</script>
</head>
<body>
<a href=”javascript:invert(1)”><img src=”0.png” id=”chkbox1”></a>－
<a href=”javascript:invert(2)”><img src=”0.png” id=”chkbox2”></a>－
<a href=”javascript:invert(3)”><img src=”0.png” id=”chkbox3”></a>－
<a href=”javascript:invert(4)”><img src=”0.png” id=”chkbox4”></a>－
<a href=”javascript:invert(5)”><img src=”0.png” id=”chkbox5”></a>
<input type=”button” value=”確認” onclick=”check();”>
</script>
</body>
</html>
No.5
2491
15pt
さきほどのソース中の”ダブルコーテーションを全部半角にしてください。
ありがとうございました。出来ました。
さらに質問なんですが今迄はチェックボックスに
■■■■■の部分に値を入れてPHPのデータベースより結果を出していました。
今回の場合も同じように値を入れる事が出来るのでしょうか？
No.6
9123
15pt
変ですね…。
”や’が全角になっているということはないですか？
一応こちらにアップしておきましたので、試してみてください。
IE6とFireFox1.0で動作を確認してあります。
画像は全然チェックボックスじゃないですけど、まあ動作は分かると思いますので。
出来ました。上の方のコメントと重複するのですが
今迄はチェックボックスに
■■■■■の部分に値を入れてPHPのデータベースより結果を出していました。
今回の場合も同じように値を入れる事が出来るのでしょうか？
No.7
340
15pt
こんなカンジでどうでしょうか。
hiddenのchkに送りたい値を入れてください。(今はとりあえず「on」にしています)
function check() {
var ele = document.myForm.chk;
if(ele.value == ””) {
// onにする
// valueには送信したい値を記述
document.chkImage.src = ”on.gif”;
ele.value = ”on”;
} else {
// offにする
document.chkImage.src = ”off.gif”;
ele.value = ””;
}
}
<form name=”myForm”>
<a href=”javascript:check()”><img src=”on.gif” name=”chkImage”></a>
<input type=”hidden” name=”chk” value=”on”>
</form>
No.8
30
15pt
同じように値を入れられる方法です。
今までのチェックボックスは生かしたまま、画像部分でチェック処理を行います。
チェックボックスは画面上では必要がないので非表示にし、
チェックボックスに対応する画像を表示します。
画像がチェックされたら、functionで対応するチェックボックスの状態を変更し、画像も変更します。
---- ココカラ ----
<html><head>
<script type=”text/javascript”>
/**
* チェックされたら画像を変更し、それに合わせて
* 対応するチェックボックスのchecked値を変更する。
*
* @param imgObj画像を変更するimgオブジェクト
* @param checkObj対応するチェックボックスのオブジェクト
*/
function changeCheckbox(imgObj,checkObj) {
checkObj.checked = ! checkObj.checked;
if ( checkObj.checked ) {
imgObj.src=”2.png”;// チェックされている時の画像
} else {
imgObj.src=”1.png”;// チェックされていない時の画像
}
}
</script>
</head>
<body >
<form>
<!--
// もとのcheckboxのデータ
// style=”display:none”で表示しないがformのデータとしては受け取ることが可能
// <input type=”checkbox” name=”●●” value=”■■■■■” style=”display:none”>
-->
<input type=”checkbox” name=”box1” value=”■■■■■①” style=”display:none”>
<input type=”checkbox” name=”box2” value=”■■■■■②” style=”display:none”>
<!--
// 画像用データ
-->
<img src=”1.png” name=”checkimg1” border=”0” onclick=”changeCheckbox
(this,document.forms[0].box1)”>■■■■■①
<img src=”1.png” name=”checkimg2” border=”0” onclick=”changeCheckbox
(this,document.forms[0].box2)”>■■■■■②
</form>
</a>
</body></html>
---- ココマデ ----
ありがとうございました。
34
32
1
1
試してみました。
上記の内容は変更せず、0.pngと1.pngを作り同じフォルダに入れてアップしてみましたが画像が表示されず
クリックするとそのURLは無いとなりました。
もう少し教えて頂けないでしょか？