알아두면 좋은 style,script,filter 정보
알아두면 좋은 style,script,filter본문
★ 페이지의 여백 없애기
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
* topmargin : 위
* leftmargin 좌측 ( 왼쪽여백 )
* marginheight & marginwidth 는 넷츠케이프용
★ 마우스를 올리면 색깔이 변하는
onMouseOver="this.style.backgroundColor='#FEDDAF'" onMouseOut="this.style.backgroundColor=''"
출처 : http://hompy.biz/php_study/11311
★ 마우스 제한두기
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
★ 새창을 띄우면 화면 가운데로 뜨게
<Script Language=javascript>
pw = (screen.availWidth - window.document.body.clientWidth) /2;
ph = (screen.availHeight - window.document.body.clientHeight) /2;
window.moveTo(pw,ph);
</Script>
★ 링크 주위에 사각 점선 없애기
onfocus='this.blur()'
★ 쉐도우 글자(그림자 글자) 만들기
<span style="filter:shadow(color=#CCCCCC); color:#4E4E4E; font-size:15px; font-weight:bold; height:10px"> Cgibank 와우~..^^ </span>
★ 홈페이지 자동이동
<head>와 </head> 사이에.. 아래의 소스를 넣어 주시면 됩니다.
<meta http-equiv="refresh" content="10; url="이동할 주소">
content => 눈치 채셨지염.. 몇초후에 이동할 것인지를 나타냅니다.
url => 이동할 페이지의 주소
★ iframe 활용한 외부문서 호출방법
<iframe src="외부문서.htm" frameborder="0" width="360"height="160" scrolling="auto" style='border:1px navy solid;'></iframe>
외부문서.htm은 아이프레임 안에 넣고 들어갈 문서의 주소
frameborder="0" 은 창의 테두리 두께를 0
width="360" height="160" 에서는 iframe 창의 크기를 조절
scrolling="auto" 는 스크롤바 자동생성 ( auto 대신 no 로 하면 없음, yes로 하면 항상 있음. )
style='border:1px navy solid;' 이것은 프레임보더 테두리를 1 픽셀로 잡고 색상은 navy !
★ 깔끔하게 수평선을 그어 보자~
<hr width="50%" size="1" color="red" noshade>
size="굵기" <--- 굵기조절
width="길이" <--- 길이조절
align="정렬" <--- 정렬 (left - right - center)
noshade <--- 그림자없게 평면으로 나타낼때
★ 상태바에 간단한 메시지 넣기 아래 쏘스를 <head>와 </head> 사이에 넣어주세요
<script language="javascript">
<!--
function psm(){
window.status = "상태바에 들어갈 글쓰기";
}
//-->
</script>
<body> 부분에 아래처럼 onload="psm()" 쏘스를 넣으시면 됩니다
<body onload="psm()">
★ 작은 창이 점점 커지면서 새창 띄우기
이 소스는 윈도우가 새로 열릴때 작은 창이 점점 커지면서 열리는 소스입니다.
스크립트 부분을 <head>와 </head> 사이에 붙여넣으시고 원하는 창 사이즈를 수정해주면 됩니다.
var winx = 400; <-- 가로 400픽셀
var winy = 250; <-- 세로 250픽셀
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<SCRIPT LANGUAGE='JavaScript'>
<!--
var winx = 400;
var winy = 250;
if(winy >= winx) {
for(i=1;i<=winy;i++)
if(i >= winx)
window.resizeTo(winx,i)
else
window.resizeTo(i,i);
} else {
for(i=1;i<=winx;i++)
if(i >= winy)
window.resizeTo(i,winy)
else
window.resizeTo(i,i);
}
//-->
</SCRIPT>
★ 주소 표시줄과 북마크에 아이콘 넣기
주소 표시줄과 북마크에 아이콘 넣기 먼저 아이콘을 준비합니다.
아이콘 만들 줄 아시는 분은
*.ico확장자로 아이콘을 만드시구요. (*.gif의 이름을 *.ico로 바꾸란 얘기가 아닙니다. 윈도우즈 데스크탑용 아이콘 *.ico를 만들란 야그..ㅠ_ㅠ; 마이크로앤젤로 등으로 제작 가능하구요. 굳이 제작하지 않더라고 대형통신망 공개자료실 등에 가면 구하실 수도 있고, 윈도우즈 안에도 포함돼 있습니다.)
다음엔 준비한 아이콘을 자신의 계정에 올립니다..
마지막으로..적용시킬 HTML문서안에 다음 태그를
<head>와 </head>사이에 삽입하시면 됩니다~
<link rel="shortcut icon" href="kissgod.ico">
kissgod.ico 엔 아이콘의 경로및 이름을 적어 주시구요.
★ 이미지에 마우스 가져다 대면 흑백으로 색이 변하는 소스
필터효과를 이용한 소스입니다.
아래소스에서 자신이 원하는 이미지 주소만 바꾸어쓰시면 됩니다.
↓아래소스중에 "http://www.imbc.com/NETOP/9901/photoshop/koyote/koyote_03.jpg" 이것만 바꾸어 주세요!
<img src="http://www.imbc.com/NETOP/9901/photoshop/koyote/koyote_03.jpg" onmouseover="this.style.filter='gray'" onmouseout="this.style.filter=''">
★ 마우스 가져가면 점선 밑줄 생기는 소스..!!
<head>와 </head>사이에 아래의 내용을 넣어 줍니다.
<style>
A:hover {color:#FEF9CA; background-image: url(dot.gif); background-position:bottom; background-repeat:repeat-x; text-decoration:none}
</style>
★ 링크 밑줄 없애기
<head>와 </head> 사이에 아래 소스를 넣습니다.
<style>
<!--
A:link {text-decoration:none}
A:visited {text-decoration:none}
A:active {text-decoration:none}
A:hover {color:#529CFF; text-decoration:none}
-->
</style>
A:link
- 방문한 적이 없는 하이퍼링크
A:visited
- 방문한 적이 있는 하이퍼링크
A:active
- 실행 하이퍼링크 (마우스를 눌렀을 때의 상태)
A:hover
- 마우스가 하이퍼링크로 올라갔을 때
#529CFF는 색상.
none는 밑줄 없음(밑줄 있음은 underline)
원하는 내용으로 수정해서 쓰면 됩니다.
★ 달력넣기.
<APPLET CODE="calendar.class" NAME="calendar" WIDTH=165 HEIGHT=150 codebase="http://myhome.hananet.net/~meet2u/class/">
<PARAM NAME="bg_color" VALUE="100125125"> // 배경색
<PARAM NAME="weekend_bg_color" VALUE="12142680"> // 주말(토,일)배경색
<PARAM NAME="highlight_color" VALUE="66655544"> // 선택날짜
<PARAM NAME="unselectable_color" VALUE="16777215"> // 현재달 글자색
<PARAM NAME="neighbor_month_date_color" VALUE="16711680"> //현재달 이외
<PARAM NAME="month_names" VALUE="1월 2월 3월 4월 5월 6월 7월 8월 9월 10월 11월 12월"> // 월
<PARAM NAME="week_names" VALUE="일 월 화 수 목 금 토"> // 요일
<PARAM NAME="min_year" VALUE="1950"> // 최소년도
<PARAM NAME="max_year" VALUE="2050"> // 최대년도
<PARAM NAME="min_date" VALUE="19500101"> // 최소년월일
<PARAM NAME="max_date" VALUE="20500101"> // 최대년월일
★ 글씨에 마우스 커서 가져다 대면 색이 변하는 소스
밑에 소스에 보시면 색을 지정해 주는 "blue" 은 가져다 대기전에 나타나는 색을 지정하며 "red"는 가져다 대면 변하는 색입니다. 끝에 "black" 은 마우스를 땟을때 나타나는 색입니다.
<Font color="blue" onMouseover="this.style.color='red'"onMouseout="this.style.color='black'">
</font>
★ iframe 외곽선 간단한 스타일로 깔끔하게 만들기
아이프레임(iframe)사용하실때 외관선이 깔끔하지 않았죠?
간단히 스타일을 넣어서 얇고 깨끗한 라인을 사용하는 방법입니다.
iframe의 기본 소스 내에 이 스타일을 추가해주세요..
style="border:solid 1 #7B7D7B"
물론 border line 넓이나 Color는 수정하시면 되구요.
프레임 보더 라인도 "0"으로 주세요.. --> frameborder="0"
아래는 전체 소스입니다.
<iframe src="불러올 페이지 주소.htm" width="넓이" height="높이" align="center"
frameborder="0" style="border:solid 1 #7B7D7B"></iframe>
★ 접속시 서서히 이미지 선명해지는 소스
<script language="JavaScript">
<!--
var b = 1;
var c = true;
function fade(){
if(document.all);
if(c == true) {
b++;
}
if(b==100) {
b--;
}
u.filters.alpha.opacity=0 + b;
setTimeout("fade()",50);
}
//-->
</script>
<body>
<body onLoad="fade()">
<a href="연결될 홈피주소" style="cursor: crosshair" target="_blank" onfocus='this.blur()'><img src="이미지 주소" width="320" height="240" alt="그림의 설명" name="u" style="filter:alpha(opacity=0)"></a>
</body>
★ 마우스 가져가면 흔들리는 이미지.
<style>
.shakeimage{ position:relative }
</style>
<script language="JavaScript1.2">
//configure shake degree (where larger # equals greater shake)
var rector=3
///////DONE EDITTING///////////
var stopit=0
var a=1
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}
</script>
위의 소스는 <hdad>와 </head>안에 아래소스를 넣어 주시구요,
그리고 <body>와 </body>사이에 아래소스를 넣으세요.
<img src="이미지주소" class="shakeimage" style="cursor:hand"
onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this)">
★ 스타일 필터 이용 이미지 변화 주기
이미지에 변화를 주기전
<img src="이미지 주소" width="250" height="140">
파스텔
<img src="이미지 주소" style="filter=alpha(opacity=100,style=2,finishopacity=0)" width="250" height="140">
물결효과
<img src="이미지 주소" style="filter:wave(strength=8,freq=3,lightstrength=10,phase=25,add=0)" width="250" height="140">
엑스레이 효과
<img src="이미지 주소" style="filter:xray()" width="250" height="140">
위아래가 바뀜
<img src="이미지 주소" style="filter:flipv()" width="250" height="140">
좌우가 바뀜
<img src="이미지 주소" style="filter:fliph()" width="250" height="140">
그림자 효과
<img src="이미지 주소" style="filter:invert()" width="250" height="140">
속성 팁
opacity (불투명도)-기본값은 100 이며 0~100까지 수치조절, 숫자가 작을수록 투명해집니다.
style (모양)-0~3까지 선택, 0은 단일, 1은 선형, 2는 타원형, 3은 직사각형..
finishOpacity-style 1,2,3 의 경우 불투명도에 영향을 줌, 0~100 까지 수치를 조절합니다.
★ 스크롤바 없애는 소스
<style type="text/css">
<!--
body { overflow:hidden }
-->
</style>
★ 홈피의 첫 배경화면 바꿔주는 랜덤소스.
<SCRIPT LANGUAGE="JavaScript">
var BgArray = new Array(
"이미지1",
"이미지2",
"이미지3",
"이미지4"
);
var gifimage="";
var picfolder="./";
today=new Date();
jran=today.getTime();
ia=9301;
ic=49297;
im=233280;
jran = (jran*ia+ic) % im;
gifimage = picfolder+BgArray[ ( Math.ceil((jran/(im*1.0))
*BgArray.length) ) - 1];
document.write("<center><img src='"+gifimage+"'></center>");
</script>
★ 마우스 오버시 소리나게 하기(사운드)
<bgsound src="#" ID=music loop=1 AUTOSTART=true>
<a href="#" onMouseOver="document.all.music.src='http://oxtag.com/html/music/wav/just.wav'">마우스를 올려보세요.</a>
<span onMouseOver="document.all.music.src='http://oxtag.com/html/music/wav/just.wav'">마우스를 올려보세요.</span>
앵커태그 및 스판태그등.. 여러가지 태그에 위 소스를 사용하시면 됨니다.
역시 제가 아직도 모자라는 사람이라서... 부득이 하게 자료는 퍼왔습니다.
저작권은 http://oxtag.com 에 있으며 카멜롯님이 직접 글을 쓰신 것으로서 저에게는 저작권이 없으면 인터넷을 사용하는 사람으로서 저작권 표시 매너를 지킵니다.
펌시에는 저작권 표시 수정해 주세요.
★ 이미지 옆에 글쓰기
게시판 같은 곳에 이미지를 넣으면 이미지 아래로 글자가 적혀지게 되는데 이미지의 여백부분에 글을 적으려면 ?
align="left/center/right" 태그 사용
예) <img src="이미지주소" align="left">글쓰기
위와 같이 적으면 이미지는 왼쪽에 정렬되고 그 오른쪽에 글자가 쓰여짐.
right 를 넣으면 이미지가 오른쪽으로 정렬되고 그 왼쪽에 글자가 적혀지고
center 는 이미지의 중간에 글이 적혀짐
★ 링크 만들기
1.자기 문서끼리 링크 시키기
<a href="문서명">링크될글자 나 이미지 </a>
예) <a href="../index.html>처음화면으로</a>
<a href="../index.html"><img src="../img.gif"></a>
문서명에는 불러올 문서의 파일명과 함께 경로명도 함께 표시하여야 합니다.
불러올문서가 현재열려있는 문서와 같은 폴더안에 있다면 이런식으로
<a href="index.html">파일명만 적으면 됩니다.
링크될 글자나 이미지에는 말그대로 링크시킬 글자나 이미지를 넣으시면되고,
글자의경우 밑줄이 생기고 이미지의경우 테두리가 생깁니다.
테두리를 나타내지 않으려면 img tag안에 border=0를 적으면 됩니다.
<a href="../index.html"><img src="img.gif" border=0></a>
2. 다른서버 문서 상호간 링크하기
다른서버에 있는 문서와 링크하는 것도 위와 다른것이 있다면 문서명 부분에 문서가 있는
다른서버의 주소 URL이 들어 간다는 것 빼고는 없습니다.
예를 들어 와우웹과 링크를 하고 싶다면,
<a href="http://www.woweb.net">와우웹</a>
와우웹
3. E-mail 창만들기
저에게 메일을 남겨 주세요 http://kr.yahoo.com 이렇게 치세요.
※ 주의사항 : php, asp와 같은 프로그램 문서의 소스는 볼 수 없습니다.
(html 문서는 100% 볼 수 있어요. 유용하게 사용하세요.)
★ 박음질 한것처럼 귀여운 연파랑 스크롤 바
STYLE> BODY { scrollbar-3dlight-color:#00CCFF; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#00CCFF; scrollbar-face-color:#33CCFF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF}
스크롤 상자 씨리즈 ->> 봄의 파릇파릇 연두색^^
<html></span>
<pre>
<span style="font-size:9pt;"> </span></pre>
<pre><span style="font-size:9pt;"> </span></pre>
<span style="font-size:9pt;"><textarea name="스크롤 상자" rows="20" cols="50" style="border-width:1; border-color:rgb(115,228,40); border-style:dotted;">
방금전부터 준비하던~
연두색^_^</textarea></span>
★ 누를수 있는 확인상자
<html></span>
<pre>
<span style="font-size:9pt;"> </span></pre>
<span style="font-size:9pt;"> <input type="checkbox" name="확인상자1">-쓰고싶은말
<input type="checkbox" name="확인상자1">-쓰고싶은말
<input type="checkbox" name="확인상자1">-쓰고싶은말
<input type="checkbox" name="확인상자1">-쓰고싶은말</span><p><span style="font-size:9pt;"> </span></p>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
* topmargin : 위
* leftmargin 좌측 ( 왼쪽여백 )
* marginheight & marginwidth 는 넷츠케이프용
★ 마우스를 올리면 색깔이 변하는
onMouseOver="this.style.backgroundColor='#FEDDAF'" onMouseOut="this.style.backgroundColor=''"
출처 : http://hompy.biz/php_study/11311
★ 마우스 제한두기
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
★ 새창을 띄우면 화면 가운데로 뜨게
<Script Language=javascript>
pw = (screen.availWidth - window.document.body.clientWidth) /2;
ph = (screen.availHeight - window.document.body.clientHeight) /2;
window.moveTo(pw,ph);
</Script>
★ 링크 주위에 사각 점선 없애기
onfocus='this.blur()'
★ 쉐도우 글자(그림자 글자) 만들기
<span style="filter:shadow(color=#CCCCCC); color:#4E4E4E; font-size:15px; font-weight:bold; height:10px"> Cgibank 와우~..^^ </span>
★ 홈페이지 자동이동
<head>와 </head> 사이에.. 아래의 소스를 넣어 주시면 됩니다.
<meta http-equiv="refresh" content="10; url="이동할 주소">
content => 눈치 채셨지염.. 몇초후에 이동할 것인지를 나타냅니다.
url => 이동할 페이지의 주소
★ iframe 활용한 외부문서 호출방법
<iframe src="외부문서.htm" frameborder="0" width="360"height="160" scrolling="auto" style='border:1px navy solid;'></iframe>
외부문서.htm은 아이프레임 안에 넣고 들어갈 문서의 주소
frameborder="0" 은 창의 테두리 두께를 0
width="360" height="160" 에서는 iframe 창의 크기를 조절
scrolling="auto" 는 스크롤바 자동생성 ( auto 대신 no 로 하면 없음, yes로 하면 항상 있음. )
style='border:1px navy solid;' 이것은 프레임보더 테두리를 1 픽셀로 잡고 색상은 navy !
★ 깔끔하게 수평선을 그어 보자~
<hr width="50%" size="1" color="red" noshade>
size="굵기" <--- 굵기조절
width="길이" <--- 길이조절
align="정렬" <--- 정렬 (left - right - center)
noshade <--- 그림자없게 평면으로 나타낼때
★ 상태바에 간단한 메시지 넣기 아래 쏘스를 <head>와 </head> 사이에 넣어주세요
<script language="javascript">
<!--
function psm(){
window.status = "상태바에 들어갈 글쓰기";
}
//-->
</script>
<body> 부분에 아래처럼 onload="psm()" 쏘스를 넣으시면 됩니다
<body onload="psm()">
★ 작은 창이 점점 커지면서 새창 띄우기
이 소스는 윈도우가 새로 열릴때 작은 창이 점점 커지면서 열리는 소스입니다.
스크립트 부분을 <head>와 </head> 사이에 붙여넣으시고 원하는 창 사이즈를 수정해주면 됩니다.
var winx = 400; <-- 가로 400픽셀
var winy = 250; <-- 세로 250픽셀
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<SCRIPT LANGUAGE='JavaScript'>
<!--
var winx = 400;
var winy = 250;
if(winy >= winx) {
for(i=1;i<=winy;i++)
if(i >= winx)
window.resizeTo(winx,i)
else
window.resizeTo(i,i);
} else {
for(i=1;i<=winx;i++)
if(i >= winy)
window.resizeTo(i,winy)
else
window.resizeTo(i,i);
}
//-->
</SCRIPT>
★ 주소 표시줄과 북마크에 아이콘 넣기
주소 표시줄과 북마크에 아이콘 넣기 먼저 아이콘을 준비합니다.
아이콘 만들 줄 아시는 분은
*.ico확장자로 아이콘을 만드시구요. (*.gif의 이름을 *.ico로 바꾸란 얘기가 아닙니다. 윈도우즈 데스크탑용 아이콘 *.ico를 만들란 야그..ㅠ_ㅠ; 마이크로앤젤로 등으로 제작 가능하구요. 굳이 제작하지 않더라고 대형통신망 공개자료실 등에 가면 구하실 수도 있고, 윈도우즈 안에도 포함돼 있습니다.)
다음엔 준비한 아이콘을 자신의 계정에 올립니다..
마지막으로..적용시킬 HTML문서안에 다음 태그를
<head>와 </head>사이에 삽입하시면 됩니다~
<link rel="shortcut icon" href="kissgod.ico">
kissgod.ico 엔 아이콘의 경로및 이름을 적어 주시구요.
★ 이미지에 마우스 가져다 대면 흑백으로 색이 변하는 소스
필터효과를 이용한 소스입니다.
아래소스에서 자신이 원하는 이미지 주소만 바꾸어쓰시면 됩니다.
↓아래소스중에 "http://www.imbc.com/NETOP/9901/photoshop/koyote/koyote_03.jpg" 이것만 바꾸어 주세요!
<img src="http://www.imbc.com/NETOP/9901/photoshop/koyote/koyote_03.jpg" onmouseover="this.style.filter='gray'" onmouseout="this.style.filter=''">
★ 마우스 가져가면 점선 밑줄 생기는 소스..!!
<head>와 </head>사이에 아래의 내용을 넣어 줍니다.
<style>
A:hover {color:#FEF9CA; background-image: url(dot.gif); background-position:bottom; background-repeat:repeat-x; text-decoration:none}
</style>
★ 링크 밑줄 없애기
<head>와 </head> 사이에 아래 소스를 넣습니다.
<style>
<!--
A:link {text-decoration:none}
A:visited {text-decoration:none}
A:active {text-decoration:none}
A:hover {color:#529CFF; text-decoration:none}
-->
</style>
A:link
- 방문한 적이 없는 하이퍼링크
A:visited
- 방문한 적이 있는 하이퍼링크
A:active
- 실행 하이퍼링크 (마우스를 눌렀을 때의 상태)
A:hover
- 마우스가 하이퍼링크로 올라갔을 때
#529CFF는 색상.
none는 밑줄 없음(밑줄 있음은 underline)
원하는 내용으로 수정해서 쓰면 됩니다.
★ 달력넣기.
<APPLET CODE="calendar.class" NAME="calendar" WIDTH=165 HEIGHT=150 codebase="http://myhome.hananet.net/~meet2u/class/">
<PARAM NAME="bg_color" VALUE="100125125"> // 배경색
<PARAM NAME="weekend_bg_color" VALUE="12142680"> // 주말(토,일)배경색
<PARAM NAME="highlight_color" VALUE="66655544"> // 선택날짜
<PARAM NAME="unselectable_color" VALUE="16777215"> // 현재달 글자색
<PARAM NAME="neighbor_month_date_color" VALUE="16711680"> //현재달 이외
<PARAM NAME="month_names" VALUE="1월 2월 3월 4월 5월 6월 7월 8월 9월 10월 11월 12월"> // 월
<PARAM NAME="week_names" VALUE="일 월 화 수 목 금 토"> // 요일
<PARAM NAME="min_year" VALUE="1950"> // 최소년도
<PARAM NAME="max_year" VALUE="2050"> // 최대년도
<PARAM NAME="min_date" VALUE="19500101"> // 최소년월일
<PARAM NAME="max_date" VALUE="20500101"> // 최대년월일
★ 글씨에 마우스 커서 가져다 대면 색이 변하는 소스
밑에 소스에 보시면 색을 지정해 주는 "blue" 은 가져다 대기전에 나타나는 색을 지정하며 "red"는 가져다 대면 변하는 색입니다. 끝에 "black" 은 마우스를 땟을때 나타나는 색입니다.
<Font color="blue" onMouseover="this.style.color='red'"onMouseout="this.style.color='black'">
</font>
★ iframe 외곽선 간단한 스타일로 깔끔하게 만들기
아이프레임(iframe)사용하실때 외관선이 깔끔하지 않았죠?
간단히 스타일을 넣어서 얇고 깨끗한 라인을 사용하는 방법입니다.
iframe의 기본 소스 내에 이 스타일을 추가해주세요..
style="border:solid 1 #7B7D7B"
물론 border line 넓이나 Color는 수정하시면 되구요.
프레임 보더 라인도 "0"으로 주세요.. --> frameborder="0"
아래는 전체 소스입니다.
<iframe src="불러올 페이지 주소.htm" width="넓이" height="높이" align="center"
frameborder="0" style="border:solid 1 #7B7D7B"></iframe>
★ 접속시 서서히 이미지 선명해지는 소스
<script language="JavaScript">
<!--
var b = 1;
var c = true;
function fade(){
if(document.all);
if(c == true) {
b++;
}
if(b==100) {
b--;
}
u.filters.alpha.opacity=0 + b;
setTimeout("fade()",50);
}
//-->
</script>
<body>
<body onLoad="fade()">
<a href="연결될 홈피주소" style="cursor: crosshair" target="_blank" onfocus='this.blur()'><img src="이미지 주소" width="320" height="240" alt="그림의 설명" name="u" style="filter:alpha(opacity=0)"></a>
</body>
★ 마우스 가져가면 흔들리는 이미지.
<style>
.shakeimage{ position:relative }
</style>
<script language="JavaScript1.2">
//configure shake degree (where larger # equals greater shake)
var rector=3
///////DONE EDITTING///////////
var stopit=0
var a=1
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}
</script>
위의 소스는 <hdad>와 </head>안에 아래소스를 넣어 주시구요,
그리고 <body>와 </body>사이에 아래소스를 넣으세요.
<img src="이미지주소" class="shakeimage" style="cursor:hand"
onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this)">
★ 스타일 필터 이용 이미지 변화 주기
이미지에 변화를 주기전
<img src="이미지 주소" width="250" height="140">
파스텔
<img src="이미지 주소" style="filter=alpha(opacity=100,style=2,finishopacity=0)" width="250" height="140">
물결효과
<img src="이미지 주소" style="filter:wave(strength=8,freq=3,lightstrength=10,phase=25,add=0)" width="250" height="140">
엑스레이 효과
<img src="이미지 주소" style="filter:xray()" width="250" height="140">
위아래가 바뀜
<img src="이미지 주소" style="filter:flipv()" width="250" height="140">
좌우가 바뀜
<img src="이미지 주소" style="filter:fliph()" width="250" height="140">
그림자 효과
<img src="이미지 주소" style="filter:invert()" width="250" height="140">
속성 팁
opacity (불투명도)-기본값은 100 이며 0~100까지 수치조절, 숫자가 작을수록 투명해집니다.
style (모양)-0~3까지 선택, 0은 단일, 1은 선형, 2는 타원형, 3은 직사각형..
finishOpacity-style 1,2,3 의 경우 불투명도에 영향을 줌, 0~100 까지 수치를 조절합니다.
★ 스크롤바 없애는 소스
<style type="text/css">
<!--
body { overflow:hidden }
-->
</style>
★ 홈피의 첫 배경화면 바꿔주는 랜덤소스.
<SCRIPT LANGUAGE="JavaScript">
var BgArray = new Array(
"이미지1",
"이미지2",
"이미지3",
"이미지4"
);
var gifimage="";
var picfolder="./";
today=new Date();
jran=today.getTime();
ia=9301;
ic=49297;
im=233280;
jran = (jran*ia+ic) % im;
gifimage = picfolder+BgArray[ ( Math.ceil((jran/(im*1.0))
*BgArray.length) ) - 1];
document.write("<center><img src='"+gifimage+"'></center>");
</script>
★ 마우스 오버시 소리나게 하기(사운드)
<bgsound src="#" ID=music loop=1 AUTOSTART=true>
<a href="#" onMouseOver="document.all.music.src='http://oxtag.com/html/music/wav/just.wav'">마우스를 올려보세요.</a>
<span onMouseOver="document.all.music.src='http://oxtag.com/html/music/wav/just.wav'">마우스를 올려보세요.</span>
앵커태그 및 스판태그등.. 여러가지 태그에 위 소스를 사용하시면 됨니다.
역시 제가 아직도 모자라는 사람이라서... 부득이 하게 자료는 퍼왔습니다.
저작권은 http://oxtag.com 에 있으며 카멜롯님이 직접 글을 쓰신 것으로서 저에게는 저작권이 없으면 인터넷을 사용하는 사람으로서 저작권 표시 매너를 지킵니다.
펌시에는 저작권 표시 수정해 주세요.
★ 이미지 옆에 글쓰기
게시판 같은 곳에 이미지를 넣으면 이미지 아래로 글자가 적혀지게 되는데 이미지의 여백부분에 글을 적으려면 ?
align="left/center/right" 태그 사용
예) <img src="이미지주소" align="left">글쓰기
위와 같이 적으면 이미지는 왼쪽에 정렬되고 그 오른쪽에 글자가 쓰여짐.
right 를 넣으면 이미지가 오른쪽으로 정렬되고 그 왼쪽에 글자가 적혀지고
center 는 이미지의 중간에 글이 적혀짐
★ 링크 만들기
1.자기 문서끼리 링크 시키기
<a href="문서명">링크될글자 나 이미지 </a>
예) <a href="../index.html>처음화면으로</a>
<a href="../index.html"><img src="../img.gif"></a>
문서명에는 불러올 문서의 파일명과 함께 경로명도 함께 표시하여야 합니다.
불러올문서가 현재열려있는 문서와 같은 폴더안에 있다면 이런식으로
<a href="index.html">파일명만 적으면 됩니다.
링크될 글자나 이미지에는 말그대로 링크시킬 글자나 이미지를 넣으시면되고,
글자의경우 밑줄이 생기고 이미지의경우 테두리가 생깁니다.
테두리를 나타내지 않으려면 img tag안에 border=0를 적으면 됩니다.
<a href="../index.html"><img src="img.gif" border=0></a>
2. 다른서버 문서 상호간 링크하기
다른서버에 있는 문서와 링크하는 것도 위와 다른것이 있다면 문서명 부분에 문서가 있는
다른서버의 주소 URL이 들어 간다는 것 빼고는 없습니다.
예를 들어 와우웹과 링크를 하고 싶다면,
<a href="http://www.woweb.net">와우웹</a>
와우웹
3. E-mail 창만들기
저에게 메일을 남겨 주세요 http://kr.yahoo.com 이렇게 치세요.
※ 주의사항 : php, asp와 같은 프로그램 문서의 소스는 볼 수 없습니다.
(html 문서는 100% 볼 수 있어요. 유용하게 사용하세요.)
★ 박음질 한것처럼 귀여운 연파랑 스크롤 바
STYLE> BODY { scrollbar-3dlight-color:#00CCFF; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#00CCFF; scrollbar-face-color:#33CCFF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF}
스크롤 상자 씨리즈 ->> 봄의 파릇파릇 연두색^^
<html></span>
<pre>
<span style="font-size:9pt;"> </span></pre>
<pre><span style="font-size:9pt;"> </span></pre>
<span style="font-size:9pt;"><textarea name="스크롤 상자" rows="20" cols="50" style="border-width:1; border-color:rgb(115,228,40); border-style:dotted;">
방금전부터 준비하던~
연두색^_^</textarea></span>
★ 누를수 있는 확인상자
<html></span>
<pre>
<span style="font-size:9pt;"> </span></pre>
<span style="font-size:9pt;"> <input type="checkbox" name="확인상자1">-쓰고싶은말
<input type="checkbox" name="확인상자1">-쓰고싶은말
<input type="checkbox" name="확인상자1">-쓰고싶은말
<input type="checkbox" name="확인상자1">-쓰고싶은말</span><p><span style="font-size:9pt;"> </span></p>
추천
13
13
댓글 11개
초짜라 헤매고 있는데 감사합니다ㅠㅠ
유용한정보 진짜많네요 ^^ 감사합니다~
감사합니다 ㅎㅎ 탭메뉴눈 없나요 ㅎ
좋은 정보 너무감사합니다^^*.. 저장해놓았다 필요할때 참조하도록 하겠습니다^^*
추천 추천드려요^^*
추천 추천드려요^^*
좋은 정보 감사합니다~
추천
실제 홈페이지 제작에 많이 사용되는 기능들인데 IE전용이 몇개 있네요
IE전용이래도 DOCTYPE 적용하면 IE에서도 안되는 것들도 있으니 왜 안될까하고 삽질하지 마시길..
실제 홈페이지 제작에 많이 사용되는 기능들인데 IE전용이 몇개 있네요
IE전용이래도 DOCTYPE 적용하면 IE에서도 안되는 것들도 있으니 왜 안될까하고 삽질하지 마시길..
펌합니다. 추천
좋아요~
보자마자 스크랩 ^^
너무 좋은 자료 감사합니다
너무 좋은 자료 감사합니다
감사합니다 흑백처리~!
감사합니다.
