테이블에 라운드 넣기






 테이블에 라운드 넣기


<table id="ta" width="300" height="100" border="0" radius="3" rborder="#999999" rbgcolor="#ffffff">
<tr>
<td align=center>라운드가 들어간 테이블입니다.</td>
</tr>
</table>


radius="3" : 라운드의 크기

rborder="#999999" : 라운드라인의 컬러

rbgcolor="#ffffff" : 테이블 배경색


 


   꼭 들어가야되는 스크립트


<head> 태그 사이에 아래의 스크립트가 들어가야 합니다.


<script>
function roundTable(objID) {
var obj = document.getElementById(objID);
var Parent, objTmp, Table, TBody, TR, TD;
var bdcolor, bgcolor, Space;
var trIDX, tdIDX, MAX;
var styleWidth, styleHeight;


// get parent node
Parent = obj.parentNode;
objTmp = document.createElement('SPAN');
Parent.insertBefore(objTmp, obj);
Parent.removeChild(obj);


// get attribute
bdcolor = obj.getAttribute('rborder');
bgcolor = obj.getAttribute('rbgcolor');
radius = parseInt(obj.getAttribute('radius'));
if (radius == null || radius < 1) radius = 1;
else if (radius > 6) radius = 6;


MAX = radius * 2 + 1;


/*
create table {{
*/
Table = document.createElement('TABLE');
TBody = document.createElement('TBODY');


Table.cellSpacing = 0;
Table.cellPadding = 0;


for (trIDX=0; trIDX < MAX; trIDX++) {
TR = document.createElement('TR');
Space = Math.abs(trIDX - parseInt(radius));
for (tdIDX=0; tdIDX < MAX; tdIDX++) {
TD = document.createElement('TD');


styleWidth = '1px'; styleHeight = '1px';
if (tdIDX == 0 || tdIDX == MAX - 1) styleHeight = null;
else if (trIDX == 0 || trIDX == MAX - 1) styleWidth = null;
else if (radius > 2) {
if (Math.abs(tdIDX - radius) == 1) styleWidth = '2px';
if (Math.abs(trIDX - radius) == 1) styleHeight = '2px';
}


if (styleWidth != null) TD.style.width = styleWidth;
if (styleHeight != null) TD.style.height = styleHeight;


if (Space == tdIDX || Space == MAX - tdIDX - 1) TD.style.backgroundColor = bdcolor;
else if (tdIDX > Space && Space < MAX - tdIDX - 1) TD.style.backgroundColor = bgcolor;


if (Space == 0 && tdIDX == radius) TD.appendChild(obj);
TR.appendChild(TD);
}
TBody.appendChild(TR);
}


/*
}}
*/


Table.appendChild(TBody);


// insert table and remove original table
Parent.insertBefore(Table, objTmp);
}
</script>


 


<body> 태그 마지막에 아래의 스크립트가 삽입되어야 합니다.


<script>roundTable("ta");</script>



 






by 여우 | 2007/11/16 11:34 | 웹디자인 | 트랙백 | 덧글(0)

 

테이블에 셀롤오버와 링크걸기




여우네^_^)//

▲위에 텍스트에 마우스를 올려보세요^^* 

 

<td onmouseover=this.style.backgroundColor="cccccc" onmouseout=this.style.backgroundColor="white" style=cursor:hand; onClick=location.href="링크주소" >

 

설명 :

backgroundColor="cccccc"   마우스 올렸을때 컬러명 "cccccc"

backgroundColor="white"      기본배경 "white"





by 여우 | 2007/11/16 09:17 | 웹디자인 | 트랙백 | 덧글(0)

 

스타일시트로 모서리가 라운딩 처리된 테이블

 
아래의 소스를 <html> 태그와 교체하세요.
 
<html xmlns:v="urn:schemas-microsoft-com:vml">    
 
 
아래의 소스를 <head>와 </head>태그 사이에 넣어 주세요.
 
<style>
v\:* { behavior: url(#default#VML); }
</style>           
 
 
아래의 소스를 <body></body>사이에 넣어 주세요.
 
<v:roundrect style="width:500;height:100; filter: Alpha(Opacity=70)" arcsize="0.2" fillcolor="blue" strokecolor="red" strokeweight="2">
<table width=100% height=100%>
<tr>
<td align=center valign=center>
테이블 안에 들어간 내용
</td>
</tr>
</table> 
 
 
설명>
1번과 2번 과정 소스는 그대로 넣어 주세요.
아래는 3번 소스의 간단한 설명입니다.

<v:roundrect style="width:500;height:100; filter: Alpha(Opacity=70)" arcsize="0.2" fillcolor="blue" strokecolor="red" strokeweight="2">
<table width=100% height=100%>
<tr>
<td align=center valign=center>
테이블 안에 들어간 내용
</td>
</tr>
</table>
------------------------------------------

style="width:너비;height:높이; filter: Alpha(Opacity=불투명도 수치)" arcsize="라운딩 정도" fillcolor="테이블 안 색상" strokecolor="테두리 색상" strokeweight="테두리 두께">
<table width=100% height=100%> // 테이블의 너비,높이는 왼쪽과 같이 100% 로로 설정.

참고:
불투명도 수치는 100 이면 투명하지 않고 0 이면 완전 투명합니다.
라운딩 정도 는 값이 클수록 모서리가 더 둥글 게 처리됩니다.

by 여우 | 2007/11/16 09:12 | 웹디자인 | 트랙백 | 덧글(0)

 

◀ 이전 페이지다음 페이지 ▶