정해진 시간에 따라 정해진 곳에서 그림이 바뀌게 하려면…
틀 안에서 자동으로 그림이 바뀌게 하려면 가장 먼저는 그 그림들부터 구해야 했습니다.
저는 물론 아주 앙큼한 것('Nipple')들로 구했었지만, 인터넷에 게시하려면 그럴 수가 없어서 게시해도 무방하다 싶은 걸(동물캐릭터) 찾았답니다.
1
~ 날 좀 보소 - 01 ~
그리고는 본래부터 있었던 걸 그럴싸하게 바꿔봤습니다.
물론 그것도 어떤 사이트로부터 그 대부분을 모방한 거나 다름이 없지만 말입니다.
2
~ 날 좀 보소 - 02 ~
위쪽은 그림이고 실제는 이렇습니다.
------------------------------------------------------------
<!DOCTYPE HTML>
<HTML><HEAD><TITLE>Chang_Picture</TITLE>
<Meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<STYLE>
BODY{background:yellow; margin:50px 0px 0px 0px; text-align:center;}
INPUT.M{width:450px; height:500px; border:0px;}
</STYLE>
<!-- 아래 그림 바꿔치기 소스의 출처입니다.
http://www.kor-ask.com/question/553336.html -->
<Script Language="JavaScript">
var LoveTime=1500; /* 그림 바뀌는 틈(간격), 여기선 1.5초입니다. */
var Img_list=[
/*
아래는 바꿔칠 그림들 주소입니다.
웹 사이트에 있다면 당연히 그 첫머리에 'http'가 붙겠습니다.
여기는 컴퓨터 안이니까 그냥 컴퓨터 안 주소를 썼지요.
*/
"C:/Down/Animal-01.jpg",
"C:/Down/Animal-02.jpg",
"C:/Down/Animal-03.jpg",
"C:/Down/Animal-04.jpg",
"C:/Down/Animal-05.jpg",
"C:/Down/Animal-06.jpg",
"C:/Down/Animal-07.jpg",
"C:/Down/Animal-08.jpg",
"C:/Down/Animal-09.jpg",
"C:/Down/Animal-10.jpg",
"C:/Down/Animal-11.jpg",
"C:/Down/Animal-12.jpg"
];
var Tm=0;
setInterval(function(){
var img=Img_list[++Tm%12]; /* 열두 번 바뀌게 할 거니까 */
/* 여기는 입력 상자('M') 안에 그림이 열리게 하는 태그이고 */
Man.style.background="url('"+img+"')";
/*
이쪽은 배경이 바뀌게 하는 태그입니다. 그러니까 주석('<!-- ~ -->')
달아둔 것 떼 버리면 배경 그림도 동시에 움직일 겁니다.
안팎에서 한꺼번에 움직이니까 정신이 사나우면 위쪽 태그에
주석 붙여버리면 배경 그림만 움직일 거예요.
*/
<!-- document.body.style.background="url('"+img+"')"; -->
}, LoveTime);
</Script></HEAD>
<BODY>
<INPUT type="button" name="Man" class="M" onfocus="blur()">
</BODY></HTML>
------------------------------------------------------------
그렇게 해서 바꿨더니 이런 식으로 보이네요.
3
~ 날 좀 보소 - 03 ~
문서에서 주석 처리했던 배경 부분의 양 끝에 주석을 벗겨냈더니 그림에서 설명한 대로 이렇게 정신없이 뿌렸답니다.
4
~ 날 좀 보소 - 04 ~
해서 이제는 바로 위쪽에 있는 입력 상자 쪽 태그 양 끝으로 주석을 붙이니까 이런 식으로 나옵니다.
아차! 여기서 미처 말 못했는데 본문에 입력 상자('INPUT~') 양 끝으로도 주석 처리해야 빈 상자가 배경을 가리지 않기에 이렇게 나온 겁니다.
5
~ 날 좀 보소 - 05 ~
제 컴퓨터에는 사실 이렇게 앙큼하지요.
저 그림 안팎('Nipple', '하트')에는 컴퓨팅에서 매우 중요한 프로그램 들('CCleaner.exe', 'TempDelete.exe')을 걸어 둔 까닭(?)이지만…
6
~ 날 좀 보소 - 06 ~
사실 처음부터 그렇게 그림이 쉽게 바뀌었던 건 아닙니다.
처음엔 그 방법을 도저히 모르겠기에 한다고 한 것이 시간이 지날 때마다 아이프레임을 두고 그 프레임 안에 새로운 그림이 열리게끔 짰었는데 컴퓨터에서 제가 생명처럼 여겼던 문제('CPU 사용률')가 터지더라고요.
심할 땐 '2~30%'까지 올라가기에 다른 길을 모색했던 게 바로 이런 모양샙니다.
이것으로 바꾸고 나니까 그 'CPU 사용률'이 가장 높았을 시점이 '9%'뿐이었답니다.
이렇게 높은 시점을 따려고 한참이나 기다렸을 정도입니다.
7
~ 날 좀 보소 - 07 ~
'짙은 녹색' 카테고리의 다른 글
| 구글의 주소록 써먹지는 않지만 정리하고 나니까… (0) | 2015.03.19 |
|---|---|
| 희망! 너에게 나를 바친다 (0) | 2015.03.16 |
| 에이블뉴스 홈에 달린 블로그 수정? 그 거 그렇게 어렵지 않거든요! (0) | 2015.03.10 |
| 단위를 다는 거가 웹 문서에서 얼마나 중요한지 인제야 깨닫습니다. (0) | 2015.03.09 |
| 드디어 웹 문서로 짠 바탕화면 복구하는 데 성공했습니다. (0) | 2015.03.06 |
