태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

이미지 클릭시 div 숨김 보임 스크립트

14년 전

홈페이지상 자주하는 질문 형식의 제목과 내용을 같이 보여줄때..

제목클릭시 내용을 보여주고 다른 제목 클릭시 기존에 열려있던 내용을 닫고 새로운 내용을

보여주기 위한 스크립트입니다. 부가적으로 클릭이미지도 변경가능합니다.

사용법=============================================================

변하게 할 이미지에  id="layer_on_off_img1" 값을준다 ex) <img src="url" id="layer_on_off_img1">

보여주고 감출 내용 table 에  id="layer_on_off_div1" 값을 준다  ex) <table id="layer_on_off_div1">

실행 조건을 걸어준다 layer_on_off(2,8,'image/detail_btn.jpg','image/close_btn.jpg');

여기서 숫자 8 은 총레이어 개수를 뜻합니다.
ex) <img src="url" id="layer_on_off_img1" onClick="layer_on_off(1,8,'image/detail_btn.jpg','image/close_btn.jpg');">

사용법======================================================================
<script>
/* 네임뒤숫자값(클릭되는숫자), 총레이어수, 체인지될버튼이미지, 기본버튼이미지*/

function layer_on_off(id,cnt,change_src,defualt_src){

var click_div_temp = "layer_on_off_div" + id; /* 현재 클릭한 div 온아웃 될 네임 과 id 조합 */
var click_img_temp = "layer_on_off_img" + id; /* 현재 클릭한 img 체인지 될 네임 과 id 조합 */

if(document.getElementById(click_div_temp).style.display == "none"){ /* 열려있는 페이지를 클릭시 닫기위해 */

  for(var i = 1; i <= cnt; i++){ /* cnt 총레이어수 많큼 루프 */

   var div_temp = "layer_on_off_div" + i; /* div 온아웃 될 네임 과 id 조합 */
   var img_temp = "layer_on_off_img" + i; /* img 체인지 될 네임 과 id 조합 */

   if(i != id){ /* 선택되지 않은 것들의 페이지를 닫기위해 선언 */
    document.getElementById(div_temp).style.display = "none"; /* div를 감춘다 */
    document.getElementById(img_temp).src = change_src; /* 이미지를 바꾼다 */
   }else{
    document.getElementById(div_temp).style.display = "";
    document.getElementById(img_temp).src = defualt_src;
   }

  }
}else{
  document.getElementById(click_div_temp).style.display = "none";
  document.getElementById(click_img_temp).src = change_src;
}
}
</script>

추천 목록

번호	제목
995	셀렉트 박스 선택시 자바스크립트 이용하여 사이트 이동하기 또는 팝업으로뛰우기
994	페이지 오픈시 특정 인풋 박스에 커서 이동하게 하기
993	유동적인 레이어 css와 script로 고정 위치 시키기
992	특정영역 내용 복사하기(클립보드) 익스 전용
	이미지 클릭시 div 숨김 보임 스크립트
990	라디오 버튼 클릭시 div 숨김 보임 스크립트
989	이미지 엑박시 대체 이미지 적용하기
988	마우스 오버 아웃 해당 이미지 바꾸기 스크립트
987	파일업로드(찾아보기버튼)를 이미지로 변경 하기
986	input 텍스트박스 자동완성글 사용 못하게 하기
985	자바스크립트 쓰지 않고 퀵메뉴 사용하기
984	즐겨찾기 스크립트 (파이어 폭스 , 익스 플러로, 오페라 작동)
983	인풋박스 background 이미지 넣기
982	프레임셋 사용 새로고침 방지
981	자바스크립트를 이용한 프레임셋 사용 새로고침 방지
980	변수 문자열 입력하기
979	리눅스 현재 접속중인 ftp 목록 보기 명령어
978	리눅스 파일찾기 find 명령
977	리눅스서버 원격 접속하기
976	리눅스 서버 도메인 기본 포트 목록
975	윈도우 서버 도메인 컨트롤러 기본 포트 목록
974	윈도우서버 원격 접속 방법
973	자주쓰는 리눅스 서버 명령어
972	iframe 자동 사이즈
971	iframe의 높이를 내용에 맞게 자동으로 맞춰주는 함수
970	마우스 오버를 하면 올라오는 레이어창입니다.
969	PHP 기초 다지기 - HTML폼과 변수
968	PHP 기초 다지기 - 데이터의 집합 : 배열
967	PHP 기초 다지기 - 스칼라 변수와 데이터
966	PHP 기초 다지기 - 제어문