리그캣의 개발놀이터

HTML - 간단한 버스이동 소스 본문

프로그래밍 언어/HTML,CSS

HTML - 간단한 버스이동 소스

리그캣 2018. 1. 21. 17:17

HTML - 간단한 버스이동 소스


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html><head><title>레이어의 위치 이동</title></head> 
<script language="JavaScript"> 
  function layer1() { car.left = 30; car.top = 20 } // 압구정역 
  function layer2() { car.left = 185; car.top = 70 } // 압구정로 
  function layer3() { car.left = 100; car.top = 200 } // 선릉로 
  function layer4() { car.left = 270; car.top = 230 } // 선릉로 
  function first() { 
    car=bus.style;    // 객체 id "bus"를 car로 지정 
  } 
</script> 
</head> 
 
<body onload="first()"> 
<img src="apgujong.gif" width="307" height="247"> 
<div id="bus" style="position:absolute; top:0; left:0;"> 
  <img src="bus.gif"> 
</div> 
<form> 
  <input type="button" value="압구정역" onclick="layer1();"> 
  <input type="button" value="압구정로" onclick="layer2();"> 
  <input type="button" value="선릉로" onclick="layer3();"> 
  <input type="button" value="청담동" onclick="layer4();"> 
</form> 
</body></html>
cs


저작자표시

'프로그래밍 언어 > HTML,CSS' 카테고리의 다른 글

css-layer 나누기 퀴즈  (0) 2018.01.21
javascript - alert 사용하기  (0) 2018.01.21
CSS - Newelement.html  (0) 2018.01.21
CSS - layer 이해하기  (0) 2018.01.21
JAVASCRIPT - 간단한 버튼 함수 만들기  (0) 2018.01.21
'프로그래밍 언어/HTML,CSS' Related Articles more
Comments