PHP & JavaScript Room :: 設置サンプル

<script type="text/javascript">
/***********************************************
* Highlight Table Cells Script- &copy; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

/* セルをハイライトする場合は"TD"、行全体をハイライトする場合は"TR"を指定 */
var highlightbehavior="TR"

var ns6=document.getElementById&&!document.all
var ie=document.all

function changeto(e,highlightcolor){
source=ie? event.srcElement : e.target
if (source.tagName=="TABLE")
return
while(source.tagName!=highlightbehavior && source.tagName!="HTML")
source=ns6? source.parentNode : source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}

function contains_ns6(master, slave) { //check if slave is contained by master
while (slave.parentNode)
if ((slave = slave.parentNode) == master)
return true;
return false;
}

function changeback(e,originalcolor){
if (ie&&(event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")||source.tagName=="TABLE")
return
else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.id=="ignore"))
return
if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
source.style.backgroundColor=originalcolor
}
</script>

<table onMouseover="changeto(event, '#C5E5F3')" onMouseout="changeback(event, 'white')" border="1">
    <tr id="ignore"><th>プロパティ</th><th>構文</th><th>説明</th></tr>
    <tr><td>backgroundColor</td><td><code><em>obj</em>.style.backgroundColor</code></td><td>要素の背景色を取得・設定。色名またはRGB値を設定可能。</td></tr>
    <tr><td>fromElement</td><td><code><em>obj</em>.fromElement</code></td><td>onmouseoverイベントとonmouseoutイベントから送られるエレメントを特定。</td></tr>
    <tr><td>parentElement</td><td><code><em>obj</em>.parentElement</code></td><td>要素の親エレメントを返す。最上位の要素の場合は<span class='em'>NULL</span>を返す。</td></tr>
    <tr><td>srcElement</td><td><code><em>obj</em>.srcElement</code></td><td>イベントで実行される要素を指定。</td></tr>
    <tr><td>toElement</td><td><code><em>obj</em>.toElement</code></td><td>onmouseoverイベントおよびonmouseoutイベントを渡すエレメントを指定。</td></tr>
    <tr><td>tagName</td><td><code><em>obj</em>.tagName</code></td><td>現在の要素のタグ名を返す。</td></tr>
</table>