| NO |
제목 |
작성일 |
이름 |
조회 |
추천 |
|
(글 내용 미리보기)
User-agent: *
Disallow: /
복사해서 robots.txt파일로 만들어 계정 루트에 올리면 끝입니다.
사용법 강좌
한글 http://tagin.net/bbs/view.php?id=server&no=9
영문 http://www.robotstxt.org/
그 외 메타태그 이용법
<meta name="robots" content="noindex,nofollow">
|
|
(24)
|
◇
검색로봇 차단하기
|
01-16 |
형남삼 |
3270 |
619 |
| |
(글 내용 미리보기)
<b>window.clipboardData.setData('Text', '클립보드에 저장될 내용');</b>
<br><br>
<input size=30 type=text onclick="window.clipboardData.setData('Text', this.value)" value="click">
<xmp>
<input size=30 type=text onclick="window.clipboardData.setData('Text', this.value)" value="click">
</xmp>
텍스트상자를 클릭하면 크립보드에 텍스트가 저장된다.
|
(23)
|
◇
클립보드에 복사
|
07-03 |
형남삼 |
1076 |
647 |
| |
(글 내용 미리보기)
<a href="javascript:window.external.AddFavorite('http://www.namsam.com','알자')">
즐겨찾기에 추가</A>
<xmp>
<a href="javascript:window.external.AddFavorite('http://www.namsam.com','알자')">
즐겨찾기에 추가</A>
</xmp>
|
(22)
|
◇
즐겨찾기 추가
|
07-03 |
형남삼 |
1054 |
644 |
| |
(글 내용 미리보기)
홈페이지에 있는 배너가 화면보다 너무 많아서 스크롤바를 이용해야만 될 정도가 되서 자동스크롤(아래어서 위로)시키고 싶습니다.
스코롤 할수있는 소스코드 부탁드립니다.
|
(21)
|
◇
배너스크롤방법
|
05-19 |
김왕권 |
1085 |
666 |
| |
(글 내용 미리보기)
도움이 될지는 모르지만 레이어의 overflow 속성을 이용해서 스크롤바를 표시하는 방법은 어떨까요?
속성분석은 소스보기를 하시면 확인이 되실것으로 생각이 됩니다.
이곳은 자료를 등록하는 곳이라 질문을 하는 곳이 아닙니다. 그래서 답글이 늦었는데요, 다른 질문이 있으시면 게시판을 이용해 주시기 바랍니다.
좋은 하루 되세요.
==================== 소스시작=================
<div id="scroll_layer" style="position:absolute;left:750px;width:100px;height:500;overflow:scroll"> <!-- 고정시킬 가로의 레이어 위치를 정해준다. 800은 왼쪽에서부터 800px -->
<font color="blue" size="2">고정레이어</font> <!-- 이곳에 레이어에 들어갈 소스들을 적어준다 -->
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p>
<font color="blue" size="2">고정레이어</font></p>
<p> </div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script language="javascript">
<!--
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var fix_layer = "scroll_layer"; // 고정시킬 레이어의 id 값을 적어준다.(여기서는 위의 scroll_layer )
bannerHeight = eval(document.body.clientHeight - 500) // 고정시킬 세로의 위치를 정해 준다. 300 은 아래에서부터의 거리(px 단위)
var isNS = navigator.appName == "Netscape";
if (isNS4) {
var divMenu = document[fix_layer];
divMenu.top = top.pageYOffset + bannerHeight;
divMenu.visibility = "visible";
moveRightEdge();
} else if (isDOM) {
var divMenu = getRef(fix_layer);
divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + bannerHeight;
divMenu.style.visibility = "visible";
moveRightEdge();
}
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
function moveRightEdge() {
var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;
if (isNS4) {
yMenuFrom = divMenu.top;
yMenuTo = windows.pageYOffset + bannerHeight; // 위쪽 위치
} else if (isDOM) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = (isNS ? window.pageYOffset : document.body.scrollTop) + bannerHeight; // 위쪽 위치
}
timeoutNextCheck = 500; // 사용자의 스크롤이 있은후 움직임 시작 (현재 0.5초 , 1000이면 1초)
if (yMenuFrom != yMenuTo) {
yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 20);
if (yMenuTo < yMenuFrom)
yOffset = -yOffset;
if (isNS4)
divMenu.top += yOffset;
else if (isDOM)
divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10; // 제위치로 돌아오는 동안의 속도 조절 (현재 0.01초)
}
setTimeout ("moveRightEdge()", timeoutNextCheck);
}
-->
</script>
=====================소스끝===================
|
(20)
|
┗>
[re]배너스크롤방법
| 05-26 |
형남삼 |
1142 |
638 |
| |
(글 내용 미리보기)
<p><b><font color="#008000">new Option()</font></b></p>
<p><font color="#008000"><a href='./upfiles/moveItem.htm' style=color:blue target=_blank><b>☞ 사용예)</b></a><br>
<br>
</font>form1.sel1.options[i]=new Option("레이블","값",true,true) </p>
<p>Option() 함수에서 인수는 각각 text속성값,value속성값,??(모름),기본선택여부</p>
+++++++++++++++++++++++++++++++++++++++++++++++++++++
<br>소스<br>
+++++++++++++++++++++++++++++++++++++++++++++++++++++
<p><script language="javascript"><br>
<br>
function fillSel1(){ // 로딩이 되면 항목A에 항목을 추가하는 함수<br>
for(i=0;i<11;i++){<br>
form1.sel1.options[i]=new Option(2,1,true,true) // 1부터 10까지의 숫자를 각각 추가함<br>
} // Option() 함수에서 인수는 각각 text속성값,value속성값,??(모름),기본선택여부<br>
}<br>
<br>
function add(){ // 항목A에서 항목B로 이동시키는 함수<br>
num = form1.sel2.length // 항목A의 전체 갯수를 구함<br>
<br>
if(form1.sel1.selectedIndex >= 0){<br>
v = form1.sel1.options[form1.sel1.selectedIndex].value; // 선택된 항목의 value 속성값<br>
t = form1.sel1.options[form1.sel1.selectedIndex].text; // 선택된 항목의 text 속성값<br>
<br>
form1.sel2.options[num]=new Option(t,v,true,true); // 항목B에 추가<br>
form1.sel1.options[form1.sel1.selectedIndex]=null; // 항목A에서 삭제<br>
}<br>
}<br>
<br>
function del(){ // 항목B에서 항목A로 이동시키는 함수<br>
num = form1.sel1.length<br>
<br>
if(form1.sel2.selectedIndex >= 0){<br>
v = form1.sel2.options[form1.sel2.selectedIndex].value;<br>
t = form1.sel2.options[form1.sel2.selectedIndex].text;<br>
<br>
form1.sel1.options[num]=new Option(t,v,true,true);<br>
form1.sel2.options[form1.sel2.selectedIndex]=null;<br>
}<br>
}<br>
<br>
function move(sendSel,getSel){ // 모든 항목을 이동시키는 함수<br>
num = sendSel.length<br>
<br>
for(i=0;i<num;i++){<br>
v = sendSel.options[0].value;<br>
t = sendSel.options[0].text;<br>
getSel.options[getSel.length] = new Option(t,v,true,true);<br>
<br>
sendSel.options[0] = null;<br>
}<br>
}<br>
</script><br>
<br>
<body onLoad=fillSel1()><br>
<form name=form1><br>
<table><br>
<tr><br>
<td width="70" align="center"><br>
<select name=sel1 size=11><br>
</select><br> <br> 항목A<br>
</td><br>
<td valign="middle"><br>
<input type=button value=">" onclick="add()"><br><br>
<input type=button value=">>" onclick="move(form1.sel1,form1.sel2)"><br>
<br><br>
<input type=button value="<" onclick="del()"><br><br>
<input type=button value="<<" onclick="move(form1.sel2,form1.sel1)"><br>
</td><br>
<td width="70" align="center"><br>
<select name=sel2 size=11><br>
</select><br> <br> 항목B<br>
<br>
</td><br>
</tr><br>
</table><br>
<br>
</form><br>
|
(19)
|
◇
목록상자 다루기
|
02-13 |
형남삼 |
1086 |
613 |
| |
(글 내용 미리보기)
<HTML>
<HEAD>
<TITLE>달력만들기</TITLE>
<SCRIPT language=JavaScript>
/*
Dynamic Calendar II
*/
var Selected_Month;
var Selected_Year;
var Current_Date = new Date();
var Current_Month = Current_Date.getMonth();
var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var Month_Label = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
var Current_Year = Current_Date.getYear();
var Today = Current_Date.getDate();
function Header(Year, Month) {
if (Month == 1) {
if ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 != 0))) {
Days_in_Month[1] = 29;
}
}
var Header_String = Month_Label[Month] + ' ' + Year;
return Header_String;
}
function Make_Calendar(Year, Month) {
var First_Date = new Date(Year, Month, 1);
var Heading = Header(Year, Month);
var First_Day = First_Date.getDay() + 1;
if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||
((Days_in_Month[Month] == 30) && (First_Day == 7))) {
var Rows = 6;
}
else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {
var Rows = 4;
}
else {
var Rows = 5;
}
var HTML_String = '<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="c0C0C0" BORDERCOLORLIGHT="00bbea"BORDERCOLORdark="00bbea">';
HTML_String += '<tr><th colspan=7 BGCOLOR="dFFFe9" BORDERCOLOR="000000">' + Heading + '</font></th></tr>';
HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="FFe7ea" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFe7" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFe7" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFe7" BORDERCOLOR="000000">Wed</th>';
HTML_String += '<th ALIGN="CENTER" BGCOLOR="FFFFe7" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFe7" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFe7ea" BORDERCOLOR="000000">Sat</th></tr>';
var Day_Counter = 1;
var Loop_Counter = 1;
for (var j = 1; j <= Rows; j++) {
HTML_String += '<tr ALIGN="left" VALIGN="top">';
for (var i = 1; i < 8; i++) {
if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) {
if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) {
HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000"><strong><font color="red">' + Day_Counter + '</font></strong></td>';
}
else {
HTML_String += '<td BGCOLOR="FFffff" BORDERCOLOR="000000">' + Day_Counter + '</td>';
}
Day_Counter++;
}
else {
HTML_String += '<td BORDERCOLOR="c0C0C0"> </td>';
}
Loop_Counter++;
}
HTML_String += '</tr>';
}
HTML_String += '</table></td></tr></table>';
document.all.Calendar.innerHTML = HTML_String;
}
function Check_Nums() {
if ((event.keyCode < 48) || (event.keyCode > 57)) {
return false;
}
}
function On_Year() {
var Year = document.when.year.value;
if (Year.length == 4) {
Selected_Month = document.when.month.selectedIndex;
Selected_Year = Year;
Make_Calendar(Selected_Year, Selected_Month);
}
}
function On_Month() {
var Year = document.when.year.value;
if (Year.length == 4) {
Selected_Month = document.when.month.selectedIndex;
Selected_Year = Year;
Make_Calendar(Selected_Year, Selected_Month);
}
else {
alert('Please enter a valid year.');
document.when.year.focus();
}
}
function Defaults() {
if (!document.all)
return
var Mid_Screen = Math.round(document.body.clientWidth / 2);
document.when.month.selectedIndex = Current_Month;
document.when.year.value = Current_Year;
Selected_Month = Current_Month;
Selected_Year = Current_Year;
Make_Calendar(Current_Year, Current_Month);
}
function Skip(Direction) {
if (Direction == '+') {
if (Selected_Month == 11) {
Selected_Month = 0;
Selected_Year++;
}
else {
Selected_Month++;
}
}
else {
if (Selected_Month == 0) {
Selected_Month = 11;
Selected_Year--;
}
else {
Selected_Month--;
}
}
Make_Calendar(Selected_Year, Selected_Month);
document.when.month.selectedIndex = Selected_Month;
document.when.year.value = Selected_Year;
}
</SCRIPT>
</HEAD>
<BODY bgColor=#008080 bgProperties=fixed
onload=Defaults()>
<CENTER>
<BR><BR>
<BR><BR><BR><BR><BR>
<CENTER>
<DIV align=left id=NavBar style="POSITION: relative; TOP: 5px; WIDTH: 286px">
<FORM name=when>
<TABLE>
<TBODY>
<TR>
<TD><INPUT onclick="Skip('-')" type=button value="<-- Last"></TD>
<TD></TD>
<TD><SELECT name=month onchange=On_Month()>
<SCRIPT language=JavaScript1.2>
if (document.all){
for (j=0;j<Month_Label.length;j++) {
document.writeln('<option value=' + j + '>' + Month_Label[j]);
}
}
</SCRIPT>
</SELECT> </TD>
<TD><INPUT maxLength=4 name=year onkeypress="return Check_Nums()"
onkeyup=On_Year() size=4></TD>
<TD></TD>
<TD><INPUT onclick="Skip('+')" type=button value="Next -->"></TD></TR></TBODY></TABLE></FORM></DIV>
<DIV align=left id=Calendar
style="POSITION: relative; TOP: -2px; WIDTH: 238px"></DIV>
</BODY></HTML>
|
(18)
|
◇
달력만들기
|
09-12 |
형남삼 |
2394 |
4417 |
| |
(글 내용 미리보기)
<pre>
<xmp>
<script language="javascript">
//아래에서 showModalDialog,showModelessDialog 는 사용자 정의 함수가 아닌 Window객체의 내장함수입니다.
showModalDialog("파일","윈도우","dialogWidth=넓이px;dialogHeight=높이px;resizable=크기조정여부(0,1);status=상태바표시여부(0,1)");
showModelessDialog("파일","윈도우","dialogWidth=넓이px;dialogHeight=높이px;resizable=크기조정여부(0,1);status=상태바표시여부(0,1)");
</script>
</xmp>
</pre>
설명보다는 실제 예를 보는것이 좋을듯 합니다.
<script language="javascript">
function showModalWindow(){
showModalDialog("about:blank","ModalWindow","dialogWidth=300px;dialogHeight=300px;resizable=1;status=0;dialogLeft=100px;dialogTop=100px;");
}
function showModelessWindow(){
showModelessDialog("about:blank","ModelessWindow","dialogWidth=300px;dialogHeight=300px;resizable=1;status=0;dialogLeft=450px;dialogTop=200px;");
}
</script>
<p>
<input type="button" value="Modal 모드로 새창열기" onclick="showModalWindow()" style="text-align:left">
<br><br>
<input type="button" value="Modeless 모드로 새창열기" onclick="showModelessWindow()" style="text-align:left">
</P>
실제 소스는 아래와 같습니다.
<pre>
<xmp>
<script language="javascript">
function showModalWindow(){
showModalDialog("about:blank","ModalWindow","dialogWidth=300px;dialogHeight=300px;resizable=1;status=0;dialogLeft=100px;dialogTop=100px;");
}
function showModelessWindow(){
showModelessDialog("about:blank","ModelessWindow","dialogWidth=300px;dialogHeight=300px;resizable=1;status=0;dialogLeft=450px;dialogTop=200px;");
}
</script>
<p>
<input type="button" value="Modal 모드로 새창열기" onclick="showModalWindow()" style="text-align:left">
<br><br>
<input type="button" value="Modeless 모드로 새창열기" onclick="showModelessWindow()" style="text-align:left">
</p>
</xmp>
</pre>
<b><font color=red>※</font>주의 할 것</b>은 새창열기 옵션에서 크기에는 <b>px</b> 단위를 반드시 주어야 하며,구분자는 "," 가 아닌 <b>";"</b> 를 사용해야 하네요.
|
(17)
|
◇
새창열기의 팁(modal,modeless)
|
08-28 |
형남삼 |
2076 |
634 |
| |
(글 내용 미리보기)
익프를로러의 경우 200×200 이상의 이미지 경우 마우스를 올려 놓으면 이미지 도구모음이 표시가 됩니다.
바로 그 도구모음 표시를 없애는 팁입니다.
[방법1]
<head>와 </head> 사이에 아래의 메타테그를 추가한다.
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
[방법2]
만일 페이지에 여러개의 이미지가 있는데 그중 어떤 것은 이미지 도구모음이 표시되게 하고 싶다면<img> 태그를아래와 같이 해줍니다.
<img src="이미지파일 경로" galleryimg="yes">
물론
<img src="이미지파일 경로" galleryimg="no">
와 같이 했을 경우에는 메타테그에 관계없이 이미지 도구상자는 표시되지 않는다.
|
(16)
|
◇
이미지 도구모음 감추기
|
08-04 |
형남삼 |
1072 |
506 |
| |
(글 내용 미리보기)
<script language="javascript">
function chkJumin(jumin1,jumin2){
if(jumin1 == "" || jumin2 == "")
{return;}
var jumin = jumin1 + jumin2
IDtot = 0;
IDAdd="234567892345";
for(i=0;i<12;i++) {
IDtot=IDtot+parseInt(jumin.substring(i,i+1))*parseInt(IDAdd.substring(i,i+1));
}
IDtot=11-(IDtot%11);
if(IDtot==10) {
IDtot=0;
}
else if(IDtot==11){
IDtot=1;
}
if(parseInt(jumin.substring(12,13))!=IDtot && jumin1.value != "") {
alert("주민번호 형식이 올바르지 않습니다.");
}
else{
alert("올바른 주민번호입니다 " );
}
}
function show(){
aa = window.open("about:blank","","left=100,top=100,width=700,height=600,scrollbars=1")
aa.document.open();
aa.document.write("<pre><xmp>" + document.all.hiddenID.innerHTML + "</xmp></pre>");
}
</script>
<table>
<form name="form1">
<tr align=center>
<td>
<input type="text" name="jumin1" size="7" maxlength="6">
-
<input type="text" name="jumin2" size="7" maxlength="7">
</td>
</tr>
<tr align=center>
<td>
<input type="button" value="검사" onclick="chkJumin(forms[0].jumin1.value,forms[0].jumin2.value)">
<input type="reset" value="지움">
</td>
</tr>
<tr align=center>
<td height="40">
<input type="button" value="소스보기" onclick="show()">
</td>
</tr>
</form>
</table>
<div id="hiddenID" style="display:none;">
<script language="javascript">
function chkJumin(jumin1,jumin2){
if(jumin1 == "" || jumin2 == "")
{return;}
var jumin = jumin1 + jumin2
IDtot = 0;
IDAdd="234567892345";
for(i=0;i<12;i++) {
IDtot=IDtot+parseInt(jumin.substring(i,i+1))*parseInt(IDAdd.substring(i,i+1));
}
IDtot=11-(IDtot%11);
if(IDtot==10) {
IDtot=0;
}
else if(IDtot==11){
IDtot=1;
}
if(parseInt(jumin.substring(12,13))!=IDtot && jumin1.value != "") {
alert("주민번호 형식이 올바르지 않습니다.");
}
else{
alert("올바른 주민번호입니다 " );
}
}
</script>
<table>
<form name="form1">
<tr align=center>
<td>
<input type="text" name="jumin1" size="7" maxlength="6">
-
<input type="text" name="jumin2" size="7" maxlength="7">
</td>
</tr>
<tr align=center>
<td>
<input type="button" value="검사" onclick="chkJumin(form1.jumin1.value,form1.jumin2.value)">
</td>
</tr>
</form>
</table>
</div>
|
(15)
|
◇
주민등록번호 체크 자바스크립트
|
07-06 |
형남삼 |
1306 |
346 |
| |
(글 내용 미리보기)
A . 가장 쉬운 방법은 TweakUI를 설치하여 네트워크탭에 가서 필요한 내용을 입력하는 것이다.
이것을 레지스트리편집을 통하여 수작업으로 할 수도 있다.
다음과 같이 한다.
1. 레지스트리편집기를 실행한다.(시작-실행-regedit)
2. HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows
NT\CurrentVersion\Winlogon으로 이동한다.
3. DefaultDomainName을 더블클릭하고 소속된 NT도메인명을 입력한다.
4. DefaultUserName을 더블클릭하고 로그인 이름을 입력한다.
5. 편집메뉴에서 새로만들기-문자열값을 선택하고
DefaultPassword라는 이름으로 문자열값을 생성한다.
6. DefaultPassword를 더블클릭하고 비밀번호를 입력한다.
7. 편집메뉴에서 새로만들기-문자열값을 선택하고
AutoAdminLogon이라는 문자열값을 생성한다.
8. AutoAdminLogon을 더블클릭하고 값을 1로 설정한다.
9. 레지스트리편집기를 닫는다.
10. 로그오프하면 이제 자동으로 다시 로그온될 것이다.
|
(14)
|
◇
2000서버에서 자동로그온설정
|
10-12 |
형남삼 |
1078 |
364 |
| |
(글 내용 미리보기)
죄송한데요.
mediaplay 보면 슬라이더바가 있잖아요..
그 부분을 이용해서 제어할수 있나요..
대부분의 슬라이더가 있으니까..되겠죠..
혹시 그 부분 관련된 소스라도..있으시면..
감사하겠습니다.
|
(13)
|
◇
죄송한데요
|
09-24 |
조제현 |
1080 |
629 |
| |
(글 내용 미리보기)
슬라이더바라면 사운드조절하는 부분을 말씀하시는 건가요?
사운드 조절을 자바스크립트을 사용해서 할려면, 우선,css 를 잘 아셔야 합니다.
그림 레이어를 이용해서 사운드를 컨트롤 하는 것처럼 하는 것이니까 간단하게 설명을 드릴 수 있는 부분은 아니고,
벅스뮤직과 같은 미디어 재생 사이트를 참고 하시는 편이 좋을듯 합니다.
|
(12)
|
┗>
어렵네요...
| 09-25 |
형남삼 |
1089 |
349 |
| |
(글 내용 미리보기)
아뇨.미디어 플레이보면 영화 장면을 앞으로 옮기고
뒤로 옮기는 슬라이더바인데요.
이것을 만들려고 하는데.어떻게 해야할지..
혹시 관련 소스라도 있으면 올려주시면 감사하겠습니다.
---------+ 이전 글 내용 +----------
슬라이더바라면 사운드조절하는 부분을 말씀하시는 건가요?
사운드 조절을 자바스크립트을 사용해서 할려면, 우선,css 를 잘 아셔야 합니다.
그림 레이어를 이용해서 사운드를 컨트롤 하는 것처럼 하는 것이니까 간단하게 설명을 드릴 수 있는 부분은 아니고,
벅스뮤직과 같은 미디어 재생 사이트를 참고 하시는 편이 좋을듯 합니다.
|
(11)
|
┗>
[re]어렵네요...
[1]
| 09-25 |
조제현 |
1093 |
621 |
| |
(글 내용 미리보기)
숫자만 입력하려고하는데.....
한글은 어떻게 처리하나요...
영문은 스크립트가 먹히는데..한글은 제어가 되질안네요...
|
(10)
|
◇
한글은...
|
09-13 |
키코드 |
1049 |
624 |
| |
(글 내용 미리보기)
아래처럼 한글키의 번호가 21 번이므로 21번을 채크하여 무효화 하는 방법이 있겠네요..
그리고 해당 텍스트바는 기본설정을 영문으로 바꾸어 두어야 하겠습니다.
같은 문제를 겪어서 FOR문이나 또는 VBSCRIPT 의 IsNumeric() 함수를 사용해서도 해 보았는데,,
아래의 방법이 가장 적절하지 않나 생각 합니다.
<script language="javascript">
function onlyNumber(target)
{
keynum=event.keyCode;
if(keynum == 21) { return false }
if((keynum < 48 || keynum > 57) && (keynum !=144 && keynum !=13 && keynum !=32 && keynum !=9 && keynum !=35 && keynum !=36 && keynum !=45 && keynum !=46 && keynum !=8) && (keynum < 96 || keynum > 105) && (keynum < 37 || keynum > 40))
{ alert("숫자가 아닙니다.") ; target.focus(); event.returnValue=false; }
else
return true;
}
</script>
숫자입력 :
<input type="text" style="IME-MODE:ACTIVE" onKeyDown="javascript:onlyNumber(this);">
|
(9)
|
┗>
[re]한글은...
| 09-14 |
형남삼 |
1173 |
657 |
| |
(글 내용 미리보기)
<div style="font:12 normal 돋움;line-height:120%;">
<h3 style="color:blue">※ 키보드의 키값 확인.</h3>
<br>
■ 키값을 알면 숫자만을 입력 받는다든지, 어떠한 문자는 입력을 제한 한다든지 하는 것이 가능해진다.
<br><br>
소스에서 <b style="color:red">event.keyCode</b> 는 <b>JavaScript</b> 의 키보드의 각각의 키값들이며,
<br>
<b style="color:red">event.returnValue</b> 는 키보드를 눌렀을때 실행되어질 명령이다.
<br>
명령에 대한 결과값을 <b>false</b> 로 돌려 보내면 아무런 변화가 없게 된다.
<br><br><br>
왼쪽텍스트바에 입력이 있으면 오른쪽 텍스트바에 키보드의 키코드가 표시된다.
<br>
<fieldset style="width:400;height:60;padding:15">
<legend>예제 1</legend>
<input type="text" id="innum" style="ime-mode:disabled" onKeyDown="num.value=event.keyCode;event.returnValue=false"> :
<input type="text" id="num">
</fieldset>
<br><br>
<fieldset style="width:600;height:90">
<legend>소스</legend>
<br>
<input type="text" <b>onKeyDown="num.value=event.keyCode;event.returnValue=false"</b>> : <br>
<input type="text" <b>id="num"</b>>
</fieldset>
<br>
<b style="color:red">☞</b> javascript 로 태그의 속성들을 제어 하기 위해 <b>id</b> 를 부여해 주었음.
<br><br><br>
<hr size=1 color=olive >
<br><br>
■ 아래의 텍스트바에는 숫자가 아니면 입력이 불가능함.
<br>
<pre>
<fieldset style="width:300;height:60;padding:15">
<legend>예제 2</legend>
<script language="javascript">
function onlyNumber(target)
{
keynum=event.keyCode;
if((keynum < 48 || keynum > 57) && (keynum !=144 && keynum !=13 && keynum !=32 && keynum !=9 && keynum !=35 && keynum !=36 && keynum !=45 && keynum !=46 && keynum !=8) && (keynum < 96 || keynum > 105) && (keynum < 37 || keynum > 40))
{ alert("숫자가 아닙니다.") ; target.focus(); event.returnValue=false; }
else
return true;
}
</script>
숫자입력 : <input type="text" onKeyDown="javascript:onlyNumber(this);">
</fieldset>
</pre>
<br><br>
<fieldset style="width:600;height:300;padding:15;overflow:scroll;">
<legend>소스</legend>
<pre>
<script language="javascript">
function <b>onlyNumber(target)</b>
{
keynum=event.keyCode;
if((keynum < 48 || keynum > 57) && (keynum !=144 && keynum !=13 && keynum !=32 && keynum !=9 && keynum !=35 && keynum !=36 && keynum !=45 && keynum !=46 && keynum !=8) && (keynum < 96 || keynum > 105) && (keynum < 37 || keynum > 40))
{ alert("숫자가 아닙니다.") ; target.focus(); event.returnValue=false; }
else
return true;
}
</script>
숫자입력 : <input type="text" <b>onKeyDown="javascript:onlyNumber(this);</b>">
</pre>
</fieldset>
<br>
<b style="color:red">☞</b> 위에서 <b>target</b> 은 함수의 매개변수이며,
<br>
<b style="color:red">☞</b> <b>this</b> 는 객체자신을 지칭한다.
</div>
<br><br><br><br>
<script language="javascript">
innum.focus();
</script>
|
(8)
|
◇
키보드의 키코드값 알기(자바스크립트 활용)
|
07-04 |
형남삼 |
10728 |
727 |
| |
(글 내용 미리보기)
<script lauguage="javascript">
function viewSource()
{
var content = document.all.source.innerHTML;
source_docu = window.open("","","toolbar=1,scrollbars=1,menubar=0,status=1,resizable=1,width=800");
source_docu.document.open();
source_docu.document.write(content);
}
</script>
<div id="scroll_layer" style="position:absolute;left:700;width:100"> <!-- 고정시킬 가로의 레이어 위치를 정해준다. 800은 왼쪽에서부터 800px -->
<font color="blue" size="2">고정레이어</font> <!-- 이곳에 레이어에 들어갈 소스들을 적어준다 -->
</div>
<div style="font:13px normal 돋움;">
화면 오른편 하단의 <b style="color:blue">파란 글씨</b>가 스크롤 되고 있다.<br>
스크롤바를 생성하기 위해서 <br> 태그를 많이 적었으며,<br>
<br>
<b>id</b> 가 <b>scroll_layer</b> 인 레이어 내에 원하는 내용을 코딩해 주면 된다.<br>
<br>
</div>
<br><br>
<input type="button" value="소스보기" onclick="javascript:viewSource()">
<br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script language="javascript">
<!--
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var fix_layer = "scroll_layer"; // 고정시킬 레이어의 id 값을 적어준다.
bannerHeight = eval(document.body.clientHeight - 300) // 고정시킬 세로의 위치를 정해 준다. 300 은 아래에서부터의 거리(px 단위)
var isNS = navigator.appName == "Netscape";
if (isNS4) {
var divMenu = document[fix_layer];
divMenu.top = top.pageYOffset + bannerHeight;
divMenu.visibility = "visible";
moveRightEdge();
} else if (isDOM) {
var divMenu = getRef(fix_layer);
divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + bannerHeight;
divMenu.style.visibility = "visible";
moveRightEdge();
}
function getRef(id) { //오른쪽 베너 레이어 고정함수
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
function moveRightEdge() { //오른쪽 베너 레이어 고정함수
var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;
if (isNS4) {
yMenuFrom = divMenu.top;
yMenuTo = windows.pageYOffset + bannerHeight; // 위쪽 위치
} else if (isDOM) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = (isNS ? window.pageYOffset : document.body.scrollTop) + bannerHeight; // 위쪽 위치
}
timeoutNextCheck = 500; // 사용자의 스크롤이 있은후 움직임 시작 (현재 0.5초 , 1000이면 1초)
if (yMenuFrom != yMenuTo) {
yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 20);
if (yMenuTo < yMenuFrom)
yOffset = -yOffset;
if (isNS4)
divMenu.top += yOffset;
else if (isDOM)
divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10; // 제위치로 돌아오는 동안의 속도 조절 (현재 0.01초)
}
setTimeout ("moveRightEdge()", timeoutNextCheck);
}
-->
</script>
<div id="source" style="display:none">
<xmp>
<div id="scroll_layer" style="position:absolute;left:800"> <!-- 고정시킬 가로의 레이어 위치를 정해준다. 800은 왼쪽에서부터 800px -->
<font color="blue" size="2">고정레이어</font> <!-- 이곳에 레이어에 들어갈 소스들을 적어준다 -->
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script language="javascript">
<!--
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var fix_layer = "scroll_layer"; // 고정시킬 레이어의 id 값을 적어준다.(여기서는 위의 scroll_layer )
bannerHeight = eval(document.body.clientHeight - 300) // 고정시킬 세로의 위치를 정해 준다. 300 은 아래에서부터의 거리(px 단위)
var isNS = navigator.appName == "Netscape";
if (isNS4) {
var divMenu = document[fix_layer];
divMenu.top = top.pageYOffset + bannerHeight;
divMenu.visibility = "visible";
moveRightEdge();
} else if (isDOM) {
var divMenu = getRef(fix_layer);
divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + bannerHeight;
divMenu.style.visibility = "visible";
moveRightEdge();
}
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
function moveRightEdge() {
var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;
if (isNS4) {
yMenuFrom = divMenu.top;
yMenuTo = windows.pageYOffset + bannerHeight; // 위쪽 위치
} else if (isDOM) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = (isNS ? window.pageYOffset : document.body.scrollTop) + bannerHeight; // 위쪽 위치
}
timeoutNextCheck = 500; // 사용자의 스크롤이 있은후 움직임 시작 (현재 0.5초 , 1000이면 1초)
if (yMenuFrom != yMenuTo) {
yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 20);
if (yMenuTo < yMenuFrom)
yOffset = -yOffset;
if (isNS4)
divMenu.top += yOffset;
else if (isDOM)
divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10; // 제위치로 돌아오는 동안의 속도 조절 (현재 0.01초)
}
setTimeout ("moveRightEdge()", timeoutNextCheck);
}
-->
</script>
</xmp>
</div>
|
(7)
|
◇
레이어 고정시키기(자바스크립트 활용)
|
07-01 |
형남삼 |
5576 |
659 |
| |
(글 내용 미리보기)
<script language="javascript">
var message= new Array();
message[0] = "한국 축구 4강 진출 했습니다." + " | | "
message[1] = "비록 결승진출을 하지는 못했지만..." + " | | "
message[2] = "국민들의 엄청난 응원과 염원으로 ..." + " | | "
message[3] = "너무도 기쁩니다." + " | | "
//for(i=0;i<5;i++){
//message[i] = "폴란드 | 월드컵 | 한국";
//}
// 박스높이
var scrollerheight=85;
// 박스 가로
var scrollerwidth=125;
// 왼쪽 여백
var scrollertop=3;
// 위쪽 여백
var scrollerleft=9;
// 박스와 텍스트 간의 간격
var scrollerpadding=3;
// 테두리 두께
var backgroundborder=0;
// 박스 배경
var scrollerbgcolor="#FFFFFF";
// 제목 속성
var font_titleface="Verdana";
var font_titlecolor="#000099";
var font_titlesize=2;
// 설명 속성
var font_copyface="Verdana";
var font_copycolor="#660000";
var font_copysize=2;
// 메세지간 지연시간
var standstillfix=3000;
/////////////////
var cliptop=0;
var clipbottom=scrollerheight-2*scrollerpadding;
var clipleft=0;
var clipright=scrollerwidth;
var i_message=0;
var mes_joined;
var mes_split;
var contenttext;
var contentbg;
var totalheight=scrollerheight*(message.length);
var i_height=0;
var step=1;
var pause=20;
var standstillflex=0;
function initiate(){
contenttext="<table cellpadding=0 cellspacing=0 border=0 width="+(scrollerwidth-2*scrollerpadding)+">";
contenttext+="<tr valign='middle'><td height='"+scrollerheight+"'><br></td></tr>";
for (i=0;i<=message.length-1;i++) {
mes_joined=message[i];
mes_split=mes_joined.split("|");
contenttext+="<tr valign='middle'>"
contenttext+="<td height='"+scrollerheight+"'>"
contenttext+="<font color='"+font_titlecolor+"'>"+mes_split[0]+"</font><br>"
contenttext+="<font color='"+font_copycolor+"'>"+mes_split[1]+"</font><br></td></tr>";
}
contenttext+="</table>";
contentbg="<table cellpadding=0 cellspacing=0 border="+backgroundborder+" width='"+scrollerwidth+"'>"
contentbg+="<tr><td height='"+scrollerheight+"' bgcolor="+scrollerbgcolor+"> </td></tr></table>";
if (document.all) {
scrollertext.innerHTML = contenttext;
scrollerbg.innerHTML = contentbg;
document.all.scrollertext.style.posTop=scrollertop;
document.all.scrollertext.style.posLeft=scrollerleft;
document.all.scrollerbg.style.posTop=scrollertop-scrollerpadding;
document.all.scrollerbg.style.posLeft=scrollerleft-scrollerpadding;
document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";
}
if (document.layers) {
document.scrollertext.document.write(contenttext);
document.scrollertext.document.close();
document.scrollerbg.document.write(contentbg);
document.scrollerbg.document.close();
document.scrollertext.top=scrollertop;
document.scrollertext.left=scrollerleft;
document.scrollerbg.top=scrollertop-scrollerpadding;
document.scrollerbg.left=scrollerleft-scrollerpadding;
document.scrollertext.clip.left=clipleft;
document.scrollertext.clip.right=clipright;
document.scrollertext.clip.top=cliptop;
document.scrollertext.clip.bottom=clipbottom;
}
scroll()
}
function scroll(){
standstillflex=standstillfix;
if (document.all){
if (i_height<scrollerheight) {
i_height+=step;
cliptop+=step;
clipbottom+=step;
document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";
document.all.scrollertext.style.posTop-=step;
var timer=setTimeout("scroll()",pause);
}
else {
if (document.all.scrollertext.style.posTop<=-(totalheight)) {
document.all.scrollertext.style.posTop=scrollertop;
cliptop=0;
clipbottom=scrollerheight-2*scrollerpadding;
document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";
standstillflex=0;
}
i_height=0;
clearTimeout(timer);
var timer=setTimeout("scroll()",standstillflex);
}
}
if (document.layers){
if (i_height<scrollerheight) {
i_height+=step;
cliptop+=step;
clipbottom+=step;
document.scrollertext.clip.left=clipleft;
document.scrollertext.clip.right=clipright;
document.scrollertext.clip.top=cliptop;
document.scrollertext.clip.bottom=clipbottom;
document.scrollertext.top-=step;
var timer=setTimeout("scroll()",pause);
}
else {
if (document.scrollertext.top<=-(totalheight)) {
document.scrollertext.top=scrollertop;
cliptop=0;
clipbottom=scrollerheight-2*scrollerpadding;
document.scrollertext.clip.left=clipleft;
document.scrollertext.clip.right=clipright;
document.scrollertext.clip.top=cliptop;
document.scrollertext.clip.bottom=clipbottom;
standstillflex=0;
}
i_height=0;
clearTimeout(timer);
var timer=setTimeout("scroll()",standstillflex);
}
}
}
</script>
<style>
div,td{font:normal 100 12px 굴림;line-height:150%;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:underline}
</style>
<body style="margin:0">
<div id="scrollerbg" style="position:absolute;top:0;left:0;border:1 #EFEFEF solid;"> </div>
<div id="scrollertext" style="position:absolute;top:0;left:0;"> </div>
<br><br><br><br><br><br>
<script lauguage="javascript">
setTimeout("initiate()",100)
</script>
<script lauguage="javascript">
function viewSource()
{
var content = document.all.source.innerHTML;
source_docu = window.open("","","toolbar=1,scrollbars=1,menubar=0,status=1");
source_docu.document.open();
source_docu.document.write(content);
}
</script>
<br>
<b>왼쪽 상단</b>을 보시면 메시지들이 스크롤 되고 있습니다.<br>
자세한 사항은 소스보기를 참고 하세요.<br>
<br>
<input type="button" value="소스보기" onclick="javascript:viewSource()">
<br><br>
<div id="source" style="display:none">
<xmp>
<script language="javascript">
var message= new Array();
message[0] = "한국 축구 4강 진출 했습니다." + " | | "
message[1] = "비록 결승진출을 하지는 못했지만..." + " | | "
message[2] = "국민들의 엄청난 응원과 염원으로 ..." + " | | "
message[3] = "너무도 기쁩니다." + " | | "
// 박스높이
var scrollerheight=85;
// 박스 가로
var scrollerwidth=125;
// 왼쪽 여백
var scrollertop=3;
// 위쪽 여백
var scrollerleft=9;
// 박스와 텍스트 간의 간격
var scrollerpadding=3;
// 테두리 두께
var backgroundborder=0;
// 박스 배경
var scrollerbgcolor="#FFFFFF";
// 제목 속성
var font_titleface="Verdana";
var font_titlecolor="#000099";
var font_titlesize=2;
// 설명 속성
var font_copyface="Verdana";
var font_copycolor="#660000";
var font_copysize=2;
// 메세지간 지연시간
var standstillfix=3000;
/////////////////
var cliptop=0;
var clipbottom=scrollerheight-2*scrollerpadding;
var clipleft=0;
var clipright=scrollerwidth;
var i_message=0;
var mes_joined;
var mes_split;
var contenttext;
var contentbg;
var totalheight=scrollerheight*(message.length);
var i_height=0;
var step=1;
var pause=20;
var standstillflex=0;
function initiate(){
contenttext="<table cellpadding=0 cellspacing=0 border=0 width="+(scrollerwidth-2*scrollerpadding)+">";
contenttext+="<tr valign='middle'><td height='"+scrollerheight+"'><br></td></tr>";
for (i=0;i<=message.length-1;i++) {
mes_joined=message[i];
mes_split=mes_joined.split("|");
contenttext+="<tr valign='middle'>"
contenttext+="<td height='"+scrollerheight+"'>"
contenttext+="<font color='"+font_titlecolor+"'>"+mes_split[0]+"</font><br>"
contenttext+="<font color='"+font_copycolor+"'>"+mes_split[1]+"</font><br></td></tr>";
}
contenttext+="</table>";
contentbg="<table cellpadding=0 cellspacing=0 border="+backgroundborder+" width='"+scrollerwidth+"'>"
contentbg+="<tr><td height='"+scrollerheight+"' bgcolor="+scrollerbgcolor+"> </td></tr></table>";
if (document.all) {
scrollertext.innerHTML = contenttext;
scrollerbg.innerHTML = contentbg;
document.all.scrollertext.style.posTop=scrollertop;
document.all.scrollertext.style.posLeft=scrollerleft;
document.all.scrollerbg.style.posTop=scrollertop-scrollerpadding;
document.all.scrollerbg.style.posLeft=scrollerleft-scrollerpadding;
document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";
}
if (document.layers) {
document.scrollertext.document.write(contenttext);
document.scrollertext.document.close();
document.scrollerbg.document.write(contentbg);
document.scrollerbg.document.close();
document.scrollertext.top=scrollertop;
document.scrollertext.left=scrollerleft;
document.scrollerbg.top=scrollertop-scrollerpadding;
document.scrollerbg.left=scrollerleft-scrollerpadding;
document.scrollertext.clip.left=clipleft;
document.scrollertext.clip.right=clipright;
document.scrollertext.clip.top=cliptop;
document.scrollertext.clip.bottom=clipbottom;
}
scroll()
}
function scroll(){
standstillflex=standstillfix;
if (document.all){
if (i_height<scrollerheight) {
i_height+=step;
cliptop+=step;
clipbottom+=step;
document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";
document.all.scrollertext.style.posTop-=step;
var timer=setTimeout("scroll()",pause);
}
else {
if (document.all.scrollertext.style.posTop<=-(totalheight)) {
document.all.scrollertext.style.posTop=scrollertop;
cliptop=0;
clipbottom=scrollerheight-2*scrollerpadding;
document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";
standstillflex=0;
}
i_height=0;
clearTimeout(timer);
var timer=setTimeout("scroll()",standstillflex);
}
}
if (document.layers){
if (i_height<scrollerheight) {
i_height+=step;
cliptop+=step;
clipbottom+=step;
document.scrollertext.clip.left=clipleft;
document.scrollertext.clip.right=clipright;
document.scrollertext.clip.top=cliptop;
document.scrollertext.clip.bottom=clipbottom;
document.scrollertext.top-=step;
var timer=setTimeout("scroll()",pause);
}
else {
if (document.scrollertext.top<=-(totalheight)) {
document.scrollertext.top=scrollertop;
cliptop=0;
clipbottom=scrollerheight-2*scrollerpadding;
document.scrollertext.clip.left=clipleft;
document.scrollertext.clip.right=clipright;
document.scrollertext.clip.top=cliptop;
document.scrollertext.clip.bottom=clipbottom;
standstillflex=0;
}
i_height=0;
clearTimeout(timer);
var timer=setTimeout("scroll()",standstillflex);
}
}
}
</script>
<style>
div,td{font:normal 100 12px 굴림;line-height:150%;} <!-- 스크롤되는 글자들의 글꼴이나 문단모양 조절 -->
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:underline}
</style>
<body style="margin:0">
<div id="scrollerbg" style="position:absolute;top:0;left:0;border:1 #EFEFEF solid;"> </div>
<div id="scrollertext" style="position:absolute;top:0;left:0;"> </div>
<br><br><br><br><br><br>
<script lauguage="javascript">
setTimeout("initiate()",100) //스크롤 간격을 조절. 100이면 1/10초를 의미함. 즉, 1000이면 1초
</script>
</xmp>
</div>
|
(6)
|
◇
스크롤되는 메시지(자바스크립트 활용)
[2]
|
07-01 |
형남삼 |
1436 |
650 |
| |
(글 내용 미리보기)
<script language="javascript">
////// 문서를 로딩하는 객체 생성및 로딩 /////////////////////////////////////////////////////////
var htmldocu = new ActiveXObject("microsoft.xmldom");
htmldocu.load("upfiles/phone.htm");
//// 로딩 끝 ////
var treeNode;
function StartUp() ////////// 로딩이 성공적으로 이루어졌는지 체크하여 소스를 그대로 출력해주는 함수
{
if( htmldocu.readyState != "4") // readyState 가 4 이면 문서가 정상적으로 로딩된것임.
{ alert("문서 로딩이 이루어지지 않았습니다.");}
else
{
treeNode = htmldocu.documentElement; // 성공적으로 로딩이 되었으면 treeNode 변수에 로딩값 할당.
}
}
function readDocument() ////// 소스파일의 내용을 읽어오는 함수
{
var content = treeNode.xml;
alert(content);
}
////////////// 알아두면 도움되는 속성 ///////////////////////////////////////////////////////////
//var all_line = treeNode.xml; // 문서의 전체 내용.
//var nodeCount = treeNode.childNodes.length; // 부모 태그의 수.
//var f_chi_tag = treeNode.firstChild.nodeName; // 첫번째 자식 태그의 태그이름.
//var s_chi_tag = treeNode.firstChild.childNodes[0].nodeName; // 첫번째 손자 태그의 태그이름.
//var s_chi_txt = treeNode.firstChild.childNodes[0].text; // 첫번째 손자 태그의 내용.
//var scond_tag = treeNode.childNodes[1].nodeName;
////////////// 알아두면 도움되는 속성 //////////////////////////////////////////////////////////
/////// 전화번호 목록을 읽어오는 함수 //////////////////////////////////////////////////////////
function personList()
{
var cnt_person = treeNode.childNodes[1].childNodes.length;
var cnt_item = treeNode.childNodes[1].childNodes[0].childNodes.length;
var phone_list = "";
for(j=0 ; j < cnt_person ; j++)
{
for(i=0 ; i < cnt_item ; i++)
{
phone_list += treeNode.childNodes[1].childNodes[j].childNodes[i].nodeName;
phone_list += " : " + treeNode.childNodes[1].childNodes[j].childNodes[i].text + "<br>";
}
i = 0;
phone_list += "<br>";
}
var content = phone_list;
source_docu = window.open("","","toolbar=1,scrollbars=1,menubar=0,status=1,width=400,height=300,left=300");
source_docu.document.open();
source_docu.document.write(content);
}
function viewSource()
{
var content = document.all.source.innerHTML;
source_docu = window.open("","","toolbar=1,scrollbars=1,menubar=0,status=1");
source_docu.document.open();
source_docu.document.write(content);
}
</script>
<h3 style="color:orange"> ActiveXObject </h3>
<div style="font:12 normal 돋움" id="example">
이번 예제는 아래와 같은 <b>phone.htm</b> 이라는 파일이 <b>같은 위치</b>에 있다고 전제하고,<br>
<b>phone.htm</b> 에서 내용들을 불러오는 예제이다.<br>
<br>
쓰이는 <b>javascript 개체</b>는 <b style="color:blue">microsoft.xmldom</b> 이라는 개체이며,<br>
각각의 속성은 아래의 소스보기를 클릭하면 자세한 소스를 볼 수 있다.<br>
</h3>
<pre>
<fieldset style="width:600;height:300">
<legend> phone.htm 소스 </legend>
<xmp>
<HTML>
<HEAD>
<TITLE>phone book</TITLE>
</HEAD>
<BODY>
<person>
<name> namsam hyung </name>
<phone> 019-399-9276 </phone>
<email> namsam@hanmail.net </email>
<homepage> www.namsam.com </homepage>
</person>
<person>
<name> myungbo hong </name>
<phone> 011-399-9276 </phone>
<email> myungbo@hanmail.net </email>
<homepage> www.myungbo.com </homepage>
</person>
</BODY>
</HTML>
</xmp>
</fieldset>
</pre>
<br>
<br>
<input type="button" value="로딩할 문서의 소스보기"
onclick="javascript:readDocument()">
<input type="button" value="전화번호 리스트보기"
onclick="javascript:personList()">
<input type="button" value="현재 문서의 소스보기"
onclick="javascript:viewSource()">
<!-- 문서의 소스 보기 -->
<div id="source" style="display:none">
<xmp style="font-size:10pt">
<script language="javascript">
////// 문서를 로딩하는 객체 생성및 로딩 /////////////////////////////////////////////////////////
var htmldocu = new ActiveXObject("microsoft.xmldom");
htmldocu.load("phone.htm");
//// 로딩 끝 ////
var treeNode;
function StartUp() ////////// 로딩이 성공적으로 이루어졌는지 체크하는 함수
{
if( htmldocu.readyState != "4") // readyState 가 4 이면 문서가 정상적으로 로딩된것임.
{ alert("문서 로딩이 이루어지지 않았습니다.");}
else
{
treeNode = htmldocu.documentElement; // 성공적으로 로딩이 되었으면 treeNode 변수에 로딩값 할당.
}
}
function readDocument() ////// 소스파일의 내용을 읽어오는 함수
{
var content = treeNode.xml;
alert(content);
}
////////////// 알아두면 도움되는 속성 ///////////////////////////////////////////////////////////
//var all_line = treeNode.xml; // 문서의 전체 내용.
//var nodeCount = treeNode.childNodes.length; // 부모 태그의 수.
//var f_chi_tag = treeNode.firstChild.nodeName; // 첫번째 자식 태그의 태그이름.
//var s_chi_tag = treeNode.firstChild.childNodes[0].nodeName; // 첫번째 손자 태그의 태그이름.
//var s_chi_txt = treeNode.firstChild.childNodes[0].text; // 첫번째 손자 태그의 내용.
//var scond_tag = treeNode.childNodes[1].nodeName;
////////////// 알아두면 도움되는 속성 //////////////////////////////////////////////////////////
/////// 전화번호 목록을 읽어오는 함수 //////////////////////////////////////////////////////////
function personList()
{
var cnt_person = treeNode.childNodes[1].childNodes.length;
var cnt_item = treeNode.childNodes[1].childNodes[0].childNodes.length;
var phone_list = "";
for(j=0 ; j < cnt_person ; j++)
{
for(i=0 ; i < cnt_item ; i++)
{
phone_list += treeNode.childNodes[1].childNodes[j].childNodes[i].nodeName;
phone_list += " : " + treeNode.childNodes[1].childNodes[j].childNodes[i].text + "<br>";
}
i = 0;
phone_list += "<br>";
}
var content = phone_list;
source_docu = window.open("","","toolbar=1,scrollbars=1,menubar=0,status=1,width=400,height=300,left=300");
source_docu.document.open();
source_docu.document.write(content);
}
function viewSource()
{
var content = document.all.source.innerHTML;
source_docu = window.open("","","toolbar=1,scrollbars=1,menubar=0,status=1");
source_docu.document.open();
source_docu.document.write(content);
}
</script>
<body onLoad="javascript:StartUp()">
<br>
<input type="button" value="로딩할 문서의 소스보기"
onclick="javascript:readDocument()">
<input type="button" value="전화번호리스트보기"
onclick="javascript:personList()">
<input type="button" value="소스보기"
onclick="javascript:viewSource()">
</xmp>
</div>
<script language="javascript">
setTimeout("StartUp()",2000);
</script>
|
(5)
|
◇
외부문서의 내용 읽어오기(자바스크립트 활용)..
|
07-01 |
형남삼 |
3956 |
680 |
| |
(글 내용 미리보기)
<style>
.hand{cursor:hand;}
</style>
<div style="font:12px">
이번 예제는 자바스크립트를 통해서 <b>미디어플레이어</b>를 컨트롤하는 예제입니다.
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding:0"><embed src="http://www.namsam.com/media/자전거 탄 풍경-보물(선생 박봉두 OST).wmv" id="Player"
autostart="true" DisplaySize="0" volume="0" showdisplay="false"
showcontrols="false" showtracker="true" clicktoplay="false"></embed></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="margin-top:-1" background="../media/image/bottom_back.gif" width="320">
<tr valign="bottom">
<td align="right"><img src="../media/image/play.gif" class="hand" onclick="Player.play()" alt="재생"></td>
<td width="30"><img src="../media/image/pause.gif" class="hand" onclick="Player.pause()" alt="일시정지"></td>
<td width="35"><img src="../media/image/stop.gif" class="hand" onclick="Player.stop()" alt="중지"></td>
<td align="right"><img src="../media/image/rewind.gif" class="hand" onclick="Player.fastReverse()" alt="되감기"></td>
<td><img src="../media/image/forward.gif" class="hand" onclick="Player.fastForward()" alt="빨리감기"></td>
<td align="right"><img src="../media/image/mute.gif" class="hand" onclick="Player.mute='true'" alt="소리끔"></td>
<td><img src="../media/image/no_mute.gif" class="hand" onclick="Player.mute='false'" alt="소리재생"></td>
<td align="right"><img src="../media/image/volume_down.gif" class="hand" onclick="Player.volume-=5" alt="volum down"></td>
<td><img src="../media/image/volume.gif"></td>
<td width="80"><img src="../media/image/volume_up.gif" class="hand" onclick="Player.volume+=5" alt="volum up"></td>
</tr>
</table>
<br><br>
<div style="font:12px">
<font style="color:red;font:12px"> [소스분석]</font><br>
<br>
우선 <b>embed</b> 테그에 <b>id</b>값을 부여합니다.(여기서는 <b>Player</b> )<br>
각각의 컨트롤함수는<br>
<br>
Player.<b>play()</b> -- 재생메서드<br>
Player.<b>pause()</b> -- 일시중지메서드<br>
Player.<b>stop()</b> -- 중지메서드<br>
Player.<b>fastReverse()</b> -- 되감기메서드<br>
Player.<b>fastForward()</b> -- 빨리감기메서드<br>
Player.<b>mute</b> -- 묵음속성(true/false)<br>
Player.<b>volume</b> -- 볼륨속성(-600 ~ 0)<br>
<br>
즉 <font color=red>객체이름.메서드</font> 또는 <font color=red>객체이름.속성</font> 으로 컨트롤 합니다.<br>
<b>이벤트핸들러로</b>는 <b>onClick</b> 이 쓰이고 있습니다.<br>
<br>
<b>embed</b> 태그내의 <b>DisplaySize</b>속성의 값은 0,1,2,3 등이 가능한데, <b>3</b>이면 <b>전체화면보기</b> 모드입니다.
<br>
</div>
<pre>
<xmp>
==== 소스 시작 ====
<style>
.hand{cursor:hand;}
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="image/mp_top.gif" width="390" height="5"></td>
</tr>
<td><img src="image/mp_left.gif" height="250" width="24"></td>
<td style="padding:0"><b><embed src="http://www.namsam.com/media/자전거 탄 풍경-보물(선생 박봉두 OST).wmv" id="Player"
autostart="true" DisplaySize="0" volume="0" showdisplay="false"
showcontrols="false" showtracker="true" clicktoplay="false"></embed></b></td>
<td><img src="image/mp_right.gif" height="250" width="25"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="margin-top:-1" background="image/bottom_back.gif" width="390">
<tr valign="bottom">
<td><img src="image/play.gif" class="hand" <b>onclick="Player.play()"</b> alt="재생"></td>
<td><img src="image/pause.gif" class="hand" <b>onclick="Player.pause()"</b> alt="일시정지"></td>
<td><img src="image/stop.gif" class="hand" <b>onclick="Player.stop()"</b> alt="중지"></td>
<td><img src="image/rewind.gif" class="hand" <b>onclick="Player.fastReverse()"</b> alt="되감기"></td>
<td><img src="image/forward.gif" class="hand" <b>onclick="Player.fastForward()"</b> alt="빨리감기"></td>
<td><img src="image/mute.gif" class="hand" <b>onclick="Player.mute='true'"</b> alt="소리끔"></td>
<td><img src="image/no_mute.gif" class="hand" <b>onclick="Player.mute='false'"</b> alt="소리재생"></td>
<td><img src="image/volume_down.gif" class="hand" <b>onclick="Player.volume-=5"</b> alt="volum down"></td>
<td><img src="image/volume.gif"></td>
<td><img src="image/volume_up.gif" class="hand" <b>onclick="Player.volume+=5"</b> alt="volum up"></td>
</tr>
</table>
==== 소스 끝 ====
</xmp>
</pre>
|
(4)
|
◇
미디어컨트롤(자바스트립트 활용)
|
06-30 |
형남삼 |
2333 |
664 |
| |
(글 내용 미리보기)
Player.stop() 버튼을 누르면 일시 중지가 될뿐
완전히 미디어 플레이어가 끝나지 않습니다.
어떻게 하면 끝낼 수 가 있는 지 알고 싶습니다.
|
(3)
|
┗>
[re]미디어컨트롤(자바스트립트 활용)
| 09-06 |
현주 |
1232 |
647 |
| |
(글 내용 미리보기)
반갑습니다.
현재의 홈페이지에서도 정지부분이 올바로 동작하지 않고있는데...
원인 분석이 아직 되지 못했습니다.
그래서,
나름대로 편법을 생각해 보았습니다.
실행부분에 media.stop();media.CurrentPosition=0
이렇게 해주면 중지 버튼을 클릭하면 위치가 초기로 돌아가기 때문에 올바른 동작을 볼 수 있습니다.
|
(2)
|
┗>
[re][re]미디어컨트롤(자바스트립트 활..
| 09-07 |
형남삼 |
1144 |
669 |
| |
(글 내용 미리보기)
<DIV ALIGN="LEFT" STYLE="FONT:12PX;굴림,굴림체;PADDING-LEFT:30">
<H2 STYLE="COLOR:BLUE">IME-MODE</H2>
<FONT COLOR="RED">한글/영문 입력 조절 기능 ( <B>FORM</B> 태그내에서 사용 )</FONT><BR>
<BR>
<B>① ACTIVE : IME-MODE</B> 속성의 속성값이 <B>ACTIVE</B> 이면 한글을 입력 받습니다.<BR>
<B>② DISABLED : IME-MODE</B> 속성의 속성값이 <B>DISABLED</B> 이면 영문을 입력 받습니다.<BR>
<BR>
<B>사용법 :</B> <BR>
한글을 입력받고자 하면<BR>
<input type="text" STYLE="IME-MODE:ACTIVE"> <BR><BR>
영문을 입력받고자 하면<BR>
<input type="text" STYLE="IME-MODE:DISABLED"><BR>
<BR>
<FIELDSET STYLE="WIDTH=400;HEIGHT:70;PADDING:15;">
<LEGEND>예제</LEGEND>
아래에는 영문이 입력됩니다.<BR>
<input type="text" style="IME-MODE:DISABLED"><BR>
<BR>
아래에는 한글이 입력됩니다.<BR>
<input type="text" style="IME-MODE:ACTIVE"><BR>
</FIELDSET>
<BR><BR>
<PRE>
<FIELDSET STYLE="WIDTH=400;HEIGHT:70;PADDING:15;">
<LEGEND>소스</LEGEND>
<xmp>
아래에는 영문이 입력됩니다.<BR>
<input type="text" style="IME-MODE:DISABLED"><BR>
<BR>
아래에는 한글이 입력됩니다.<BR>
<input type="text" style="IME-MODE:ACTIVE">
</xmp>
</FIELDSET>
</PRE>
<font color=red>
※ IE5.5 이상에서 정상적으로 동작합니다.</font> 이전의 버전에서는 될듯 말듯...
|
(1)
|
◇
한글/영문 입력 조절(CSS활용)
|
06-26 |
형남삼 |
1368 |
386 |
| |
|
|
[처음]
◁◁
◀
[1]
▶
▷▷
[끝]
1/1
(total:24)
|
