영원한사랑

이미지 없이 모서리 없는 둥근 테이블 만들기

인터넷정보2007. 10. 11. 21:59

<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

모서리 둥근 테이블, 이미지 없이 구현하기

인터넷정보2007. 10. 10. 11:29
<!--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>

'인터넷정보' 카테고리의 다른 글

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

스크립트로 이미지 모서리를 둥글게

인터넷정보2007. 10. 10. 11:23

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>

'인터넷정보' 카테고리의 다른 글

레이어 여러개 반투명하게 교차하기  (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

티스토리툴바