영원한사랑

<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>

사용법)
테이블에 아이디태그가 있어야 합니다.
전 한번 변환하는게 몇개 안되어서 아이디를 입력받아 함수를 실행하도록 했지만, 만약 많은 양을 한꺼번에 변환해야할 경우에는 함수를 변경해서 사용하시기 바랍니다. ^^

위 스크립트를 HTML문서에 포함하고(당연히...),
roundTable(테이블의 아이디문자열);
처럼 함수를 실행시키시면 됩니다.
단, 이 때 원래의 테이블에서 raidus(둥근 정도) 값과 테두리와 배경색의 색상값을 지정하도록 되어있습니다.

int radius : 둥근 정도입니다. 가능한 값은 1 <= radius<= 6 입니다. radius 를 계산하는 부분의 규칙을 잘 몰라서 우선은 한정시켜놨습니다. 나중에 모서리 픽셀을 제대로 구할 수 있게 되면 범위를 수정하겠습니다.

string rborder : 테두리의 색상값. #FFFFFF 와 같은 16진수 색상값과 white 와 같은 색상지시문자열 모두 사용가능.
string rbgcolor : 라운드테이블의 배경색. 배경색은 라운드 테이블 테두리 선 안쪽의 색상을 말하는 것입니다. rborder와 마찬가지로 16진수 색상값과 색상지시문자열 모두 사용가능합니다.

예)
<table id="ta" width="300" height="150" border="0" radius="3" rborder="#999999" rbgcolor="#F8F8F8">
<tr>
       <td>1</td>
       <td>1</td>
</tr>
<tr>
       <td colspan="2">테스트</td>
</tr>
</table>
<script>roundTable("ta");</script>

자세한 것은 링크를 참조하시면 됩니다.

출처 http://www.phpschool.com/bbs2/inc_view.html?id=9751&code=tnt2&start=360&mode=&field=&search_name=&operator=&period=&category_id=&s_que=

