2011.10.24 20:01

[테이블에 링크 걸기]

가끔은 이미지나 텍스트가 아닌 테이블 자체에 링크를 걸어야 할 때가 있습니다. 아주 가끔이고, 그 방법도 쉽습니다.
아래 예제의 빨간줄 부분만 테이블 태그내에 추가해 주면 됩니다. ( 꼭 테이블이 아니라 <tr><td> 에 삽입해도
결과는 같습니다. )

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>테이블에 링크 걸기</title>
</head>
<body>
<table width="500" border="1" style=cursor:pointer;
onClick="document.location.href='http://www.webmadang.net'">
<tr>
<td>&nbsp;&nbsp;나는 링크 걸린 테이블</td>
</tr>
</table>
</body>
</html>


위의 소스를 테스트 해 보시면 알겠지만, 같은 창 내에서 링크된 페이지로 넘어갑니다.
링크란 것이 같은 창내에서 이동도 필요하지만, 새창이 열리면서 링크된 페이지로 넘어가야 할 경우도 있습니다.

[테이블에 링크 걸어서 새창으로 넘기기]

테이블 내 링크를 새창으로 열어서 넘길려면 자바스크립트의 도움이 쪼메 필요합니다. 아래 예제에서 파란색 자바스크립트 소스만 추가하시고, 빨간 색으로 되어있는 onClick 이벤트 발생시 호출되는 함수만 살짝 변경해 주시면 됩니다.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>테이블에 링크 걸기</title>
<script type="text/javascript">
<!--
function openWindow(){

var new_window = window.open("about:blank");
new_window.location.href="http://www.webmadang.net";

}
//-->

</script>
</head>
<body>
<table width="500" border="1" style=cursor:pointer; onClick="javascript:openWindow();">
<tr>
<td>&nbsp;&nbsp;나는 링크 걸린 테이블</td>
</tr>
</table>
</body>
</html>

 

출처 : http://www.webmadang.net


Posted by Fire봉키