代替色とマウスオーバーの効果を読みやすい一覧表示

この記事では、ユーザのための読みやすいシンプルなリストを作成する方法について説明します。
これを行うには、2つの単純な手段を使用します：

• リストの異なる行の交互の色;
• マウスオーバーで選択した行を強調表示します。

例を作り、我々はユーザーが私達の電子商取引サイトで利用可能な製品のリストを示すことができると言ってみましょう。 ：我々が達成することの結果、以下の

マウスでのプレゼンスハイライ​​タが、それがさらにすぐに我々の関心の件名に関連するなりつつとしては、リストの各項目を読み取るために、異なる線の交互に色を使用することが容易に明らかである。

私たちのリストを作るために、我々はそれを活性化するために単純なHTMLテーブル、いくつかの命令とCSS DHTMLのビットを使用する。 しかしみましょう度。

CSSで始まると私たちのスタイルシートのコンテンツの下に見てみましょう：

 table.tbElenco







 {



  



国境：1pxの固体＃808080;



  



フォントファミリ：MS Pゴシック、MS Pゴシック、MS Pゴシック;



  



フォントサイズ：10pxの;



  



色：＃000000;







 }







 table.tbElenco目







 {



  



背景：＃808080;



  



色：＃FFFFFF;



  



フォントの太さ：太字;







 }







 table.tbElenco TD







 {



  



ボーダー底：1pxの固体＃CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



背景：＃FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



背景：＃EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



背景：＃FFFF00;







 }

我々は何をしたかは非常に簡単です：その後、我々は様式化され、その全体<TH> <TD>全体（'tbElenco'）のようなクラスを、割り当てることによって、まず定型化されたテーブル、そして我々は3つに対応する3つの異なるクラスを作成しました私たちの異なるラインのステータス：正常、代替と強調した。

私たちのテーブルのコードを追っていきましょう。

 <table cellspacing="0" cellpadding="2" class="tbElenco">







 <TR>







 <TH>製品</ TH>







 <TH>個数</ TH>







 <TH>価格</ TH>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <TD>カメラ</ TD>







 <TD> 3 </ TD>







 <TD> 100.00ユーロ</ TD>







 </ TR>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <TD>モバイル</ TD>







 <TD> 2 </ TD>







 <TD> 150.00ユーロ</ TD>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <TD> 20インチ液晶テレビ</ TD>







 <TD> 1 </ TD>







 <TD> 220.00ユーロ</ TD>







 </ TR>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <TD> MP3プレーヤー</ TD>







 <TD> 1 </ TD>







 <TD> 60.00ユーロ</ TD>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <TD> DVDプレーヤー</ TD>







 <TD> 1 </ TD>







 <TD> 80.00ユーロ</ TD>







 </ TR>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <TD>コンソールゲーム</ TD>







 <TD> 1 </ TD>







 <TD> 200.00ユーロ</ TD>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <TD> GPSナビゲータ</ TD>







 <TD> 7 </ TD>







 <TD> 140.00ユーロ</ TD>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







ミニDVDビデオカメラ<TD> </ TD>







 <TD> 1 </ TD>







 <TD> 270.00ユーロ</ TD>







 </ TR>







 </表>

ご覧のように、それは我々が（<TR>）クラス'normal'と'AC'別の行にどちらかに割り当てるために世話をした簡単なHTMLのテーブルです。

マウスのライン上の行の外観を刺激するために私たちは、あなたが置いて、クラスに戻ったときに、それぞれクラス"ハイライト"の動的な割り当てを提供する要素（<TR>）onmouseoverイベントと onmouseoutイベントを関連付けるマウスが行を離れたときに開始します。