웹접근성에 충실한 팝업존

개인적인 프로그램/웹표준,웹접근성,CSS 2011. 10. 26. 13:37

이미지등의 컨텐츠는 파주시껄 가져다 썻으므로 좀 민감..

이 팝업존은 웹접근성을 고려해서 만들었고

ie 6, 파폭, 오페라 ,사파리에서 작동유무를 확인했고

스타일과 자바스크립트의 사용유무에 따른 접근성 확보는 파폭에서 확인하였다..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  #popup_zone{
   width:200px;
   background:red;
   position:relative;
  }

  #popup_zone ol li{
   float:left;
   display:inline;
  }
  /* 공통 팝업 스타일 */
  .sub_popup_zone{
   display:none;
   top: 20px;
   left:10px;
   position:absolute;
  }

  .sub_popup_zone_no_script{

  }

  #popup_zone_script{
   display:none;
  }
  #popup_zone_no_script{
   width:200px;
   height:125px;
   overflow:auto;
   top:20px;
   left:10px;
   position:absolute;
  }
</style>

  /***************************************************************
  * 팝업존 class
  * popup_id(팝업이미지)의 id는 뒤에 숫자가 붙되 1부터 증가하여야한다.
  *   예 : popup_id가 popup_zone 일 경우 팝업이미지의
  *   id는 popup_zone1, popup_zone2, popup_zone3
  *
  * popup_id는 반드시 정의해야한다.
  * sub_popup_id(서브팝업영역)의 id는 뒤에 숫자가 붙되 1부터 증가하여야한다.
  * 예 : sub_popup_id가 sub_popup_zone 일 경우 서브팝업영역의
  * id는 sub_popup_zone1, sub_popup_zone2, sub_popup_zone3
  *
  * sub_popup_id는 반드시 정의해야한다.
  *   name는 popup_zone class의 변수명을 넣는다.
  * 예: var popup_1 = new popup_zone(); popup_1.name="popup_1";
  ***************************************************************/
  var popup_zone = function(){
   // 상태값 0은 정지 1은 동작
   this.status = 1;
   // 팝업의 총 갯수
   this.total = 0;
   // 딜레이타임
   this.delay = 5000;
   // 선택된 팝업
   this.select = 0;
   // 팝업이미지의 아이디
   this.popup_id = "";
   // 서브팝업영역의 아이디
   this.sub_popup_id = "";
   // 변수명을 넣어준다.
   this.name = "";
  }

  /***************************************************************
  * 팝업존의 이미지와 레이어를 변경
  *   이벤트 대상 : 팝업이미지.src 와 서브팝업영역.style.display
  *   순번 target_num을 제외한 이미지를 off이미지로 변경시키고
  * 순번 target_num을 제외한 레이어를 display:none 로 변경시킨다.
  ***************************************************************/
  popup_zone.prototype.change = function (target_num){
   var target_div="";
   var target_img="";
   var re;
   for(var i=1; i<=this.total ; i++ )
   {
    target_div = this.sub_popup_id+i;
    getObject(target_div).style.display= "none";
    target_img = this.popup_id+i;
    target_img_name = getObject(target_img).src;
    if( target_img_name.indexOf("on.") > -1 ) {
     re = /on\./g;
     getObject(target_img).src = target_img_name.replace(re,"off.");
    }
   }
   target_div = this.sub_popup_id+target_num;
   getObject(target_div).style.display= "block";

   target_img = this.popup_id+target_num;
   target_img_name = getObject(target_img).src;
   if( target_img_name.indexOf("off.") > -1 ) {
    re = /off\./g;
    getObject(target_img).src = target_img_name.replace(re,"on.");
   }
   this.select = target_num;
  }

  /***************************************************************
  * 팝업존의 이미지를 시간에 따라 변경시킨다.
  *   delay가 0보다 크지 않으면 status와 상관없이 정지한다.
  *   status가 1이면 delay에 설정된 시간(Milliseconds)에 따라 팝업이 변화한다.
  * status가 0이면 팝업이 변화하지 않는다.
  ***************************************************************/
  popup_zone.prototype.roll = function(){
   if(this.delay > 0){
    if(this.status == 1){
     if(this.select == this.total){
      this.select = 1;
     }else{
      this.select = parseInt(this.select) + 1;
     }
     this.change(this.select);
    }
    setTimeout(this.name+".roll();",this.delay)
   }
  }

  /***************************************************************
  * 팝업존을 스타트시킨다.
  *   이 메쏘드의 호출은 반드시 팝업존 다음에 선언되어야한다.

  ***************************************************************/
  popup_zone.prototype.start = function(){
   getObject("popup_zone_script").style.display= "block";
   this.roll();
  }

  /***************************************************************
  *   사용예시
  *   필수항목(popup_id,sub_popup_id,name)은 반드시 선언되어야한다.
  * var popup_1 = new popup_zone();
  * popup_1.total = 5;
  * popup_1.popup_id = "popup_zone";
  * popup_1.sub_popup_id = "sub_popup_zone";
  * popup_1.name = "popup_1";
  * popup_1.delay = 1000;
  * paid.UserEvent.addListener(window, "load", popup_1.start(), false);
  *
  *   paid.UserEvent.addListener(window, "load", popup_1.start(), false);
  * 의 경우 팝업존의 엘리먼트 전에 선언되면 개체를 찾지 못하기 때문에 에러가 난다.
  ***************************************************************/

