| 지정 경로로 이동시키기 | go to 레이어이동하기 |
function goPath() {
path="160, 56, 140, 76, 122, 92, 114, 112, 112, 130, 120, 140, 134, 142, 154, "
+ "140, 170, 128, 182, 108, 184, 92, 184, 80, 183, 66, 182, 64, 182, 63, 182, "
+ "62, 188, 54, 200, 44, 210, 36, 211, 35, 212, 36, 213, 64, 221, 92, 223, 116, "
+ "223, 132, 223, 134, 223, 133, 229, 117, 247, 103, 265, 93, 271, 87, 271, 88, "
+ "263, 98, 239, 118, 211, 128, 189, 134, 179, 142, 167, 154, 161, 170, 161, "
+ "186, 167, 202, 179, 216, 201, 222, 239, 222, 263, 220, 271, 212, 271, 204, "
+ "272, 190, 278, 168, 280, 144, 286, 120, 292, 96, 292, 80, 292, 72, 292, 73, "
+ "282, 91, 281, 119, 287, 145, 305, 159, 317, 160, 325, 154, 326, 142, 326, "
+ "132, 326, 118, 327, 108, 333, 94, 343, 86, 351, 85, 359, 84, 361, 86, 363, "
+ "98, 363, 110, 347, 122, 335, 128, 336, 128, 352, 122, 370, 106, 376, 92, "
+ "377, 76, 377, 58, 377, 46, 377, 44, 377, 45, 377, 75, 385, 111, 393, 123, "
+ "395, 131, 395, 139, 395, 145, 381, 151, 361, 153, 337, 161, 329, 173, 328, "
+ "183, 330, 199, 342, 213, 368, 223, 402, 222, 422, 210, 424, 194, 422, 172, "
+ "410, 156, 398, 146, 397, 145";
pathFlag=0;
path = path.split(',')
movePath();
}
<body onLoad="goPath()">
"안녕" 이라는 글자로 레이어를 이동시켰는 좌표로 지정한 좌표입니다.path = path.split(',')
는 좌표를 지정한 문자열을 한개의 배열에 차례데로 저장합니다. path[0]은 160이고 path[1]은 56입니다.
path[path.length-1]은 마지막 top 좌표 145입니다.
pathFlag=0; 은 이들 배열을 이용하여 레이어를 이동시킬 때 각 인자의 순서를 가리킵니다. 그리고 레이어를 이동하는 movePath()를 부릅니다.
function movePath() {
if(pathFlag < path.length) {
if(n4) {
document.curs.left = path[pathFlag]-0
document.curs.top = path[pathFlag+1]-0
}
else if(e4) {
document.all.curs.style.pixelLeft = path[pathFlag]-0
document.all.curs.style.pixelTop = path[pathFlag+1]-0
}
pathFlag += 2
setTimeout("movePath()", 10)
}
}
로 레이어를 이동시킵니다.
<div id=curs style="position:absolute; left:200; top:0; width:10; height:10;">path</div>
레이어를 끌기하는 방법과 비슷한데, 마우스를 움직였을 때 레이어를 이동시키지 않고 좌표를 변수에 저장하여 이 좌표값을 구할 수 있습니다. 지정할 곳을 mousedown으로 시작을 하고 mousemove로 좌표값을 얻고 mouseup은 좌표값을 그만 저장합니다.
아래의 좌표구하기에서 폼 textarea에서 좌표를 구하고 복사해서 path에 지정하면 됩니다.
--
"위의 좌표구하기"에서 레이어 테두리로 style border를 지정하면 페이지를 여러번 재출력하면 가끔
win95+nn4.01에서 nn4가 다운이 되었습니다. border를 사용하지 말고 table의 background image나 table border를
사용하면 됩니다. CSS-P STYLE BORDER을 사용시 일어날 수 있습니다.
그리고 폼을 조금씩 setTimeout()로 조금씩 이동하게 만들면 폼의 내용이 nn4.01에서 깨져서 나왔습니다. form을 레이어 안에서 table로 배치를 할때, 순서에 따라서 이런 결과가 일어납니다. 깨지는 예는 아래와 같습니다.
<div> <table> <form> <tr><td> <input type=text> </td></tr> </form> </table> </div>form이 table안에 있을 때, 레이어를 조금씩 이동시키면 form의 내용이 깨져서 나옵니다. 이때는 form을 table 봐ㄲ에 html을 적으니 nn4에서 깨지지 않았습니다.
<div> <form> <table> <tr><td> <input type=text> </td></tr> </table> </form> </div>