메뉴 건너뛰기

조회 수 7491 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
<style>
*{
padding:0;
margin:0;
background:url(foo) fixed; 
}
img{
border:0;
-ms-interpolation-mode: bicubic;
}
.big_img{
width:420px;
height:420px;
}
div{
width:420px;
height:420px;
}
.small_img{
width:80px;
height:80px;
}
html { _overflow: hidden;  } 
:root html { overflow: hidden; } 
body { _overflow: hidden; height: 100%; width: 100%; } 
:root body { overflow: hidden; } 
#contents { width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; position:relative; z-index:1; /* padding-bottom: 40px; */} 
#bottombar { position:fixed; _position:absolute;  bottom:0; width: 900px; z-index: 199;} 
</style>
<? include "../Anyjquery/jquery_inc.php"; ?>

<script>
$(function(){
/*
$(".big_img").mouseover(function(){
$(".big_img").attr("src","/images/1.jpg");
$(".big_img").attr("alt","큰이미지");
});
*/
$(".small_img").click(function(){
//$(".big_img").fadeOut(1500);
$(".big_img").hide().attr("src",$(this).attr("src"));
$(".big_img").fadeIn(500);
});
/*
$(".small_img").mouseout(function(){
$(".big_img").attr("src","/images/1.jpg");
});
*/
$('#hide_button').toggle(function() {
$('div').slideUp('100');
$(this).attr("value","보이기");
},
function(){
$('div').slideDown('100');
$(this).attr("value","숨기기");
});
});
</script>
 </HEAD>

 <BODY>
<div>
<a id="big_img" href="../images/1.jpg" title="한글 테스트">
<img src="../images/1.jpg" class="big_img">
</a>
</div>
<br>

<img src="../images/1.jpg" class="small_img">
<img src="../images/2.jpg" class="small_img">
<img src="../images/3.jpg" class="small_img">
<img src="../images/4.jpg" class="small_img">
<img src="../images/5.jpg" class="small_img">

<br>
<input type="button" value="숨기기" id="hide_button">
 </BODY>
</HTML>

List of Articles
번호 제목 날짜 조회 수
179 jquery selector / jquery 선택자 / 자주 사용하는 jquery selector 선택자 / selecter 2016.09.09 8230
178 ajax 아작스 통신 2016.09.09 8106
177 강제 click 이벤트 발생 2016.09.09 7793
176 벨리데이션 체크 / validator / 자동 입력 제한 2016.09.09 7208
175 각종 다이어그램 플러그인 / 차트 / 관계 플러그인 2016.09.09 9560
174 jqGrid / custom pager / custom paging / 그리드 / 페이징 file 2016.09.09 12615
173 [jQuery Plugin] FCKeditor 2.6.5 사용법 2016.09.11 7236
» jquery 이용한 이미지 변환 2016.09.11 7491
171 jquery function 생성 2016.09.11 7017
170 [jQuery] 이용 아이디 중복체크 실시간 2016.09.11 8965
169 jQuery Quick API file 2016.09.13 7018
168 이미지 클릭시 확대하기 file 2016.09.21 12731
167 Get방식 파라미터 전송 & 탭 메뉴 선택 2016.09.21 8636
166 간단한 세로 메뉴 file 2016.09.21 8757
165 Input TYPE=“File” 을 히든으로 하고 외부 버튼을 눌러서 파일을 선택 2016.09.21 6857
164 document.getElementById() 처럼 DOM 객체 얻기 2016.09.21 6875
163 select box 값 변경, 목록 변경 2016.09.21 9193
162 슬라이드 쇼 file 2016.09.21 6667
161 jQuery Cookie 2016.09.21 6916
160 체크박스 또는 라디오 버튼의 체크여부 변경하기 2016.09.21 6714
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved