Menu

3단 롤오버 이미지버튼

2016. 6. 2. 10:00

안개핑 Javascript

 

.


 
<html>
<head>

<title>제목 없음</title>
<meta name="generator" content="Namo WebEditor v5.0">
<script language="JavaScript">
// 이미지 파일을 미리 로딩하기 위한 준비.
//   롤오버할 이미지가 더 있는 경우에는 아래와 구조가 같은 또다른-
//   배열을 선언하여 사용하면 된다.
var imgStopArray = new Array();
imgStopArray["out"] = new Image();  imgStopArray["out"].src = "imge/stop_out.jpg";
imgStopArray["over"] = new Image(); imgStopArray["over"].src = "imge/stop_over.jpg";
imgStopArray["push"] = new Image(); imgStopArray["push"].src = "imge/stop_push.jpg";
// 롤오버 효과를 위한 함수.
function rollOver(imgObj, imgArray, action) {
  imgObj.src = imgStopArray[action].src;
}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p align="center">&nbsp;
<p align="center"><img name="imgStop" src="imge/stop_out.jpg"
  onMouseOver="rollOver(this, imgStopArray, 'over')"
  onMouseDown="rollOver(this, imgStopArray, 'push')"
  onMouseUp="rollOver(this, imgStopArray, 'over')"
  onMouseOut="rollOver(this, imgStopArray, 'out')">
</p>
<p align="center">&nbsp;</p>
<p align="center"><input type=button name=bt_s value="소스보기" onClick='window.location="view-source:"+window.location.href'>
</p>
</body>
</html>