4. javascript 활용, Login Page 꾸미기, Image 넘기기, Image 버튼으로 넘기기

2017. 2. 8. 12:55

1. Image 정보 표시

<!doctype html>

<head>

<title>Image 정보 표시</title>

</head>

<body>

<br>

<!--

// 이미지 정보를 표시 합니다.

document.write("이미지 경로 : " + document.pic_01.src + "<br>");

document.write("이미지 이름 : " + document.pic_01.name + "<br>");

document.write("이미지 넓이 : " + document.pic_01.width + "<br>");

document.write("이미지 높이 : " + document.pic_01.height + "<br>");

//-->

</SCRIPT>

</CENTER>

</body>

</html>

<설정한 이미지 이름이 출력 됨>

<이미지의 넓이와 높이가 정확하게 출력되었다.>

2. Curcor 관련 메소드 사용

<!doctype html>

<head>

<title>Curcor 관련 메소드 사용</title>

</head>

<body>

ID : <INPUT type="text" name="id" size="20"> <P>

NAME : <INPUT type="text" name="name" size="20"

value="공백없이입력" onFocus="this.value='korea' "><P>

PASSWORD : <INPUT type="password" name="pwd" size="20"><P>

메시지를 입력하여 주세요 !!!

</TEXTAREA>

</FORM>

<!--

// 마우스 커서가 ID 입력상자에 오게함

document.form_ss.id.focus();

//-->

</SCRIPT>

</CENTER>

</body>

</html>

<공백없이 입력을 클릭하는 순간 korea로 바뀌었다.>

3. Image counter

<!doctype html>

<head>

<title>Image counter</title>

</head>

<body>

<P>

<P>

<!--

str = "이미지 갯수 : ";

str += document.images.length;

str +="<br><br> 이미지 객체의 이름 : "

for (i = 0;i < document.images.length ;i++ )

{

str += document.images[i].name + "   ";

}

document.write(str);

//-->

</SCRIPT>

</CENTER>

</body>

</html>

4. javascript 활용

<!doctype html>

<head>

<title>javascript 활용</title>

<!--

function show_layer(id)

{

document.all[id].style.visibility="visible";

}

function hide_layer(id)

{

document.all[id].style.visibility="hidden";

}

//-->

</SCRIPT>

<!--

#wrapBody {width:912px;}

#naviMain {margin:20px 50px;}

a {text-decoration:none;

padding:10px 20px;

color:#333;

font-family:Times;}

a:hover, a:active {color:#c30;

text-decoration:none;

font-family:Times;}

//-->

</STYLE>

</head>

<body>

<A href="#" onmouseover="show_layer('car1')" onmouseout="hide_layer('car1')">GENESIS COUPE</A>

<A href="#" onmouseover="show_layer('car2')" onmouseout="hide_layer('car2')">SONATA</A>

<A href="#" onmouseover="show_layer('car3')" onmouseout="hide_layer('car3')">GRANDURE</A>

<A href="#" onmouseover="show_layer('car4')" onmouseout="hide_layer('car4')">AVANTE</A>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</DIV>

</body>

</html>

<글에 마우스 커서를 올리면 이미지가 나옵니다.>

5. Image Over Out

<!doctype html>

<head>

<title>Image Over Out</title>

<!--

function Over()

{

document.PIC01.src="../images/pic02.jpg";

}

function Out()

{

document.PIC01.src="../images/pic01.jpg";

}

function Over1()

{

document.PIC02.src="../images/2.png";

}

function Out1()

{

document.PIC02.src="../images/1c.jpg";

}

//-->

</SCRIPT>

</head>

<body>

</A>

</A>

</CENTER>

</body>

</html>

<마우스 커서를 올리기 전>

<마우스 커서를 올린 후>

6. Login Page 꾸미기

<!doctype html>

<head>

<title>Login Page 꾸미기</title>

<!--

function loginCheck()

