메뉴 건너뛰기

조회 수 3847 추천 수 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
번호 제목 날짜 조회 수
9 jquery function 생성 2016.09.11 3990
» jquery 이용한 이미지 변환 2016.09.11 3847
7 [jQuery Plugin] FCKeditor 2.6.5 사용법 2016.09.11 3901
6 jqGrid / custom pager / custom paging / 그리드 / 페이징 file 2016.09.08 5434
5 각종 다이어그램 플러그인 / 차트 / 관계 플러그인 2016.09.08 4611
4 벨리데이션 체크 / validator / 자동 입력 제한 2016.09.08 3717
3 강제 click 이벤트 발생 2016.09.08 3916
2 ajax 아작스 통신 2016.09.08 3904
1 jquery selector / jquery 선택자 / 자주 사용하는 jquery selector 선택자 / selecter 2016.09.08 4261
Board Pagination Prev 1 2 3 4 Next
/ 4

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved