- ベストアンサー
画像マウスオーバーで、checｋboxのON/OFF
お世話になります。 早速質問します。 ある画像一覧を、画像一枚一枚に付属するチェックボックスを使用して、 選別という作業をしています。 [画像を確認→チェックボックスへポインポインタ移動→チェック]という手順です。 しかし、画像が大量にある上、チェックボックスはアクティブな面積が狭いので、実に手間が掛かります。 そこで、画像へのマウスオーバーのみで、チェックのオンオフを切り替えられないかと考えたのですが、 これはjavascriptで可能でしょうか？ 可能でしたら、参考になるコードや、その他ヒントなど教えて頂けないでしょうか。 一応プログラミングについて、phpが中級者程度で、 今回のテーマのプログラムも自分で書いたものです。 javascriptは初級者レベルになります。 アドバイスを宜しくお願いします。
- maru_n
- お礼率61% (26/42)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<!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>
その他の回答 (3)
反応が無いようですが </style>の下の行に <body> を追加してください
- yuu_x
- ベストアンサー率52% (106/202)
やりたいことは可能だと思いますが、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)"> <!-- form じゃ無くても可 --> <div> <!-- 同系列で後ろに input があれば、間に何かが挟まっていても OK --> <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> <!-- 系列が異なる場合は NG --> <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 で拾ってくるようにするとスマートかと思います。
お礼
お礼はコードを理解してからと思っていたのですが、 中々理解し切れないので、失礼ですがお礼だけは済ませる ことにしました。 もう暫く少し時間を掛けて、理解させて頂きます。 巧く動かせれば、かなり手間が省けるはずなので 既に楽しみです。ありがとうございました。
- buddhistic
- ベストアンサー率57% (30/52)
もちろんクリックで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を切り替えたいんです。クリックなしで。 画像の上を、マウスポインタをスライドさせてゆくだけで、 チェックの切り替えが出来れば、相当手間が省けるはずなんです。 難しいでしょうか？
お礼
_pipi_さん失礼しました。詳細なコードまで起こして頂き、 ありがとうございます。 コードの中身が理解出来てからお礼をと考えていたのですが、 全て理解するにはあと半日掛かりそうです。 javascriptは、ブラウザでちょっと面白い動作、表示をさせるためだけの ものかなと思っていたのですが、 自作ツールとして実務処理をさせると、実に便利に振るまって くれるものですね。phpと混在可な点もとてもいいです。 俄然興味が沸きました。 内心、回答して頂いた全ての方に20ポイント振らせて頂きたいのですが、 コードの長さ順に振らせて頂く事にします。