<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN" “http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Table Background Change</title>
<style type="text/css">
td.off {background:#CCCCCC}
td.on {background:#999999}
</style>
</head>
<body>
<table width="150" cellpadding="3">
<tr>
<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu 1 </font></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu 2 </font></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu 3</font></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu 4 </font></td>
</tr>
</table>
</body>
</html>
출처 : Changing
-- 원본 --
Changing table background on MouseOver
Demo: [click here] to view the sample page.
This tutorial will teach you how to make a menu like tables that will change background color when you mouseOver. If you have noticed I have used it on my index page.
1.First create your menu on your page. Then identify your two colors, one is for mouseOver and another one for initial color. In my case mouseOver color is: #999999 and initial color is: #CCCCCC
Now copy this code to the head of you document. (Between <HEAD></HEAD> tags)
<style type=”text/css”>
td.off { background: #cccccc;}
td.on { background: #999999;}
</style>
Change the color in blue with your own colors.
off will be our initial table color which is lighter grey #cccccc.
td.on will be our changing color which is darker grey #999999.
3.Now we have to apply the CSS to the table that you have created. Insert the following code in every <td> tag inside your table.
class=”off” onmouseover=”this.className=’on‘” onmouseout=”this.className=’off‘”
So your code should look like this:
<td class=”off” onmouseover=”this.className=’on‘” onmouseout=”this.className=’off‘”>MENU 1</td>
Let’s go through the code one by one:
1: class=”off“ – Assigns the off class of our CSS to the table cell, which means initially the table column background will have a color of #CCCCCC.
2: onmouseover=”this.className=’on‘” – Assigns the on class of our CSS to the table column, when we mouseOver on it.
3: onmouseout=”this.className=’off‘” – Assigns the off class of our CSS to the table column back, when we take away the mouse from it.
'progarm_old > [HTML-JS]' 카테고리의 다른 글
| 움직이는 태그marquee (0) | 2012.07.27 |
|---|---|
| [asp] 특수문자변환 (0) | 2012.07.24 |
| 객체, DOM, 노드에 대해서 (0) | 2012.07.11 |
| getElementById, getElementsByTagName, getAttribute, setAttribute (0) | 2012.07.11 |
| 금지단어 설정하기 (0) | 2012.06.21 |