상세 컨텐츠

본문 제목

javascript 탭 디자인 구현

프로그래밍/스크립트

by 라제폰 2009. 2. 6. 18:16

본문

//onmouseover="tableView(1,2,'http://image.cjmall.com/new2008/main/tab_event_movie_but0')"
function tableView(su,hapsu,img_name){//파라미터를 받음 (몇번째 테이블번호 ,클릭할 이미지 갯수)

 var img_o = new Array(); //원본 이미지에 관련된 배열을 생성한다.
 var img_c = new Array(); //변환 이미지에 관련된 배열을 생성한다.
 var img_su = hapsu; //클릭 이미지 갯수

 for (i=1;i<=img_su;i++){

  won_img=img_name //원본 이미지 파일이름 번호 제외
  change_img=img_name //바뀔 이미지 파일이름 번호 제외 번호 증가 1,2,3 ~ n으로

  img_o[i] = new Image();  //생성된 배열각각의 방을 객체로 선언한다.
  img_o[i].src = won_img+i+"_n.gif";   //생성한 방에 원본 이미지 이름을 저장한다.
  img_c[i] = new Image();  //생성된 배열각각의 방을 객체로 선언한다.
  img_c[i].src = change_img+i+"_y.gif";   //생성한 방에 변환 이미지 배열저장
 }

 for (k=1;k<=img_su;k++){
  img_name="img"
  document.all(img_name+k).src = img_o[k].src;
  if (k==su){
   document.all(img_name+k).src = img_c[k].src;
  }
 }

 for (i=1;i<=img_su;i++){
  document.all("tableShow"+i).style.display = "NONE";
  if (i==su){
   document.all("tableShow"+i).style.display = "BLOCK";
  }
 }

}


관련글 더보기