【1】テーブルのセルをマウスオーバー時に全セルカラーを変更し、一部のセルをマウスオーバーしときだけ
その他のセルカラーを解除したい。
【現在の状況】
色々マウスＡＶＡなサイトを当たっており、全セルカラーの変更方法は分かったのですが、特定のセルだけを触った時に
周りのセルのカラーを解除する方法が分かりません。
下記何も入っていないセルをマウスオーバーすると、背景色が黄色くなり、リンクというセルをマウスオーバーすると背景が赤くなります。
リンクというマウスＡＶＡ文字がはいったセルをマウスオーバーした時に、そのセルの赤い背景色を残し、周りの黄色い背景色を解除したいです。
IE6でも動いてほしいので、ジャバスクリプトで調べています。
根本的な記述が間違っているかもしれませんが、方法をお教えいただけますと幸いです。
【サンプルの提示】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題ドキュメント</title>
</head>
<body>
<table width="800" border="1" cellpadding="0" cellspacing="0" onmouseover="this.style.backgroundColor='#FFFFCC'" onmouseout="this.style.backgroundColor=''">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td rowspan="3" align="center" valign="middle" class="test" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor=''"><a href="#">リンク</a></td>
<td rowspan="3" align="center" valign="middle" class="test" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor=''"><a href="#">リンク</a></td>
<td rowspan="3" align="center" valign="middle" class="test" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor=''"><a href="#">リンク</a></td>
<td rowspan="3" align="center" valign="middle" class="test" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor=''"><a href="#">リンク</a></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
【何をしてみたのか】
→ これまでどんなことを試したのか、どんなことを調べてみたのか、などを記入してください。
【検索用語】
テーブル 背景色 マウスオーバー ジャバスクリプト など
【備考】
HTML,css等はある程度手打ちができるのですが、ジャバスクリプトについては何となくわかる程度で、自分で考えたロジック等を
ソースとして打ち込む事が出来ないため、参考サイトのソース等を参考に自分で部分的に変更することぐらいしかできません。
セルカラーの変更という点については、参考も多数ありましたが、マウスオーバーしたテーブル内でのその先の動作などについては
参考が見つからず、こちらで質問させていただきました。
上記質問内容でお分かりになる方おられましたら、お教えいただけますと幸いです。
- 1 名前： アルト ： 2010/09/01（水） 14:10 ID:bjjnOPPo sub-Qs
- □がセル、☆が特定のセル、○がマウスオーバー部分と仮定すると、こんな流れでしょうか？？
□□□ ○
□☆□
↓
■■●
■★■
↓
□□□
□●□
これをJSで書かれるのでしたら、HTMLタグ内に書くのではなく、
JSだけを分離させた状態(HTML内外どちらでも)で書かれた方がやり易そうに思います。
処理の流れとしては、マウスオーバーされた一番下位の要素からtableまで遡って背景色を変え、
特定のtdにマスオーバーした場合だけtableまで遡って背景色を消し、tdの背景色を変える、
というような感じでいけそうです。
コードなしのヒントのみですみません；
マウスイベントの監視についてはここTAGindexのログを検索したら色々情報が出てくると思います。
（蛇足ですが、私が休止前の最後に行なった質問でもテーブルを色々弄っているので、
もしかしたら何か参考になる部分があるかもしれません。未だ結果報告が出来ておらず申し訳ない感じですが＞＜）
もっとスマートなやり方があるかもしれませんが、ご参考までに。
- 2 名前： mouse ： 2010/09/01（水） 14:10 ID:tYZlnfK. sub-.G
- >>アルト様
流れの図解ありがとうございました。
図解していただいた内容で全く相違ありません。
おっしゃられるとうり、外部できちんとした記述をして、
動かすのが自分も理想であると思います。
出来れば自分で記述したいのですが、現状全くかけずの状態です。
ヒントだけでもありがたいです、さっそく過去ログの方も一度
探してみたいと思います。
また、その他で記事を見られておられる方でもしソースの
ヒント等いただけそう方がおられましたら引き続き宜しくお願いします。