お忙しいところすいません以下のようなマウスオーバーで背景が変わるテーブルを制作してますが、長くなるので「onmouseover」等をまとめる方法があれば教えてください。 ■---元----------------------■ リンクリンク ■---希望----------------------■ リンクリンク -------------------------------- ＣＳＳもJavaScript初心者ですので全く的外れな質問かもしれませんがよろしくお願いします。

jQueryライブラリを使った方法を。 jquery.jsの入手 http://jquery.com/ 参考 http://semooh.jp/jquery/ $(function(){ $('TD.over').hover( function(){//mouseoover $(this).css('background-color','#ffffcc'); },function(){//mouseout $(this).css('background-color','#68ceff'); }); }); idはページ内でユニークでなければいけませんので → としてください。なお、このhover効果がそれほど重要でなければcssだけで十分だと思います。 td.over{ background:#68ceff; } td.over:hover{ background:#ccccff; } IE6では動作しませんがIE7以降および他のメジャーブラウザはこれで動作します。

onmouseoverを外部にまとめる

解決済

質問者：tantamu
質問日時：2009/02/21 15:23
回答数：3件

お忙しいところすいません
以下のようなマウスオーバーで背景が変わるテーブルを制作してますが、長くなるので「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">

</script>
</head>
<body>
<table>
<tr>
<tr>
<td id="over">リンク</td>
</tr>
<tr>
<td id="over">リンク</td>
</tr>
</table>
</body>
</html>

--------------------------------
ＣＳＳもJavaScript初心者ですので全く的外れな質問かもしれませんがよろしくお願いします。

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3ベストアンサー

回答者： yambejp
回答日時：2009/02/21 16:13

<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をつかって設定すると、複数の設定をしたりする
面倒がはぶけます

この回答への補足

早速の回答有り難うございました。
もしお時間があれば「表示部分についてはclassをつかって設定すると、複数の設定をしたりする面倒がはぶけます」の見本を見せてもれえると助かります。

最終的には複数の色分けをしたかったんです☆

補足日時：2009/02/22 00:11

通報する

- 0
- 件

通報する

No.2

回答者： steel_gray
回答日時：2009/02/21 16:11

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以降および他のメジャーブラウザはこれで動作します。

- 0
- 件

通報する

この回答へのお礼

早速の回答有り難うございました。
色々な方法があるのですね。jQueryライブラリは知らなかったので参考になりました。

通報する

お礼日時：2009/02/22 00:11

No.1

回答者： _pipi_
回答日時：2009/02/21 15:49

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