//-->
</script>

</head>

<body>

<div id="popup_zone">
<script type="text/javascript">

</script>
<noscript>
  <ol>
   <li>
    <a href="#sub_popup_zone_no_script1" >
     <img border="0" alt="1번 팝업존" src="http://www.paju.go.kr/open_content/img/main/popup_num_01_off.gif"/>
    </a>

   </li>
   <li>
    <a href="#sub_popup_zone_no_script2">
     <img border="0" alt="2번 팝업존" src="http://www.paju.go.kr/open_content/img/main/popup_num_02_off.gif"/>
    </a>

   </li>
   <li>
    <a href="#sub_popup_zone_no_script3">
     <img border="0" alt="3번 팝업존" src="http://www.paju.go.kr/open_content/img/main/popup_num_03_off.gif"/>
    </a>

   </li>
   <li>
    <a href="#sub_popup_zone_no_script4">
     <img border="0" alt="4번 팝업존" src="http://www.paju.go.kr/open_content/img/main/popup_num_04_off.gif"/>
    </a>

   </li>
   <li>
    <a href="#sub_popup_zone_no_script5">
     <img border="0" alt="5번 팝업존" src="http://www.paju.go.kr/open_content/img/main/popup_num_05_off.gif"/>
    </a>

   </li>
  </ol>
  <div id="popup_zone_no_script" >
      <div id ="sub_popup_zone_no_script1" class="sub_popup_zone_no_script">
     <a href="http://www.paju.go.kr/open_content/organization/news/event_infor/board.tdf?a=user.board.BoardApp&board_id=BD_WWW_03_04_06_1&c=2002&seq=298&npp=10&cp=1"                                                 onmouseover="popup_1.status=0;" onfocus="this.onmouseover();" onmouseout="popup_1.status=1;" onblur= "this.onmouseout();"><img src="http://www.paju.go.kr/open_content/upload/allim/20080421091036254697_1.gif" alt="사운드오브뮤직" border="0" width="177" height="125" /></a>
    </div>
    <div id ="sub_popup_zone_no_script2" class="sub_popup_zone_no_script">
     <a href="http://www.paju.go.kr/open_content/organization/news/inner_issue_new/board.tdf?a=user.board.BoardApp&board_id=DB_WWW_03_04_01_1&c=2002&seq=3350&npp=10&cp=1"                                                 onmouseover="popup_1.status=0;" onfocus="this.onmouseover();" onmouseout="popup_1.status=1;" onblur= "this.onmouseout();"><img src="http://www.paju.go.kr/open_content/upload/allim/20080418093053380291_1.gif" alt="개별공시지가열람" border="0" width="177" height="125" /></a>
    </div>
    <div id ="sub_popup_zone_no_script3" class="sub_popup_zone_no_script">
     <a href="http://branch.paju.go.kr/open_content/B000001290/B000001290_12/B000001290_02/branch/board.tdf?a=user.board.BoardApp&c=2002&board_id=BD_WWW_03_04_01&seq=4415&search_cons_without_keyword=ocode&issearch=true&ocode=000003099" target="_blank"
     onmouseover="popup_1.status=0;" onfocus="this.onmouseover();" onmouseout="popup_1.status=1;" onblur= "this.onmouseout();"><img src="http://www.paju.go.kr/open_content/upload/allim/20080418093516240293_1.gif" alt="풍수해보험전국확대실시" border="0" width="177" height="125" /></a>
    </div>
    <div id ="sub_popup_zone_no_script4" class="sub_popup_zone_no_script">
     <a href="http://www.paju.go.kr/open_content/organization/news/law_making_new/board.tdf?a=user.board.BoardApp&board_id=BD_WWW_03_04_03&c=2002&seq=4657&npp=10&cp=2&pg=1"                                                 onmouseover="popup_1.status=0;" onfocus="this.onmouseover();" onmouseout="popup_1.status=1;" onblur= "this.onmouseout();"><img src="http://www.paju.go.kr/open_content/upload/allim/20080418093558287294_1.gif" alt="계량기정기검사" border="0" width="177" height="125" /></a>
    </div>
    <div id ="sub_popup_zone_no_script5" class="sub_popup_zone_no_script">
     <a href="http://www.paju.go.kr/open_content/organization/news/inner_issue_new/board.tdf?a=user.board.BoardApp&board_id=DB_WWW_03_04_01_1&c=2002&seq=3344&npp=10&cp=1"                                                 onmouseover="popup_1.status=0;" onfocus="this.onmouseover();" onmouseout="popup_1.status=1;" onblur= "this.onmouseout();"><img src="http://www.paju.go.kr/open_content/upload/allim/20080415175901734184_1.gif" alt="메일서비스 휴면계정 일제 정비" border="0" width="177" height="125" /></a>
    </div>
  </div>
</noscript>
</div>

</body>

</html>

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

ie flicker 버그와 관련된 글 (0)	2011.10.26
디자인을 위한 빈태그.. (0)	2011.10.26
포커스가 있을때만 나오게 하는 css (0)	2011.10.26
longdesc 대신 alt와 title를 쓰자.. (0)	2011.10.26
Browser sniffing (브라우저의 버전과 제품 벤더를 알아보자) (0)	2011.10.26