이미지 안쓰고 모서리(테두리) 둥근 테이블 만들기
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=
'인터넷정보' 카테고리의 다른 글
해상도에따른 브라우저 크기조절 (0) | 2007.10.18 |
---|---|
투명한 textarea (0) | 2007.10.18 |
팝업창에 관한 모든것(새창) (0) | 2007.10.18 |
필터 효과 (0) | 2007.10.18 |
스포트라이트 효과 (0) | 2007.10.18 |
이미지에 마우스 올리면 선명해지게 (0) | 2007.10.18 |
이미지 웨이브 (0) | 2007.10.18 |
랜덤으로 스트라이핑 효과내기 (0) | 2007.10.18 |
html문서 없이 이미지 새창띄우기 (0) | 2007.10.18 |
이미지에 트랜지션(트렌제이션) 효과주기 (0) | 2007.10.18 |
이미지 없이 모서리 없는 둥근 테이블 만들기
<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>
'인터넷정보' 카테고리의 다른 글
마우스 오버시 테이블 한줄 색깔 바꾸기 (0) | 2007.10.11 |
---|---|
간단한 php 달력 (0) | 2007.10.11 |
php로 pop3 데몬을 만들기 (0) | 2007.10.11 |
페이징 함수 (0) | 2007.10.11 |
select 박스 제어하기 (0) | 2007.10.11 |
fsockopen으로 제작한 http확장클래스 (0) | 2007.10.11 |
3 of 9 바코드 그리기 (0) | 2007.10.11 |
HTML 4.01 엔티티(Entities) (0) | 2007.10.11 |
아파치 웹 서버 무단 링크 방지 (0) | 2007.10.11 |
insertAdjacentHTML 지정된 위치에 HTML 삽입 (0) | 2007.10.11 |
모서리 둥근 테이블, 이미지 없이 구현하기
.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> </td>";
top_html+="<td rowspan=2 style='width:1px;' class=bin> </td><td style='width:1px;' class=bin> </td><td bgcolor="+c+" class=bin> </td>";
top_html+="<td style='width:2px;' class=bin></td><td rowspan=2 style='width:1px;' class=bin> </td><td rowspan=3 style='width:1px;' class=bin> </td>";
top_html+="<td rowspan=4 style='width:1px;' class=bin> </td></tr><tr style='height:1px;'><td bgcolor="+c+" class=bin> </td>";
top_html+="<td bgcolor="+c+" class=bin> </td><td bgcolor="+c+" class=bin> </td></tr>";
top_html+="<tr style='height: 1px;'><td bgcolor="+c+" class=bin> </td><td colspan=3 bgcolor="+c+" class=bin> </td>";
top_html+="<td bgcolor="+c+" class=bin> </td></tr><tr style='height:2px;'><td bgcolor="+c+" class=bin> </td>";
top_html+="<td colspan=5 bgcolor="+c+" class=bin> </td><td bgcolor="+c+" class=bin> </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> </td><td width=1 bgcolor="+c+" class=bin> </td><td style='width:1px;' bgcolor="+c+" class=bin> </td>";
bottom_html+="<td style='width:1px;' bgcolor="+c+" class=bin> </td><td bgcolor="+c+" class=bin> </td><td width=2 bgcolor="+c+" class=bin> </td>";
bottom_html+="<td style='width:1px;' bgcolor="+c+" class=bin> </td><td style='width:1px;' bgcolor="+c+" class=bin> </td><td rowspan=4 style='width:1px;' class=bin> </td></tr>";
bottom_html+="<tr style='height: 1px;'><td rowspan=3 class=bin> </td><td bgcolor="+c+" class=bin> </td><td colspan=3 bgcolor="+c+" class=bin> </td>";
bottom_html+="<td bgcolor="+c+" class=bin> </td><td rowspan=3 class=bin> </td></tr><tr style='height:1px;'><td rowspan=2 class=bin> </td>";
bottom_html+="<td bgcolor="+c+" class=bin> </td><td bgcolor="+c+" class=bin> </td><td bgcolor="+c+" class=bin> </td><td rowspan=2 class=bin> </td></tr>";
bottom_html+="<tr style='height: 1px;' class=bin><td class=bin> </td><td bgcolor="+c+" class=bin> </td><td class=bin> </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>
'인터넷정보' 카테고리의 다른 글
IE/FF(Gecko,W3C) 이벤트 설명 (0) | 2007.10.10 |
---|---|
오른쪽마우스버튼,키보드 입력 방지,드래그금지, 특정키 제어 (0) | 2007.10.10 |
오픈마켓 광고, 옥션 광고, 지마켓 광고, 엠플 광고, 온켓 광고 (0) | 2007.10.10 |
폰트 사이트 (0) | 2007.10.10 |
레이어 여러개 반투명하게 교차하기 (0) | 2007.10.10 |
로딩 페이지에 들어갈 이미지가 여기다 있습니다 (0) | 2007.10.10 |
라이트박스 효과 (이미지, 아이프렘, html 지원) (0) | 2007.10.10 |
클릭 한번으로 창 여러개 두개 이상 띄우기 (0) | 2007.10.10 |
스크립트로 이미지 모서리를 둥글게 (0) | 2007.10.10 |
XML 을 이용한 세로 플래시 메뉴 Ver 1.1 (0) | 2007.10.10 |
스크립트로 이미지 모서리를 둥글게
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">
----------------------------------------------------------------------
익스플로러, 불여우, 오페라 잘돌아가네요~!
------------------------------ 소 스 ----------------------------------------
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
'인터넷정보' 카테고리의 다른 글
레이어 여러개 반투명하게 교차하기 (0) | 2007.10.10 |
---|---|
모서리 둥근 테이블, 이미지 없이 구현하기 (0) | 2007.10.10 |
로딩 페이지에 들어갈 이미지가 여기다 있습니다 (0) | 2007.10.10 |
라이트박스 효과 (이미지, 아이프렘, html 지원) (0) | 2007.10.10 |
클릭 한번으로 창 여러개 두개 이상 띄우기 (0) | 2007.10.10 |
XML 을 이용한 세로 플래시 메뉴 Ver 1.1 (0) | 2007.10.10 |
이쁜 테이블 태그입니다. (0) | 2007.10.10 |
무료 사용 가능한 오픈 디자인 사이트 14곳 모음 (0) | 2007.10.09 |
패비콘을 3d 도트로 변환해주는 사이트 (0) | 2007.10.09 |
임시 이메일 주소를 만들어주는 게릴라메일 - Guerrilla Mail (0) | 2007.10.09 |