jquery 이용한 이미지 변환

by 조쉬 posted Sep 11, 2016
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄
<!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>