Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 JavaScript 제작기법 > JavaScript 애플리케이션 콘텐츠 구현 예 >
Javascript 대체 기법
(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>
<body>
<a href="#this" onmouseover="on(this)" onmouseout="out(this)">
<img src="btn_ok.gif" alt="OK" /></a>
<a href="#this" onmouseover="on(this)" onmouseout="out(this)">
<img src="btn_cancel.gif" alt="OK" /></a>
</body>
다음 코드는 위에 보인 프로그램을 JavaScirpt를 사용하지 않고 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>
(2) CSS로만 구성한 경우 다음 코드는 JavaScript를 사용한 경우를 CSS로 구현한 것이다. 버튼의 기능이 동일하게 동작하는 것을 볼 수 있다.
<link type="text/css" href="reset.css" rel="stylesheet"/>
<style type="text/css" title="">
/* 배경 색을 바꿔서 롤오버 효과 구현 */
a.ss-button{display:block; width:60px; height:21px; text-align:center;
color:black; text-decoration:none; font-size:11px; font-family:arial;
line-height:22px; border:1px solid #00CC00; float:left;}
a.ss-button:hover{border-color:red; background-color:yellow;}
a.ss-button:active{border-color:red; background-color:orange;}
/* position */
.position {clear: both;}
.position ul{margin: 0; padding: 0;}
.position li{float:left; margin:0; padding:0; list-style:none;}
.position .menu a{display: block; height: 21px; width: 100px;
text-align:center; color:black; text-decoration:none; font-size:11px;
font-family:arial; line-height:22px; background-color:yellow;
border:1px solid blue;}
.position .menu a:hover{border-color: red; background-color: yellow; }
.position .menu a:active{border-color: red; background-color: orange; }
.position .menu .sub{position: absolute; display: none;}
.position .menu .sub a{background-color: #CCFFFF;}
</style>
</head>
<body>
<div class="section">
<div class="section">
<dl><dd>
<a href="#this" class="ss-button">OK</a><a href="#this" class="ss-button">Cancel</a>
</dd></dl>
</div>
</div>
</body>
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)
팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)