|
|
* 이 페이지를 채우는 데 아주 큰 도움이 된
신의키스(
kissofgod.net ) & 소스나라 사이트에 감사드립니다.
- 소스를 보실때는 항상 모든 팝업창들을 닫고 클릭하세요~
- 보기 편하게 글씨체를 그냥
'굴림'으로 하였습니다.
(Last Modified : 02/18/2010
01:55:51)
[117] 가운데 정렬 웹사이트, 레이어 위치 고정 시키기 소스 
<div id="floater5"
style="LEFT:expression((document.body.clientWidth/2)-220); TOP:35px;
POSITION:absolute; z-index:1">ffff</div>
[116] 스크린
가운데 팝업 윈도우 띄우기
head 사이에
<script>
function wopen(url, t, w, h)
{
var sw;
var sh;
sw = (screen.Width - w) /
2;
sh = (screen.Height - h) / 2;
window.open(url, t,
'Width='+w+'px, Height='+h+'px, Left='+sw+',
Top='+sh);
}
</script>
본문에
<a
href='javascript:;'
onclick='wopen('http://kr.yahoo.com', '', 640,
480)'>야후 팝업</a>
[115] 스타일 폰트
head
사이에
<style>
.cool3{color:#FB8410;font-size:
10pt;line-height:
15pt;font-family:굴림;}
</style>
본문에
<FONT
class="cool3"></font>
cf. <font
face="굴림"></font>
[114] 깨끗한 테이블 테두리 만들기
1)
<table border='0' cellspacing='1' cellpadding='2'
bgcolor='#707070'
width='100%'>
<tr
bgcolor='#F6F6F6' align='center'>
<td width="50%"
bgcolor="#E7E7E7">~서비스</td>
<td width="50%"
bgcolor="#E7E7E7">~서비스</td>
</tr>
<tr bgcolor='#FFFFFF'
align='center'>
<td
align="left" valign="top" style="padding:12px">
<table
border='0' cellspacing="0" cellpadding="3"
width='100%'>
<tr>
<td> </td>
</tr>
</table>
</td>
<td
align="left" valign="top" style="padding:12px">
<table
border='0' cellspacing="0" cellpadding="3"
width='100%'>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
2)
<table border=0 cellspacing=1 cellpadding=0
bgcolor="gray">
<tr
bgcolor="white">
<td> </td>
<td> </td>
</tr>
<tr
bgcolor="white">
<td> </td>
<td> </td>
</tr>
</table>
3)
<table border="1" cellspacing="0"
cellpadding="3"
style="border-collapse:collapse;"
bordercolor="#A5A5A5"
align="center"
width="450">
<tr>
<td
bgcolor="white"> </td>
<td
bgcolor="#FFFF99"> </td>
</tr>
<tr>
<td
bgcolor="#FFFF99"> </td>
<td
bgcolor="white"> </td>
</tr>
</table>
[113]
여백조정과 줄간격, 들여쓰기와 정렬
word-spacing:5px; (단어사이의 여백 조정)
letter-spacing:7px; (글자사이의 여백
조정)
line-height:200%; 또는 line-height:10px (줄간격)
text-indent:5%; (들여쓰기)
text-align:left; (정렬)
[112] 링크 밑줄 없애기
링크 태그안에
style="text-decoration: none;"
[111] 이미지 태그 옆에
글씨 정렬시
img 태그안에
align="absmiddle"
ex. <img
src='http://img.kbstar.com/common/bullet/bu_32.gif'
align='absmiddle'
border='0'>
[110] 테이블 사이즈 고정
table
사이에
1. style="table-layout:fixed"
테이블의 크기를 고정. 가로세로
모두 고정
2.
style="word-break:break-all;"
고정된 테이블에 긴 글을 넣을경우 가로가 고정되어 있으므로
글자가 잘려 보이는
경우가 발생.이것을 방지하고 글의 자동 줄바꿈 효과
3. height="auto"
고정된 테이블의 세로때문에 글이 고정된 세로길이까지만
보인다.
이것을 방지하기위해 세로의 길이를 오토로 조정해줌
[109] 물결 무늬가 나타나면서 다른
이미지로 변환
http://www.sourcenara.com/SourcenaraScript/img/190/190.htm
[108]
모자이크 처리되면서 다음 이미지로 변환
http://www.sourcenara.com/SourcenaraScript/img/161/161.htm
[107]
이미지 없이 테이블에 점선을 넣기
<table style="border-width:1; border-color:silver;
border-style:dashed;">
[106] 스크롤 없애기
body 사이에
style="overflow-x:hidden;overflow-y:hidden;"
또는
style="overflow:hidden;"
[105] 마우스로 위치 움직이는
레이어
head 사이에
<script
language="JavaScript">
<!--
var x =0
var
y=0
drag = 0
move =
0
window.document.onmousemove =
mouseMove
window.document.onmousedown =
mouseDown
window.document.onmouseup =
mouseUp
window.document.ondragstart = mouseStop
function
mouseUp() {
move = 0
}
function mouseDown()
{
if (drag) {
clickleft = window.event.x -
parseInt(dragObj.style.left)
clicktop = window.event.y -
parseInt(dragObj.style.top)
dragObj.style.zIndex += 1
move
= 1
}
}
function mouseMove() {
if
(move) {
dragObj.style.left = window.event.x -
clickleft
dragObj.style.top = window.event.y -
clicktop
}
}
function mouseStop()
{
window.event.returnValue = false
}
function
Show(divid) {
di
vid.filters.blendTrans.apply();
divid.style.visibility =
"visible";
divid.filters.blendTrans.play();
}
function
Hide(divid)
{
divid.filters.blendTrans.apply();
divid.style.visibility
= "hidden";
divid.filters.blendTrans.play();
}
//-->
</script>
레이어 div 안에는 onMouseOver="dragObj=layer1; drag=1;move=0"
onMouseOut="drag=0"
[104] 클릭하면 사라지는 레이어
head 사이에 아래
것 넣고,
<script
language="JavaScript">
<!--
var
curObj;
function fade_Layer() {
if
(fadeLayer1.filters(0).status == 2)
{
fadeLayer1.filters(0).Stop();
if
(fadeLayer1.style.visibility == "hidden")
fadeLayer1.style.visibility
= "visible";
else
fadeLayer1.style.visibility =
"hidden";
window.setTimeout("fade_Layer()", 1);
}v
fadeLayer1.filters(0).Apply();
if
(fadeLayer1.style.visibility == "hidden")
fadeLayer1.style.visibility
= "visible";
else
fadeLayer1.style.visibility =
"hidden";
fadeLayer1.filters(0).Play();
}
-->
</script>
body 안에 아래 것 넣기
<DIV
id="fadeLayer1" onClick="fade_Layer()" style="cursor: hand;
position:
absolute; left:10px; top:10px;-index:1; visibility:show;
filter:
blendTrans(duration=3)"><img
src="http://www.sac.or.kr/lab2007/fun/images/pop.jpg"
border="0"></div>
(참고 : http://www.sourcenara.com/SourcenaraScript/window/120/120.htm)
[103]
팝업창
img 태그안에
onload="MM_openBrWindow
('http://www.sac.or.kr/eng/lab2007/dresdnerphilharmonie/pop.html',
'','width=500,height=260')"
를 넣고
head 사이에
<script
language="JavaScript"
type="text/JavaScript">
<!--
function
MM_openBrWindow(theURL,winName,features) {
//v2.0
window.open(theURL,winName,features);
}
//-->
</script>
[102]
테두리
style="border-width:1;border-style:solid,;border-color:gray;"
border-style에는
inset/outset/double/solid/dotted/dashed/ridge가
있습니다.
*
세밀옵션
border-방향-width:값
border-방향-style:값
border-방향-color:값
(방향
: top, bottom, left, right)
예문
보기
http://blog.naver.com/yeppni?Redirect=Log&logNo=50004628074
[101]
이미지변환
<a href="http://www.sac.or.kr/bannerPage2
.jsp?htmlURL=/lab2006/mobility/info02.html"
onfocus="this.blur()"
onmouseover="MM_swapImage('Image1','',
'http://www.sac.or.kr/lab2006/mobility/img/2_1.jpg',1)"
onmouseout="MM_swapImgRestore()">
<img
src="http://www.sac.or.kr/lab2006/mobility/img/2.jpg"
name="Image1" border=0></a>
빨간 부분만 바꿔주면 끝~
[100] 처음에 새로고침 된 페이지 열리게
하기
html 문서의 head 안에 <%response.expires=0%> 넣기
또는
<script>
if(location.search){
} else
{
window.location=window.location+'?a=1&b=1';
}
</script>
넣기
[99] 테이블 상관없이 원하는 위치에 그림이나 글자 넣기
<div
id="shk" style="position:absolute; left:27px; top:38;
z-index:1;
visibility:show"></div>
[98]
표만들기
<table width="400" border="0" cellspacing="2"
cellpadding="1">
<tr>
<td bgcolor="gray">
<TABLE
width="100%" border="0" cellspacing="1"
cellpadding="1">
<TR bgcolor="#FFFFFF">
<TD align=center valign=middle>나
라</TD>
<TD align=center valign=middle>작 곡
가</TD>
<TD align=center valign=middle>곡
목</TD>
<TD align=center valign=middle>비
고</TD>
</TR>
<TR bgcolor="#FFFFFF">
<TD align=center
valign=middle>독일</TD>
<TD align=center
valign=middle>모차르트</TD>
<TD align=center
valign=middle>피아노 소나타 no.11
K.331</TD>
<TD></TD>
</TR>
<TR
bgcolor="#FFFFFF">
<TD align=center
valign=middle>프랑스</TD>
<TD align=center
valign=middle>라벨</TD>
<TD align=center
valign=middle>죽은 왕녀를 위한
파반</TD>
<TD></TD>
</TR>
</TABLE></td>
</tr>
</table>
내용과 빨간부분만 자유자재 수정
[97] 클릭시
경고창
a href="#" 하고 그 안에 onClick="{alert('내용');}"
[96] 가격 따위에 가운데
줄 긋기
<strike>가격</strike> 태그를 쓰면 됨
예를 들어, R 60,000won
[95]
캐시를 읽지않고 자동으로 새로고침 된 페이지로 열기
head
사이에
<META http-equiv="Pragma"
content="no-cache">
[94] 문서 수정된날짜 자동으로
보여주기
원하는 곳에
아래와 같은 자바소스 넣기만 하면
끝!!
<script>
<!--
document.write("Last Modified :
"+document.lastModified+"")
//-->
</script>
[93]
손모양 마우스
onmouseover="this.style.cursor='hand'"
[92] 그림 테두리 이뿌게 (cf.
style="border:1 solid(또는 dotted) gray; padding:2 2 0")
|
<table border=0 cellspacing=1 cellpadding=0
bgcolor=#cecfce>
<tr>
<td bgcolor=#ffffff
style="padding-left:8;padding-right:8;padding-top:8;padding-bottom:8;">
<img
src="http://www.sac.or.kr/eng/lab2004/portfolio/pic/20040511/P1010073.jpg"
width="150"
height="113">
</td>
</tr>
</table>
빨간부분만 바꿔주세용~~
[91] 상태바에 링크 주소
숨기기
<SCRIPT
language=JavaScript>
function
hidestatus(){
window.status=''
return
true
}
if
(document.layers)
document.captureEvents(Event.MOUSEOVER |
Event.MOUSEOUT)
document.onmouseover=hidestatus
document.onmouseout=hidestatus
</SCRIPT>
head 에 넣어주세용~
[90] 그림이나 내용 위에 위치고정하여 겹치게
하기
<div id=divMenu style="left: 0px;
top:0px;
visibility: visible; position:
absolute">
이 사이에 그림이나
내용을~
</div>
id, left, top는
각각 알맞게 수정하숑~!!
[89] 팝업창 닫으면서 링크 클릭시 원래 페이지에서
변화되기
head 태그사이에
넣어주세용~
<script
language="JavaScript">
<!--
function MovePage()
{
opener.parent.location.href="http://링크주소
넣어주세요~";
self.close();
}
//-->
</script>
body 태그사이에 넣어줄 링크 태그는 다음과 같아요~
다 팝업창에 들어가는
소스랍니다.
href="javascript:MovePage();"
[88] 팝업창 닫으면서 새창
띄우기
href="#" onclick="opener.location='http://링크주소
넣어주세요';self.close();"
[87] 동영상 팝업창을 항상위에
[86] 사이트 바로 바뀌게
하기(3가지)
head 태그사이에 넣어주세용~
①<meta http-equiv="refresh" content="5;url=http://www.sac.or.kr/eng/lab2004">
(5는
5초후에 변환을 의미)
②<SCRIPT
LANGUAGE="JAVASCRIPT">
function
ref()
{
window.parent.location.href = "프레임을 불러오는 html 페이지"
;
}
</SCRIPT>
③<SCRIPT LANGUAGE="JAVASCRIPT">
function ref_re
()
{
document.location.target
= "parent" ; // 타킷을 패런트로
document.location.target = "self" ; //타킷을
자신의 창으로
location.href = "해당 페이지"
;
}
</SCRIPT>
[85] 아이 프레임
iframe
그냥 간단하게 제 홈을 예를
들겠습니다.
<iframe frameborder="0"
leftmargin="0" marginheight="3"
marginwidth="3" scrolling="auto"
src="coolcontents.html"
topmargin="0" width="600" height="400"
align=center name="shk"
style="border:1 #909090
solid"></iframe>
[84] 설문조사나 폼메일을 위한 form 태그 (input
type) 62/64번 참조
<form name="form"
method="post"
action="http://c.jungbo.net/jungbo.net/formmail/formmail.php"> 또는
<form method="post"
action="mailto:coolhk@sac.or.kr"
enctype="text/plain">
<input
type="hidden" name="recipient"
value="coolhk7@hanmail.net">
<input type="hidden" name="연결페이지"
value="http://www.theatretek.com/">
<input
type="radio" name="좋아하는 음식은?" value="묻지마" checked>묻지마
<input type="radio" name="좋아하는
음식은?" value="묻지마">묻지마
<input type="checkbox" name="취미는?"
value="업떵">업떵
<select name="친한
친구는?">
<option value=0 selected>-선택-</OPTION>
<option
value="혜경이">혜경이</option>
<option
value="신혜경">신혜경</option>
<option
value="쿠울">쿠울</option>
<option
value="래한이여친">래한이여친</option>
<option
value="멀랑">멀랑</option>
</select>
<textarea
name="쿠울에게 하고싶은 말?" rows="3"
cols="30"></textarea>
<input type="submit"
VALUE="보내기"> 또는
<input type=image
src="images/button_confirm.gif"
border=0 id="submit"
name="submit">
<input type="reset" VALUE="취소"> 또는
<input type=image
src="images/button_cancel.gif"
border=0
name="reset">
</form>
cf. 음악 끄기위한 버튼
<form
name="onoff">
<input type="button" value="꺼~!" name="bgmusic"
onClick="changeButton()"
style="background-color:navy; color:white;
border:0; font-family:돋움;
font-size:9pt; width=35;
height=18">
</form>
<embed name="midi" src=""
loop="20" hidden></embed>
음..나만
알아볼수 있게 써 놓은 거 같음..죄송~
[83] 뒤로, 앞으로, 새로고침,
닫기
<a
href="javascript:history.back()">뒤로</a> 또는
<a
href="javascript:history.go(-1)">뒤로</a>
<a
href="javascript:history.forward()">앞으로</a> 또는
<a
href="javascript:history.go(1)">앞으로</a>
<a
href="javascript:location.reload()">새로고침</a> 또는
<a
href="javascript:history.go(0)">새로고침</a>
<a
href="javascript:self.close()">닫기</a> 또는
<a
href="javascript:window.close()">닫기</a> 또는
<input type=button value="창닫기"
onclick="self.close()">
[82] 이미지맵
1. 이미지 태그안에 usemap="#Map"을 추가..
2. 아래 이미지맵을 body 소스
사이에
<MAP NAME="Map">
<AREA
SHAPE="맵종류" HREF="링크 걸 주소"
COORDS="좌표값">
</MAP>
3. SHAPE와 COODRS는 3가지
경우에 따라 달라짐
ⓐ 사각 <area shape="rect" coords="x1,y1,x2,y2">
ⓑ 원형 <area shape="circle"
coords="x1,y1,R">
ⓒ 다각
<area shape="polygon"
coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5ㆍㆍㆍㆍ">
'차근차근 > JAVA Script' 카테고리의 다른 글
| [자바스크립트] 경고창 없이 창 닫기 (0) | 2014.07.29 |
|---|---|
| [html/javascript] 간단한 Show/Hide 팝업창 표현 (0) | 2014.07.29 |
| 중첩함수 / 클로저 (0) | 2014.07.29 |
| <input type="text"> (0) | 2014.07.29 |
| [INPUT BOX] 텍스트박스(INPUT 박스) 가 동적으로 추가,삭제됩니다. (0) | 2014.07.29 |