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

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

●質問者: future-lab
●カテゴリ:ウェブ制作
✍キーワード:チェックボックス 制作 画像
○ 状態 :終了
└ 回答数 : 8/8件

▽最新の回答へ

1 ● webber1
●15ポイント

http://www.fukushi-net.or.jp/takamoto/php/checkbox/

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


2 ● Mars
●15ポイント

http://d.hatena.ne.jp/Mars/

Mars Diary

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


3 ● peugeot
●15ポイント

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>


4 ● siachan
●15ポイント

取り急ぎ、作ってみました。


<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>

◎質問者からの返答

試してみました。

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

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

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


5 ● えふけー
●15ポイント

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

◎質問者からの返答

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

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

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

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


1-5件表示/8件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



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