チェックボックスを自分で制作した画像で使用する事は可能でしょうか?可能な場合そのやり方も教えて下さい。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/03/25 12:00:34
  • 終了:--

回答(8件)

id:webber1 No.1

webber1回答回数254ベストアンサー獲得回数02005/03/25 12:07:26

ポイント15pt

PHPでチェックボックスを使う方法が、載ってます。

id:Mars No.2

Mars回答回数203ベストアンサー獲得回数202005/03/25 13:55:07

ポイント15pt

多少問題もありますが、Javascriptで行ったサンプルがありますので参考にどうぞ。(3月14-15日の記事)

id:peugeot No.3

peugeot回答回数131ベストアンサー獲得回数52005/03/25 13:55:37

ポイント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>

id:siachan No.4

siachan回答回数83ベストアンサー獲得回数152005/03/25 14:03:33

ポイント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>

id:future-lab

試してみました。

上記の内容は変更せず、0.pngと1.pngを作り同じフォルダに入れてアップしてみましたが画像が表示されず

クリックするとそのURLは無いとなりました。

もう少し教えて頂けないでしょか?

2005/03/25 14:27:54
id:fk_2000 No.5

えふけー回答回数249ベストアンサー獲得回数12005/03/25 14:37:32

ポイント15pt

さきほどのソース中の”ダブルコーテーションを全部半角にしてください。

id:future-lab

ありがとうございました。出来ました。

さらに質問なんですが今迄はチェックボックスに

■■■■■の部分に値を入れてPHPのデータベースより結果を出していました。

今回の場合も同じように値を入れる事が出来るのでしょうか?

2005/03/25 15:02:27
id:siachan No.6

siachan回答回数83ベストアンサー獲得回数152005/03/25 14:58:05

ポイント15pt

変ですね…。

”や’が全角になっているということはないですか?

一応こちらにアップしておきましたので、試してみてください。

IE6とFireFox1.0で動作を確認してあります。

画像は全然チェックボックスじゃないですけど、まあ動作は分かると思いますので。

id:future-lab

出来ました。上の方のコメントと重複するのですが

今迄はチェックボックスに

■■■■■の部分に値を入れてPHPのデータベースより結果を出していました。

今回の場合も同じように値を入れる事が出来るのでしょうか?

2005/03/25 15:05:13
id:kgi No.7

kgi回答回数34ベストアンサー獲得回数02005/03/25 15:39:39

ポイント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>

id:nomico No.8

nomico回答回数3ベストアンサー獲得回数02005/03/27 04:09:11

ポイント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>


---- ココマデ ----

id:future-lab

ありがとうございました。

2005/03/28 13:42:20

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

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

トラックバック

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

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

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