問題討論區


【Dreamweaver 網頁設計】文章精華區


【教學】 橫跨五大瀏器皆可使用的「表格變色效果」



橫跨五大瀏器皆可使用的「表格變色效果」
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1169
瀏覽表單時,較貼心的設計則會採取灰白相間的色彩,以提高辨視度,但比較麻煩的事,當今天欄位很多時,拖曳下捲抽時,一不小時可能就拉到其它的欄位了,若能讓滑鼠上去時,該列的所有欄位全部變換色彩時,將更有助於瀏覽。


雖然onMouseOver以及onMouseOut並不難製作,但若要能在各大瀏覽器正運作時,那就得要花點心思,為了能滿足滿目前各大瀏覽器的所需,因此花了點時間,作了一些修正,讓此事件皆能在IE、Firefox、Safari、Chirome、Opera ......等瀏覽器運作。


Open in new window



【onMouseOver】【onMouseOut】語法如下:


<head>.....</head>之間:

<script> function mm(n,m){ if(m==true){ document.getElementById(n.id).style.backgroundColor='#D9E7F0'; }else{ document.getElementById(n.id).style.backgroundColor=''; } } </script>


<body>......</body>之間:

<table width="510" border="1" cellspacing="0" cellpadding="0">
<
tr id="tr1" valign="top" onmouseover="mm(this,true);" onmouseout="mm(this,null);">
<
td>&nbsp;</td>
<
td>&nbsp;</td>
<
td>&nbsp;</td>
</
tr>
<
tr id="tr2" valign="top" onmouseover="mm(this,true);" onmouseout="mm(this,null);">
<
td>&nbsp;</td>
<
td>&nbsp;</td>
<
td>&nbsp;</td>
</
tr>
<
tr id="tr3" valign="top" onmouseover="mm(this,true);" onmouseout="mm(this,null);">
<
td>&nbsp;</td>
<
td>&nbsp;</td>
<
td>&nbsp;</td>
</
tr>
</
table>


範例預覽 http://www.minwt.com/file/sampleview/javascript/over_out.html


本教學由「梅干桑」老師提供

2008/10/30 17:02
 


回覆: 橫跨五大瀏器皆可使用的「表格變色效果」
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
如果使用jQuery的話..

HTML部份

<table width="510" border="1" cellspacing="0" cellpadding="0">
    <
tr>
        <
td>&nbsp;</td>
        <
td>&nbsp;</td>
        <
td>&nbsp;</td>
    </
tr>
    <
tr>
        <
td>&nbsp;</td>
        <
td>&nbsp;</td>
        <
td>&nbsp;</td>
    </
tr>
    <
tr>
        <
td>&nbsp;</td>
        <
td>&nbsp;</td>
        <
td>&nbsp;</td>
    </
tr>
</
table>


script部份

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
    $(function(){
        $("tr").hover(function(){
            $(this).css('backgroundColor', '#D9E7F0');
        }, function(){
            $(this).css('background-color', '');
        });
    });
//-->
</script>

2009/2/15 17:00
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS