<!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>
Table을 DIV로 표현하기 (예제)
