3.4 Javascript 대체 기법
3.4.1 배경 이미지 변경
(1) JavaScript를 사용한 경우
아래 예제는 JavaScript를 이용하여 초점이 있는가 여부에 따라 이미지 버튼(‘OK')과 텍스트 버튼(’Cancel‘)의 배경 이미지를 변경하는 예이다.
초점이 주어짐에 따라 버튼(‘OK’)의 배경 이미지가 (a)에서 (b)로 변화함을 알 수 있다.
[그림] ‘OK’버튼에 마우스 롤오버를 하기 전(a)과 후(b)
우수 사례스크립트 코드 부분
사례 코드
<script type="text/javascript">
<!--
var on = function(e){ e.getElementsByTagName("img")[0].src
= e.getElementsByTagName("img")[0].src.replace(".gif", "_on.gif");}
var out = function(e){ e.getElementsByTagName("img")[0].src
= e.getElementsByTagName("img")[0].src.replace("_on.gif", ".gif");}
//-->
</script>우수 사례HTML 코드 부분
사례 코드
<body>
<a href="#" onmouseover="on(this)" onmouseout="out(this)">
<img src="btn_ok.gif" alt="OK" /></a>
<a href="#" onmouseover="on(this)" onmouseout="out(this)">
<img src="btn_cancel.gif" alt="OK" /></a>
</body>다음 코드는 위에 보인 프로그램을 JavaScirpt를 사용하지 않고 CSS로만 작성한 것이다.
우수 사례CSS로만 구성한 경우
사례 코드
<head>
<style type="text/css" title="">
/*
Rollover, out
CSS에서 A 태그의 배경그림을 위치를 바꿔 롤오버 효과를 구현
*/
a.bg-button{display:block; width:60px; height:21px; text-align:center;
color:black; text-decoration:none; font-size:11px; font-family:arial;
line-height:22px; background:url("image_pack.gif"); float:left; margin-right:5px;}
a.bg-button:hover{background-position:0 21px;}
a.bg-button:active{background-position:0 42px;}
</style>
</head>
<body>
<h1>CSS만을 이용해서 Rollover, out, click 되었을 때를 표현</h1>
<a href="http://./ok.html" class="bg-button">OK</a>
<a href="http://./cancel.html" class="bg-button">Cancel</a>
</body>
