Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 JavaScript 제작기법 > JavaScript 애플리케이션 콘텐츠 구현 예 >
Javascript 대체 기법
(1) JavaScript를 사용한 경우 아래 예제는 초점이 주어진 버튼의 색깔을 class값('OK' 버튼)과 style('Cancel' 버튼)을 이용하여 변경하는 예이다.
마우스 롤오버(mouse rollover)를 함에 따라 ‘OK’ 버튼과 ‘Cancel' 버튼이 노란색으로 변화하는 것을 알 수 있다.
[그림] ‘OK’버튼에 마우스 롤오버를 하기 전(좌)과 후(우)
위의 예제를 JavaScript로 작성한 예제는 다음 프로그램과 같다.
<head>
<link type="text/css" href="reset.css" rel="stylesheet"/>
<style type="text/css" title="">
a {float:left;}
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("ok_bg.gif"); float: left;}
</style>
</head>
<script type="text/javascript">
<!--
var bindChangeClassName=function(){
var selected_class_name="hover";
var as=document.getElementsByTagName("a");
for(var i=0; i<as.length; i++){
var a = as[i];
if (a.className == "class"){
a.onmouseover=a.onfocus=function(event){
this.className += " " + selected_class_name;}
a.onmouseout = a.onblur = function(event){
this.className = this.className
.replace(selected_class_name, "");}
}} }
var bindChangeStyle=function(){
var as=document.getElementsByTagName("a");
for (var i=0; i<as.length; i++){
var a = as[i];
if (a.className == "style") {
a.onmouseover=a.onfocus=function(event){
this.style.borderColor="red";
this.style.backgroundColor="yellow";}
a.onmouseout=a.onblur=function(event){
this.style.borderColor="#00cc00";
this.style.backgroundColor="white";}
}} }
window.onload = function(){
bindChangeClassName();
bindChangeStyle(); }
//-->
</script>
<body>
<a href="#this" onmouseover="on_1(this)" onmouseout="out_1(this)">
<img src="btn_ok.gif" alt="OK" /></a>
<a href="#this" 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)