TABLE 엘레멘트에서 줄에 어둡게하거나 밝게할 수 있는 기능을 가능하게한다.

script object.style.behavior="url('rowover.htc')";
object.addBehavior("rowover.htc");
HTML <TABLE style="behavior:url('rowover.htc')" id=idVal>
XML 없음
인수 idVal 개체의 유일한 인식자 문자열이다.
특기

window.onload 이벤트가 발생되기 전에는 스크립트로 아래 속성이나 이벤트에 접속할 수 없다. 문서가 완전히 로딩되고, onload 이벤트가 발생되면 해당 페이지의 비헤이버가 적용되고, 모든 속성, 메서드, 이벤트를 스크립트로 사용할 수 있다. 이벤트 발생전에 스트립트로 개체에 접속을 시도하면 스트립트는 그 속성이 개체에서 지원되지 않는다는 오류를 발생시킨다.

목록에 열거된 스타일 이외에 rowover 비헤이버는 스타일 속성 cursor를 지원한다.

table 엘레멘트에서 cellSpacing 애트리뷰트를 0으로 설정하여야 한다. 이 애트리뷰트 값이 설정되지 않거나 0보다 크면 같은 줄에서 다른 칸으로 이동하는 동안 강조를 상실할수 있다.

이 비헤이버는 IE5(win16,win32,unix,mac)부터 적용된다.


attribute property 설명
ro--hover-background roHoverBackground rowover 비헤이버가 사용되는 경우 마우스를 테이블 줄에 올렸을 때 디스플레이되는 배경색상을 반환하거나 설정한다.
ro--hover-color roHoverColor rowover 비헤이버가 사용되는 경우 테이블의 강조(highlight) 텍스트의 색상을 반환하거나 설정한다.
ro--light-background roLightBackground rowover 비헤이버가 사용되는 경우 테이블 줄들의 대체 띄줄의 밝은 색상을 반환하거나 설정한다.
ro--selected-background roSelectedBackground rowover 비헤이버가 사용되는 경우 선택된 테이블 줄의 배경색상을 반환하거나 설정한다.
ro--selected-color roSelectedColor rowover 비헤이버가 사용되는 경우 선택된 테이블 줄의 텍스트 색상을 반환하거나 설정한다.
ro--shade-background roShadeBackground rowover 비헤이버가 사용되는 경우 테이블 줄들의 대체 띄줄의 어두운 색상을 반환하거나 설정한다.
selectable selectable 테이블의 줄을 클릭하면 그 줄의 모든 칸들의 내용이 선택되는가를 부울값으로 반환하거나 설정한다.
striped striped rowover 비헤이버에서 대체 테이블 줄(row)들이 그림자 지는가를 부울값으로 반환하거나 설정한다.

메서드 설명
reset rowover 비헤이버에서 선택된 테이블의 줄을 선택에서 해제한다.

이벤트 설명
onerror rowover 비헤이버에서 속성에 유효하지 않은 값을 할당하거나 읽기 전용에 할당하려 할때 발생한다.
onrowclick rowover 비헤이버에서 마우스 커서가 테이블의 줄을 선택하면 발생된다.
onrowout rowover 비헤이버에서 마우스 커서가 줄에서 나가면 발생된다.
onrowover rowover 비헤이버에서 마우스 커서가 줄에 들어오면 발생된다.

적용
개체 IE
<TABLE style="behavior:url('rowover.htc')" id=idVal> IE5(win16,win32,unix,mac)

테이블 줄을 클릭하고 아래, 위로 이동시켜 보라.

<HTML>
<HEAD>
<TITLE>언어 참조 - Javascript - 비헤비어(behavior) - rowover</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=euc-kr">
<HEAD>
<SCRIPT language="Javascript">
function DoMoveUp(){
  MainTable.MoveUp();
}
function DoMoveDown(){
  MainTable.MoveDown();
}
</SCRIPT>
</HEAD>

<BODY>
<CENTER>
<FORM>
<TABLE id="MainTable" border="1" width="400" style="behavior:url(../../public/Mover.htc)" selectable="true">
<THEAD bgcolor=eeeeee>
<TR>
<TH colspan="3"><B>도시 목록</B></TH>
</TR>
<TR>
<TH>도시</TH><TH>국가</TH><TH>대륙</TH>
</TR>
</THEAD>

<TBODY style=cursor:hand>
<TR>
<TD>서울</TD><TD>대한민국</TD><TD>아시아</TD>
</TR>
<TR>
<TD>런던</TD><TD>영국</TD><TD>유럽</TD>
</TR>
<TR>
<TD>뉴욕</TD><TD>미국</TD><TD>북아메리카</TD>
</TR>
<TR>
<TD>시드니</TD><TD>호주</TD><TD>오세아니아</TD>
</TR>
<TR>
<TD>나이로비</TD><TD>케냐</TD><TD>아프리카</TD>
</TR>
<TR>
<TD>파리</TD><TD>프랑스</TD><TD>유럽</TD>
</TR>
<TR>
<TD>산프란시스코</TD><TD>미국</TD><TD>북아메리카</TD>
</TR>
<TR>
<TD>부에노스아이레스</TD><TD>알젠틴</TD><TD>남아메리카</TD>
</TR>
<TR>
<TD>북경</TD><TD>중국</TD><TD>아시아</TD>
</TR>
</TBODY>
<TFOOT bgcolor=eeeeee>
<TR>
<TD colspan="3">9 도시들</TD>
</TR>
</TFOOT>
</TABLE>
</FORM>

<P align=center style="width:400">
<INPUT type=button value="위로 이동" onclick="DoMoveUp()">
<INPUT type=button value="아래로 이동" onclick="DoMoveDown()"><BR><BR>

<INPUT type=button value="이창 닫기" onclick="javascript:self.close()">
</P>
</CENTER>

</BODY>
</HTML>