'mouseover'에 해당되는 글 1건

  1. 2009.10.29 마우스 오버시 색상변경
03.HTML 4.X, HTML5, XML.../HTML/Css/Script2009. 10. 29. 17:54

마우스 오버시 색상변경

반응형
<br>

<style type="text/css">
.black { COLOR:black; }
.red { COLOR:#FF0000; }
.blue { COLOR:BLUE; }
</style>


<font onMouseOver="this.className='red';" onMouseOut="this.className='black';">바보</font>

<br>

<font onMouseOver="this.className='blue';" onMouseOut="this.className='black';">천재</font>

----------------------------------

<td onMouseOver=bgColor="#999999" onMouseOut=bgColor="#000000" bgcolor="#000000"> 내용 </td>

마우스를 올렸을 때의 색상은 onMouseOver=bgColor="#999999"
마우스를 내렸을 때의 색상은 onMouseOut=bgColor="#000000" bgcolor="#000000"

------------------------------------

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--

function setTrColor(obj, color){
        obj.style.backgroundColor=color;
        obj.onmouseout = function(){
                obj.style.backgroundColor=''; //mouseout 시 색상
        }
}
// 뭐...대충 궁여지책으로..ㅋ.ㅋ
//-->
</SCRIPT>

<BODY>
<TABLE width="300" border="1">
<TR onMouseOver="setTrColor(this, '#c0c0c0')" >
        <TD>1</TD>
        <TD>2</TD>
        <TD>3</TD>
</TR>
<TR onMouseOver="setTrColor(this, '#c0c0c0')">
        <TD>4</TD>
        <TD>5</TD>
        <TD>6</TD>
</TR>
<TR onMouseOver="setTrColor(this, '#c0c0c0')">
        <TD>7</TD>
        <TD>8</TD>
        <TD>9</TD>
</TR>
<TR onMouseOver="setTrColor(this, '#c0c0c0')">
        <TD>7</TD>
        <TD>8</TD>
        <TD>9</TD>
</TR>

</TABLE>
</BODY>
</HTML>

-------------------------

<td onMouseOver="this.style.backgroundColor='#cccccc'" style="CURSOR: hand" onMouseOut="this.style.backgroundColor=''" bgColor=#e4e4e4> </td>

Posted by 1010

티스토리툴바