{

if (document.loginFrm.id.value== "")

{

alert(" 아이디를 입력해 주세요.!!!!");

document.loginFrm.id.focus();

return;

}

else if (document.loginFrm.pwd.value== "")

{

alert(" 비밀 번호를 입력해 주세요.!!!!");

document.loginFrm.pwd.focus();

return;

}

else

{

alert("아이디 : " +document.loginFrm.id.value+ "\n 암호 : " +document.loginFrm.pwd.value+ " 입니다. \n ");

}

//-->

</SCRIPT>

</head>

<body>

<P>

아이디와 암호를 입력 하시오!!! <br><br>

아이디 : <INPUT type="text" name="id" size="12"><BR>

비밀번호 : <INPUT type="password" name="pwd" size="12"><BR>

</FORM>

</CENTER>

</body>

</html>

<첫화면>

<아이디만 입력하고 비밀번호를 입력하지 않았을때>

7. Login Page 꾸미기

<!doctype html>

<head>

<title>Login Page 꾸미기</title>

<!--

function selectFunc()

{

document.loginFrm.id.select();

}

//-->

</SCRIPT>

</head>

<body>

아이디를 입력 하시오. <BR>

아이디 : <INPUT type="text" name="id" size="20" value="koreaseoul">

</FORM>

</body>

</html>

<처음 화면>

<선택택을 클릭하면 아이디 주변이 파랗게 됩니다.>

8. Login Page 꾸미기

<!doctype html>

<head>

<title>Login Page 꾸미기</title>

<!--

function selCheck()

{

str = " 관심 분야 : ";

for (i = 0; i < memberFrm.interest.length ;i++ )

{

if (memberFrm.interest[i].checked == true)

{

str += memberFrm.interest[i].value + " ";

}

alert(str);

document.write(" : " + str + "    ");

}

//-->

</SCRIPT>

</head>

<body>

<input type="checkbox" name="interest" value="생두"> 생두

<input type="checkbox" name="interest" value="원두"> 원두

<input type="checkbox" name="interest" value="로스팅"> 로스팅

<input type="checkbox" name="interest" value="에스프레소"> 에스프레소

<input type="checkbox" name="interest" value="아메리카노"> 아메리카노

<input type="checkbox" name="interest" value="창업"> 창업

</FORM>

</CENTER>

</body>

</html>

<관심 분야를 선택하고 확인을 클릭합니다.>

<확인을 클릭합니다.>

9. Radio Button Test

<!doctype html>

<head>

<title>Radio Button Test</title>

<!--

function selCheck()

{

str ="성별 :";

for (i = 0;i < memberFrm.sex.length ;i++ )

{

if (memberFrm.sex[i].checked == true)

{

str += memberFrm.sex[i].value;

}

str += "\n\n Email/SMS 정보 수신 ";

for (i = 0;i < memberFrm.chk_mail.length ;i++ )

{

if (memberFrm.chk_mail[i].checked == true)

{

str += memberFrm.chk_mail[i].value;

}

str += "\n\n좋아하는 산은? ";

for (i = 0;i < memberFrm.a.length ;i++ )

{

if (memberFrm.a[i].checked == true)

{

str += memberFrm.a[i].value;

}

alert(" 선택한 정보 : \n\n " + str);

}

//-->

</SCRIPT>

</head>

<body>

성별 : <INPUT type="radio" name="sex" checked value="남자">남자

<INPUT type="radio" name="sex" value="여자">여자

<P>

email/SMS 정보 수신 : <INPUT type="radio" name="chk_mail" checked value="yes">수신

<INPUT type="radio" name="chk_mail" value="no">수신 거부

<P>

좋아하는 산은? : <INPUT type="radio" name="a" checked value="도당산">도당산

<INPUT type="radio" name="a" value="백두산">백두산

<INPUT type="radio" name="a" value="금강산">금강산

<P>

</FORM>

</CENTER>

</body>

</html>

<확인을 클릭하면..>

<이렇게 내용이 나옵니다.>

10. Select Tag Test

<!doctype html>

<head>

<title>Select Tag Test</title>

<!--

function selCheck()

{

alert(document.memberFrm.job.value);

}

//-->

</SCRIPT>

</head>

<body>

직업 : <br>

</SELECT>

</FORM>

</CENTER>

</body>

</html>

<직업을 선택하고 확인을 누릅니다.>

11. Select Tag Test

<!doctype html>

<head>

<title>Select Tag Test</title>

<!--

function selCheck()

{

index = memberFrm.job.selectedIndex;

if (index == -1)

{

alert(" 항목이 선택되지 않았습니다.");

}

else

{

alert(index + " 번째 항목 : "+document.memberFrm.job.value);

}

//-->

</SCRIPT>

</head>

<body>

직업 <br>

<OPTION value="">선택하세요</OPTION>

</SELECT>

</FORM>

</CENTER>

</body>

</html>

<선택을 하면 페이지 내용이 출력 됩니다.>

12. Select Tag Test

<!doctype html>

<head>

<title>Select Tag Test</title>

<!--

function list_link(form)

{

index = document.form.listmenu.selectedIndex;

var URL = document.form.listmenu.options[document.form.listmenu.selectedIndex].value;

window.location.href=URL;

}

//-->

</SCRIPT>

</head>

<P>

</SELECT>

</FORM>

</CENTER>

</body>

</html>

<원하는곳을 선택하고 GoGo를 클릭하면 이동합니다.>

13. Image 넘기기

<!doctype html>

<head>

<title>Image 넘기기</title>

<!--

var rand_ing = 0;

var useRand= 0;

images = new Array();

// 보여줄 이미지를 아래와 같은 방법으로 설정

images[1] = new Image();

images[1].src="../images/movie01.jpg";

images[2] = new Image();

images[2].src="../images/movie02.jpg";

images[3] = new Image();

images[3].src="../images/movie03.jpg";

images[4] = new Image();

images[4].src="../images/movie04.jpg";

images[5] = new Image();

images[5].src="../images/movie05.jpg";

function SwapPic()

{

var imgnum = images.length-1;

{

var randnum = Math.random();

rand_img = Math.round((imgnum -1) *randnum) +1;

}

while (rand_img == useRand);

useRand = rand_img;

document.random_img.src = images[useRand].src;

}

//-->

</SCRIPT>

</head>

클릭하면 그림이 변경되어 나타납니다.

</CENTER>

</body>

</html>

<이미지를 클릭하면 그림이 랜덤으로 변경됩니다.>

14. Image 버튼으로 넘기기

<!doctype html>

<head>

<title>Image 버튼으로 넘기기</title>

</head>

</TD>

</TR>

<TR>

<!--

var photos = new Array();

var which = 0;

// 보여줄 이미지들을 아래의 방법으로 설정

photos[0] = "../images/movie01.jpg";

photos[1] = "../images/movie02.jpg";

photos[2] = "../images/movie03.jpg";

photos[3] = "../images/movie04.jpg";

photos[4] = "../images/movie05.jpg";

photos[5] = "../images/movie06.jpg";

photos[6] = "../images/movie07.jpg";

photos[7] = "../images/1d.jpg";

function backward()

{

if (which > 0)

{

which --;

document.images.gallery.src=photos[which];

}

function forward()

{

if (which < photos.length-1)

{

which ++;

document.images.gallery.src= photos[which];

}

//-->

</SCRIPT>

<INPUT type="button" value=">> 앞으로" name="B1" onClick="forward();" onFocus="this.blur();" style="background-color:#ffffff;border:none;color:#ff0000">

</FORM>

</TD>

</TR>

</TABLE>

</CENTER>

</body>

</html>

저작자표시 비영리 변경금지

'자바스크립트(Javascript)' 카테고리의 다른 글

3. 객체 사용, 브라우저 관련 내장 객체 (0)	2017.02.07
2. 선택문, switch 문, 반복문, while 문, do~while 문, 내장 함수, Javascript 함수의 정의 와 호출, 배열의 사용, 이벤트 사용 (0)	2017.02.06
1. Java Script(자바스크립트), javascript 삽입하기, javascript 에서 변수 사용 (0)	2017.02.06

테스토리

4. javascript 활용, Login Page 꾸미기, Image 넘기기, Image 버튼으로 넘기기

1. Image 정보 표시

2. Curcor 관련 메소드 사용

3. Image counter

4. javascript 활용

5. Image Over Out

6. Login Page 꾸미기

7. Login Page 꾸미기

8. Login Page 꾸미기

9. Radio Button Test

10. Select Tag Test

11. Select Tag Test

12. Select Tag Test

13. Image 넘기기

14. Image 버튼으로 넘기기

'자바스크립트(Javascript)' 카테고리의 다른 글

+ Recent posts

티스토리툴바