[스크립트] 이미지 없는 둥글게 테두리 DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>이미지 없이 라운딩 박스 + 보더 표현하기!</title>
<style>
* {font-size:12px;}
#test {padding:3px;}
</style>
</head>
<body>
<div id='test'>이미지 없이 라운딩 박스 + 보더 표현하기!</div>
<script>
function round(elm, bgcolor, border, mode) {
var top = document.createElement('div'); top.style.cssText = 'height:5px';
var bottom = document.createElement('div');bottom.style.cssText = 'height:5px';
var temp = document.createElement('div'); temp.setAttribute('id', 'template');
var border2 = (border) ? ";border-left:2px solid "+border+";border-right:2px solid "+border : "";
var border1 = (border) ? ";border-left:1px solid "+border+";border-right:1px solid "+border : "";
var bgcolor2 = (bgcolor) ? ";background:"+bgcolor : "";
var bgcolor1 = (border) ? ";background:" + border : (bgcolor) ? ";background:" + bgcolor : "";
var top_r = new Array(), bottom_r =new Array;
var box = elm.cloneNode(true)
for (i=1; i < 5 ;i++ )
{ top_r[i] = document.createElement('div')}
top_r[1].style.cssText = 'margin:0px 5px;height:1px' + bgcolor1 ;
top_r[2].style.cssText = 'margin:0px 3px;height:1px' + border2 + bgcolor2;
top_r[3].style.cssText = 'margin:0px 2px;height:1px' + border1 + bgcolor2;
top_r[4].style.cssText = 'margin:0px 1px;height:2px' + border1 + bgcolor2;
for (i=1; i < 5 ;i++ ) {
if (mode!='bottom') { top.appendChild(top_r[i]);temp.appendChild(top); }
bottom_r[i] = top_r[i].cloneNode(true);
}
temp.appendChild(box);
box.style.cssText = border1 + bgcolor2;
temp.appendChild(bottom);
if (mode!='top') {
for (i=4; i > 0 ;i-- ) {
bottom.appendChild(bottom_r[i]);
}
}
elm.parentNode.replaceChild(temp, elm);
}
</script>
<p>
<a href="#" onclick="round(document.getElementById('test'),'#f0f0f0','#c0c0c0')">배경+테두리</a> <br />
<a href="#" onclick="round(document.getElementById('test'),'#eeeeee')">배경만</a> <br />
<a href="javascript:window.location.reload()">원상태로</a> <br />
</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>이미지 없이 라운딩 박스 + 보더 표현하기!</title>
<style>
* {font-size:12px;}
#test {padding:3px;}
</style>
</head>
<body>
<div id='test'>이미지 없이 라운딩 박스 + 보더 표현하기!</div>
<script>
function round(elm, bgcolor, border, mode) {
var top = document.createElement('div'); top.style.cssText = 'height:5px';
var bottom = document.createElement('div');bottom.style.cssText = 'height:5px';
var temp = document.createElement('div'); temp.setAttribute('id', 'template');
var border2 = (border) ? ";border-left:2px solid "+border+";border-right:2px solid "+border : "";
var border1 = (border) ? ";border-left:1px solid "+border+";border-right:1px solid "+border : "";
var bgcolor2 = (bgcolor) ? ";background:"+bgcolor : "";
var bgcolor1 = (border) ? ";background:" + border : (bgcolor) ? ";background:" + bgcolor : "";
var top_r = new Array(), bottom_r =new Array;
var box = elm.cloneNode(true)
for (i=1; i < 5 ;i++ )
{ top_r[i] = document.createElement('div')}
top_r[1].style.cssText = 'margin:0px 5px;height:1px' + bgcolor1 ;
top_r[2].style.cssText = 'margin:0px 3px;height:1px' + border2 + bgcolor2;
top_r[3].style.cssText = 'margin:0px 2px;height:1px' + border1 + bgcolor2;
top_r[4].style.cssText = 'margin:0px 1px;height:2px' + border1 + bgcolor2;
for (i=1; i < 5 ;i++ ) {
if (mode!='bottom') { top.appendChild(top_r[i]);temp.appendChild(top); }
bottom_r[i] = top_r[i].cloneNode(true);
}
temp.appendChild(box);
box.style.cssText = border1 + bgcolor2;
temp.appendChild(bottom);
if (mode!='top') {
for (i=4; i > 0 ;i-- ) {
bottom.appendChild(bottom_r[i]);
}
}
elm.parentNode.replaceChild(temp, elm);
}
</script>
<p>
<a href="#" onclick="round(document.getElementById('test'),'#f0f0f0','#c0c0c0')">배경+테두리</a> <br />
<a href="#" onclick="round(document.getElementById('test'),'#eeeeee')">배경만</a> <br />
<a href="javascript:window.location.reload()">원상태로</a> <br />
</p>
</body>
</html>
[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]
게시글 목록
| 번호 | 제목 |
|---|---|
| 11470 |
PHP
64비트용 php5.1
|
| 11469 | |
| 11468 | |
| 11457 | |
| 29100 | |
| 11448 | |
| 11444 |
Flash
화이어폭스에서 플래시투명하게..
3
|
| 24851 | |
| 29091 |
HTML
포토샵팁 73가지
8
|
| 11440 | |
| 11434 |
JavaScript
[팁]웹상이나 포토샵에서 이미지 작업시 필요한 색상이 따로 있는걸 아세요?
5
|
| 11431 | |
| 11420 |
기타
아쿠아틱볼만들기~
10
|
| 11415 | |
| 11412 | |
| 29087 | |
| 11408 | |
| 11402 | |
| 11397 |
JavaScript
PHP에서 성능 개선을 위한 유용한 팁
4
|
| 11389 |
MySQL
PHP 초보적인 질문인데 너무 궁금해서요
7
|
| 11387 | |
| 11383 |
Flash
포토샵에 쓰이는 파일 정보
3
|
| 11375 | |
| 11370 | |
| 11362 |
기타
디카사진 보정효과
7
|
| 11354 |
JavaScript
강렬한 Sketch(스케치) 효과
7
|
| 11349 |
JavaScript
포토샵 단축키 모음
4
|
| 11348 |
JavaScript
셀렉트 박스 이뿌게 꾸미기
|
| 11347 |
JavaScript
데몬 Daemon 설명
|
| 11342 | |
| 11338 |
JavaScript
서버호스팅 트래픽 계산방법
3
|
| 29084 |
HTML
뒷배경을 채우기
2
|
| 11335 |
JavaScript
APM 설치전 필수 라이브러리 다운로드 및 설치
2
|
| 11327 | |
| 11325 |
JavaScript
Alpha 채널을 이용하여 Halftone Dot Image 만들기
1
|
| 11318 | |
| 11312 | |
| 11308 |
기타
사진에 글시 쓰기
3
|
| 11303 | |
| 11300 |
기타
이미지 합성하기
2
|
| 29077 |
HTML
부분 흑백 만들기
6
|
| 24849 | |
| 29075 |
HTML
스크롤바 색상 변경해주는 소스
1
|
| 29070 | |
| 11291 |
JavaScript
재미 있는 네비입니다.
8
|
| 11290 |
JavaScript
mod_rewrite 를 적용하기 위한 http.conf 설정
|
| 11288 | |
| 11285 |
JavaScript
잘 되던 포토샵이 갑자기 실행이 안될때
2
|
| 29068 |
HTML
단축기와 용어/팁
1
|
| 11282 | |
| 11279 | |
| 11271 |
Flash
flash source 입니다 (네비)
7
|
| 11267 |
Flash
드디어 cs3 이 출시 했다고 합니다.
3
|
| 11264 | |
| 11263 |
JavaScript
[스크립트] 이미지 없는 둥글게 테두리 DIV
현재글
|
| 29064 |
HTML
한글패치의 삭제 방법
3
|
| 11256 | |
| 11250 | |
| 11244 |
JavaScript
왜곡과 수평 바로잡기 (동영상)
5
|
| 11238 | |
| 11237 | |
| 11234 | |
| 29061 | |
| 11231 | |
| 11228 | |
| 11226 | |
| 29056 |
HTML
플래쉬 인트로자동으로 로딩되게
4
|
| 11223 | |
| 11216 |
MySQL
익스플로러7 팝업창의 주소창 없애기
6
|
| 11214 | |
| 24846 | |
| 11210 |
JavaScript
포토샵8.0cs 분할영역 도구로 일부 영역만 저장은 불가능 한가요?
3
|
| 11206 |
JavaScript
유용한 포샵단축키
3
|
| 11199 | |
| 11194 |
JavaScript
유용한 포토샵 강좌 사이트
4
|
| 11190 |
JavaScript
Jpeg등으로 압축하지 않고 Photoshop파일 사이즈 줄이기
3
|
| 29052 |
HTML
특정레이어만 선택해서 보기
3
|
| 11188 | |
| 11182 | |
| 11178 |
JavaScript
포토삽을 초기화 하고 싶을때
3
|
| 29048 | |
| 11171 |
Flash
플래쉬 네비게이션 질문입니다...
6
|
| 11163 | |
| 11159 |
기타
심볼마크와 로고
3
|
| 11154 | |
| 29047 |
HTML
파일에 이미지를 포함시키는 방법
|
| 29037 |
HTML
포토샵을 빨리 뜨게 하려면...
9
|
| 11149 |
JavaScript
포토샵에서 작업하다 글자 사이즈가 갑자기 커지거나 작아질 때.....
4
|
| 29036 |
HTML
PDF 세션에 대한 원리 및 보안
|
| 11135 |
JavaScript
고급스런 색상 만들기 혹은 선택하기...
13
|
| 29032 | |
| 11134 |
JavaScript
롤오버 자바스크립트입니다.
|
| 11129 |
JavaScript
포토샵 한영키 안먹을때..(다른 프로그램도 마찬가지..영구적용)
4
|
| 29031 | |
| 11127 | |
| 29026 |
HTML
이미지 저작권 관련 설명 7탄
4
|
| 11119 | |
| 11115 | |
| 29020 |
HTML
이미지 저작권 관련 설명 6탄
5
|
| 11113 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기