画像マウスオーバーで、checｋboxのON/OFF

解決済

質問者：maru_n
質問日時：2008/12/17 01:38
回答数：4件

お世話になります。
早速質問します。

ある画像一覧を、画像一枚一枚に付属するチェックボックスを使用して、
選別という作業をしています。
[画像を確認→チェックボックスへポインポインタ移動→チェック]という手順です。
しかし、画像が大量にある上、チェックボックスはアクティブな面積が狭いので、実に手間が掛かります。

そこで、画像へのマウスオーバーのみで、チェックのオンオフを切り替えられないかと考えたのですが、
これはjavascriptで可能でしょうか？

可能でしたら、参考になるコードや、その他ヒントなど教えて頂けないでしょうか。

一応プログラミングについて、phpが中級者程度で、
今回のテーマのプログラムも自分で書いたものです。
javascriptは初級者レベルになります。

アドバイスを宜しくお願いします。

通報する

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

質問の本文を隠す

回答 (4件)

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

No.3ベストアンサー

回答者： _pipi_
回答日時：2008/12/17 09:17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>TEST</title>
<style type="text/css">
.imgbox{ background-color:#eee; border:1px #aaa solid; width:86px; height:86px; padding:1px; float:left; }
.imgbox img { border:1px #fff solid; width:80px; height:60px; margin-bottom:2px; }
.imgbox div{ overflow:hidden; font-size:10px;}
</style>

<div id="imgCheck"></div>
<script type="text/javascript">
//@cc_on
Number.prototype.zero = function(n){ return ('0000000000'+ this).slice(-n); }
var html = '';
for(i=0;i<30;i++){
var src = 'img'+(i.zero(4))+'jpg';
html += '<div class="imgbox"><img src="' + src + '" alt="'+src+'"><div><input type="checkbox" value="'+src+'">'+src+'</div></div>';
}
document.getElementById('imgCheck').innerHTML = html;
document.getElementById('imgCheck')./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseover', chk, false);
function chk( evt ){
var node = evt.target || evt.srcElement;
if( node.nodeName == 'INPUT' && node.type =='checkbox' ) node.checked = !node.checked;
}
</script>

- 0
- 件

通報する

No.4

回答者： _pipi_
回答日時：2008/12/18 15:25

反応が無いようですが

</style>の下の行に
<body>
を追加してください

- 0
- 件

通報する

この回答へのお礼

_pipi_さん失礼しました。詳細なコードまで起こして頂き、
ありがとうございます。
コードの中身が理解出来てからお礼をと考えていたのですが、
全て理解するにはあと半日掛かりそうです。

javascriptは、ブラウザでちょっと面白い動作、表示をさせるためだけの
ものかなと思っていたのですが、
自作ツールとして実務処理をさせると、実に便利に振るまって
くれるものですね。phpと混在可な点もとてもいいです。
俄然興味が沸きました。

内心、回答して頂いた全ての方に20ポイント振らせて頂きたいのですが、
コードの長さ順に振らせて頂く事にします。

通報する

お礼日時：2008/12/19 17:11

No.2

回答者： yuu_x
回答日時：2008/12/17 05:19

やりたいことは可能だと思いますが、HTML の構成にもよるので、

下は一例です。

[JavaScript]
function nextSiblingElement(n){ return n && (n = n.nextSibling) ? n.nodeName == 'INPUT' ? n : arguments.callee(n) : null; }
function switchedByFrontIMG(evt){
try{
var trigger = evt.target || evt.srcElement;
var target = null;

if(trigger.nodeName == 'IMG'){
target = nextSiblingElement(trigger);
target && (target.checked = !target.checked);
}
}catch(exp){ throw exp; }
}

[HTML]
<form action="xxxx" onmouseover="switchedByFrontIMG(event)"> 
<div>

<img src="xxx" width="xxx" height="xxx" alt=""><br><input type="checkbox" name="xxxx">
<img src="xxx" width="xxx" height="xxx" alt=""><input type="checkbox" name="xxxx">
<p><img src="xxx" width="xxx" height="xxx" alt=""><input type="checkbox" name="xxxx"></p>
<p><img src="xxx" width="xxx" height="xxx" alt=""><span>xxx</span><input type="checkbox" name="xxxx"></p>


<img src="xxx" width="xxx" height="xxx" alt=""><p><input type="checkbox" name="xxxx"></p>
<table summary="">
<tr><td><img src="xxx" width="xxx" height="xxx" alt=""></td><td><input type="checkbox" name="xxxx"></td></tr>
</table>
</div>
</form>

あまり離れている場合は、name 又は id で拾ってくるようにするとスマートかと思います。

- 0
- 件

通報する

この回答へのお礼

お礼はコードを理解してからと思っていたのですが、
中々理解し切れないので、失礼ですがお礼だけは済ませる
ことにしました。

もう暫く少し時間を掛けて、理解させて頂きます。
巧く動かせれば、かなり手間が省けるはずなので
既に楽しみです。ありがとうございました。

通報する

お礼日時：2008/12/19 16:54

No.1

回答者： buddhistic
回答日時：2008/12/17 02:54

もちろんクリックでON/OFFを切り替えるものとしてお答えします。

（マウスオーバー　は、カーソルを重ねただけの状態を言います。）

JavaScriptは必要ないですよ。

<label for="check01"><img src="hoge.png" /></label>
<input id="check01" name="fuga" value="on" />

このように、クリックで反応させたいものをlabelタグで囲い、
for属性で操作先のチェックボックス（などのフォーム要素）のIDを指定すると
お望みの動作をしてくれると思います。

この回答への補足

アドバイスありがとうございます。
こういったhtmlの書き方がるのは知りませんでした。
勉強になりました。

ですが・・・ですね、実はbuddhisticさんの仰る、そのマウスオーバーで
on/offを切り替えたいんです。クリックなしで。
画像の上を、マウスポインタをスライドさせてゆくだけで、
チェックの切り替えが出来れば、相当手間が省けるはずなんです。

難しいでしょうか？

補足日時：2008/12/17 03:20

通報する