- ベストアンサー
onmouseoverを外部にまとめる
お忙しいところすいません 以下のようなマウスオーバーで背景が変わるテーブルを制作してますが、長くなるので「onmouseover」等をまとめる方法があれば教えてください。 ■---元----------------------■ <head> </head> <body> <table> <tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> </table> </body> </html> ■---希望----------------------■ <head> <script language="JavaScript"> <!-- td#over { onmouseover="style.background='#ccccff'"; onmouseout="style.background='#68ceff'" } //--> </script> </head> <body> <table> <tr> <tr> <td id="over">リンク</td> </tr> <tr> <td id="over">リンク</td> </tr> </table> </body> </html> -------------------------------- ＣＳＳもJavaScript初心者ですので全く的外れな質問かもしれませんがよろしくお願いします。
- tantamu
- お礼率84% (11/13)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<style> td.over{ background-Color:#ffffcc; } td{ background-Color:#68ceff; } </style> <script> window.onload=function(){ var tags=document.getElementsByTagName("td"); for(var i=0;i<tags.length;i++){ tags[i].onmouseover=function(){ this.className="over"; } tags[i].onmouseout=function(){ this.className=""; } } } </script> <table> <tr> <tr> <td>リンク</td> </tr> <tr> <td>リンク</td> </tr> </table> 表示部分についてはclassをつかって設定すると、複数の設定をしたりする 面倒がはぶけます
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
jQueryライブラリを使った方法を。 jquery.jsの入手 http://jquery.com/ 参考 http://semooh.jp/jquery/ <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $('TD.over').hover( function(){//mouseoover $(this).css('background-color','#ffffcc'); },function(){//mouseout $(this).css('background-color','#68ceff'); }); }); </script> idはページ内でユニークでなければいけませんので <td id="over"> → <td class="over"> としてください。 なお、このhover効果がそれほど重要でなければcssだけで十分だと思います。 <style type="text/css"> td.over{ background:#68ceff; } td.over:hover{ background:#ccccff; } </style> IE6では動作しませんがIE7以降および他のメジャーブラウザはこれで動作します。
お礼
早速の回答有り難うございました。 色々な方法があるのですね。jQueryライブラリは知らなかったので参考になりました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <table border="1"> <tr> <td>01</td><td class="over">02</td><td class="over">03</td><td>04</td> </tr> <tr> <td class="over">11</td><td>12</td><td>13</td><td class="over">14</td> </tr> </table> <script type="text/javascript"> //@cc_on //全角空白は半角かタブに置き換えの事 (function(){ var m = null; var c = 'over'; var r = new RegExp('\\b'+c+'\\b'); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseover', function (evt){ var element = evt./*@if(1) srcElement @else@*/target /*@end@*/; if (m) m.style.backgroundColor = '#68ceff'; if (element.tagName == 'TD' && element.className && element.className.match(r)) { element.style.backgroundColor = '#ffc'; m = element; } else { m = null; } }, false); })(); </script>
お礼
早速の回答有り難うございました。 class分けも参考になります。 javascriptをじっくり勉強したいと思います。有り難うございました。
補足
早速の回答有り難うございました。 もしお時間があれば「表示部分についてはclassをつかって設定すると、複数の設定をしたりする面倒がはぶけます」の見本を見せてもれえると助かります。 最終的には複数の色分けをしたかったんです☆