본문 바로가기

HTML/JS/CSS

테이블 셀에 링크 및 마우스오버시 색상변경.

출처 : http://sir.co.kr/bbs/board.php?bo_table=pl_dhtml_javascript&wr_id=113&sca=%C6%C1&page=8

<table border=1 width="400" cellspacing="0" cellpadding="9">
    <tr>
        <td bgcolor='#eeeeee' onMouseOver='this.style.backgroundColor="#299eab"' onMouseOut='this.style.backgroundColor="#eeeeee"' onClick="location='http://google.co.kr'">구글로 이동</td>
    </tr>
    <tr>
        <td bgcolor='#eeeeee' onMouseOver='this.style.backgroundColor="#ff00ff"' onMouseOut='this.style.backgroundColor="#eeeeee"' onClick="location='http://naver.co.kr'">네이버로 이동</td>
    </tr>
    <tr>
        <td bgcolor='#eeeeee' onMouseOver='this.style.backgroundColor="#a9aecc"' onMouseOut='this.style.backgroundColor="#eeeeee"' onClick="location='http://empas.co.kr'">엠파스로 이동</td>
    </tr>
    <tr>
        <td bgcolor='#eeeeee' onClick="location='http://sir.co.kr'">롤 오버 없음. 썰 이동</td>    </tr>
    <tr>
        <td bgcolor='#eeeeee' onMouseOver='this.style.backgroundColor="#aaee00"' onMouseOut='this.style.backgroundColor="#eeeeee"'>셀 링크 없음</td>
    </tr>
</table>



<td style="cursor:hand" > 속성을 넣어주면 마우스오버시 손가락 모양.

테이블 바탕색이 아닌 글자색 변경은 this.style.background -> this.style.color