마우스오버시 테이블 색 서서히 변화주기
페이지 정보
본문
<head>와 </head>사이에 넣어주세요
<script language="JavaScript">
<!--
var tInC=null;
var tIdC=null;
var tIdCOn = new Array(0,0,0,0);
var tIdCOff = new Array(1,1,1,1);
function tBgFIn(obj, col,idNum) {
if(tInC != obj && tInC != null && tIdCOn[idNum] == 0) tBgFOut(tInC,tIdC);
if(tIdCOn[idNum] == 0) {
tIdCOn[idNum] = 1;
tIdCOff[idNum] = 0;
tInC=obj;
tIdC=idNum;
changeColor(obj, col);
}
}
function tBgFOut(obj,idNum) {
if(tIdCOff[idNum] == 0) {
tIdCOff[idNum] = 1;
tIdCOn[idNum] = 0;
changeColor(obj, "#ffffff");
}
}
function changeColor(obj, col) {
obj.filters.blendTrans.apply();
obj.style.backgroundColor= col;
obj.filters.blendTrans.play();
}
//-->
</script>
<body>와 </body>사이에 넣어주세요
<table width="400" height="50" cellpadding="0" cellspacing="1" border="0" bgcolor="#FF00CC">
<tr>
<td onMouseOver="tBgFIn(bgColorId0, 'pink',0)" onMouseOut="tBgFOut(tInC,tIdC)" id="bgColorId0" style="background-color: #ffffff; filter: blendTrans(duration=0.5);" width="200" height="50" align="center"> </td>
<td width="200" height="50" onMouseOver="tBgFIn(bgColorId1, '#ffffff',1)" onMouseOut="tBgFOut(tInC,tIdC)" id="bgColorId1" style="background-color: skyblue; filter: blendTrans(duration=0.5);" align="center"> </td>
<td width="200" height="50" onMouseOver="tBgFIn(bgColorId2, '#FCE0E0',2)" onMouseOut="tBgFOut(tInC,tIdC)" id="bgColorId2" style="background-color: #ffffff; filter: blendTrans(duration=0.5);" align="center"> </td>
<td width="200" height="50" onMouseOver="tBgFIn(bgColorId3, '#ffffff',3)" onMouseOut="tBgFOut(tInC,tIdC)" id="bgColorId3" style="background-color: #E2CBF9; filter: blendTrans(duration=0.5);" align="center"> </td>
</tr>
</table>
onMouseOver="tBgFIn(bgColorId0, 'pink',0)" → 마우스를 올렸을 때 바뀔 색
background-color: #ffffff → 배경색
<script language="JavaScript">
<!--
var tInC=null;
var tIdC=null;
var tIdCOn = new Array(0,0,0,0);
var tIdCOff = new Array(1,1,1,1);
function tBgFIn(obj, col,idNum) {
if(tInC != obj && tInC != null && tIdCOn[idNum] == 0) tBgFOut(tInC,tIdC);
if(tIdCOn[idNum] == 0) {
tIdCOn[idNum] = 1;
tIdCOff[idNum] = 0;
tInC=obj;
tIdC=idNum;
changeColor(obj, col);
}
}
function tBgFOut(obj,idNum) {
if(tIdCOff[idNum] == 0) {
tIdCOff[idNum] = 1;
tIdCOn[idNum] = 0;
changeColor(obj, "#ffffff");
}
}
function changeColor(obj, col) {
obj.filters.blendTrans.apply();
obj.style.backgroundColor= col;
obj.filters.blendTrans.play();
}
//-->
</script>
<body>와 </body>사이에 넣어주세요
<table width="400" height="50" cellpadding="0" cellspacing="1" border="0" bgcolor="#FF00CC">
<tr>
<td onMouseOver="tBgFIn(bgColorId0, 'pink',0)" onMouseOut="tBgFOut(tInC,tIdC)" id="bgColorId0" style="background-color: #ffffff; filter: blendTrans(duration=0.5);" width="200" height="50" align="center"> </td>
<td width="200" height="50" onMouseOver="tBgFIn(bgColorId1, '#ffffff',1)" onMouseOut="tBgFOut(tInC,tIdC)" id="bgColorId1" style="background-color: skyblue; filter: blendTrans(duration=0.5);" align="center"> </td>
<td width="200" height="50" onMouseOver="tBgFIn(bgColorId2, '#FCE0E0',2)" onMouseOut="tBgFOut(tInC,tIdC)" id="bgColorId2" style="background-color: #ffffff; filter: blendTrans(duration=0.5);" align="center"> </td>
<td width="200" height="50" onMouseOver="tBgFIn(bgColorId3, '#ffffff',3)" onMouseOut="tBgFOut(tInC,tIdC)" id="bgColorId3" style="background-color: #E2CBF9; filter: blendTrans(duration=0.5);" align="center"> </td>
</tr>
</table>
onMouseOver="tBgFIn(bgColorId0, 'pink',0)" → 마우스를 올렸을 때 바뀔 색
background-color: #ffffff → 배경색
댓글목록
등록된 댓글이 없습니다.