<style>
.rtop, .rbottom{display:block; background: #FFFFFF;}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background: pink;}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
</style>


<table style="width:300;font-size:9pt;color:#FF00FF;">
<tr>
<td>

<div id="container" style="background: pink;">
<b class="rtop">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
  그냥 바라만 보다<br><br>
  편지를 띄웠다. <br><br>
  투명한 가을 햇살속으로 <br><br>
  친구이고 싶은 한 사람에게... <br><br>
  오후 커피가 향기로우면 그 향기로움으로... <br><br>
  비가오면 그 빗소리로...<br><br>
  좋은 영화의 감동으로 눈물이 날땐 그 순수함으로... <br><br>
  꽃빛이 고와서 눈이 부실때는 그 아름다움으로... <br><br>
  친구가 되고 싶었다.
<b class="rbottom">
  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>

</td>
</tr>
</table>

<!--StartFragment--><style>
.bin {font-size:1px; font-family:verdana; line-height:1%;}
.fixed {table-layout:fixed;}
</style>

<pre class="scripts">

function top_round(w,c) {
var top_html;
top_html="<table cellpadding=0 cellspacing=0 border=0 style='width:"+w+";margin:0px;padding:0px;' class=fixed>";
top_html+="<tr style='height: 1px;'><td rowspan=4 style='width:1px;' class=bin></td><td rowspan=3 style='width:1px;' class=bin>&nbsp;</td>";
top_html+="<td rowspan=2 style='width:1px;' class=bin>&nbsp;</td><td style='width:1px;' class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td>";
top_html+="<td style='width:2px;' class=bin></td><td rowspan=2 style='width:1px;' class=bin>&nbsp;</td><td rowspan=3 style='width:1px;' class=bin>&nbsp;</td>";
top_html+="<td rowspan=4 style='width:1px;' class=bin>&nbsp;</td></tr><tr style='height:1px;'><td bgcolor="+c+" class=bin>&nbsp;</td>";
top_html+="<td bgcolor="+c+" class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td></tr>";
top_html+="<tr style='height: 1px;'><td bgcolor="+c+" class=bin>&nbsp;</td><td colspan=3 bgcolor="+c+" class=bin>&nbsp;</td>";
top_html+="<td bgcolor="+c+" class=bin>&nbsp;</td></tr><tr style='height:2px;'><td bgcolor="+c+" class=bin>&nbsp;</td>";
top_html+="<td colspan=5 bgcolor="+c+" class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td></tr></table>";
document.write(top_html);
}

function bottom_round(w,c) {
var bottom_html;
bottom_html="<table cellpadding=0 cellspacing=0 border=0 style='width:"+w+";margin:0px;padding:0px;' class=fixed>";
bottom_html+="<tr style='height: 2px;'><td rowspan=4 width=1 class=bin>&nbsp;</td><td width=1 bgcolor="+c+" class=bin>&nbsp;</td><td style='width:1px;' bgcolor="+c+" class=bin>&nbsp;</td>";
bottom_html+="<td style='width:1px;' bgcolor="+c+" class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td><td width=2 bgcolor="+c+" class=bin>&nbsp;</td>";
bottom_html+="<td style='width:1px;' bgcolor="+c+" class=bin>&nbsp;</td><td style='width:1px;' bgcolor="+c+" class=bin>&nbsp;</td><td rowspan=4 style='width:1px;' class=bin>&nbsp;</td></tr>";
bottom_html+="<tr style='height: 1px;'><td rowspan=3 class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td><td colspan=3 bgcolor="+c+" class=bin>&nbsp;</td>";
bottom_html+="<td bgcolor="+c+" class=bin>&nbsp;</td><td rowspan=3 class=bin>&nbsp;</td></tr><tr style='height:1px;'><td rowspan=2 class=bin>&nbsp;</td>";
bottom_html+="<td bgcolor="+c+" class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td><td rowspan=2 class=bin>&nbsp;</td></tr>";
bottom_html+="<tr style='height: 1px;' class=bin><td class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td><td class=bin>&nbsp;</td></tr></table>";
document.write(bottom_html);
}
</pre>

<pre class="scripts">top_round("60%","#FFCC66");</pre>
<table border=0 width=60% bgcolor=#FFCC66 cellpadding=0 cellspacing=0>
<tr><td>둥글 둥글 -_-</td></tr></table>
<pre class="scripts">bottom_round("60%","#FFCC66");</pre>

css + js 로 이미지 모서리를 둥글게 만들어 줍니다.
문서가 완전히 로딩된 후 실행되야 오류가 발생하지 않아요.

기본적인 사용은 아래와 같이 해주세요.
----------------------------------------------------------------------

<script type="text/javascript">
    image.rounded(id or element);
</script>

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





여러 이미지에 자동으로 적용 하려면 onload 이벤트에, image.roundedAuto를 추가하신 후
img 태그 name 속성에 rounded를 적어 주시면 실행!
----------------------------------------------------------------------

<script type="text/javascript">
    window.onload= image.roundedAuto;
</script>

<img src=http://llllll.org/banner.gif name="rounded">

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


익스플로러, 불여우, 오페라  잘돌아가네요~!



------------------------------  소    스  ----------------------------------------

<FONT size=1><style type="text/css"> .imageRounded div{ overflow:hidden; height:1px; } .imageRounded div.r1 { background-position:-5px 0; } .imageRounded div.r1, .imageRounded div.r9 { margin:0 5px; } .imageRounded div.r2 { background-position:-3px -1px; } .imageRounded div.r2, .imageRounded div.r8 { margin:0 3px; } .imageRounded div.r3 { background-position:-2px -2px; } .imageRounded div.r3, .imageRounded div.r7 { margin:0 2px; } .imageRounded div.r4 { background-position:-1px -3px; } .imageRounded div.r4, .imageRounded div.r6 { margin:0 1px; height:2px; } .imageRounded div.r5 { background-position:0px -5px; } </style> <pre class="scripts" type="text/javascript"> function id(str){ return (typeof(str) == "object")? str : document.getElementById(str); } function name(str){ return document.getElementsByName(str); } var image = { rounded : function(element){ var element = id(element); var r5Height = parseFloat(element.height) - 10; if(r5Height<=0) return false; var r6 = r5Height + 5; var r7 = r6 + 2 var r8 = r7 + 1; var r9 = r8 + 1; var inner = ""; inner += ""; inner += ""; inner += ""; inner += ""; inner += ""; inner += ""; inner += ""; inner += ""; inner += ""; var roundedElement = document.createElement("div"); roundedElement.className = "imageRounded"; roundedElement.style.width = element.width+"px"; roundedElement.innerHTML = inner; if(element.parentNode.style.textAlign=="center") roundedElement.style.margin = "0 auto"; element.style.display = "none"; element.parentNode.insertBefore(roundedElement, element.nextSibling); }, roundedAuto : function(){ var elements = name("rounded"); for(i=0, c=elements.length; i<c; i++){ image.rounded(elements[i]); } } } window.onload = image.roundedAuto; </pre> <img src="http://photo-media.hanmail.net/200703/22/newsis/20070322193323.653.0.jpg" name="rounded"><br /> <img src="http://photo-media.hanmail.net/200703/16/newsis/20070316165031.323.0.jpg" name="rounded"><br /> <A href="http://qurx.net/shovelers" target="_blank"><img src="http://qurx.net/sm/banner.gif" border="0"></a> <A href="http://llllll.org" target="_blank"><img src="http://llllll.org/banner.gif" border="0"></a></FONT>