<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("img").one("click",function(){
$("span").html("<img src=\"" + $(this).attr("src") + "\">");
});
$("input:eq(0)").click(function(){
$("img").one("click",function(){
$("span").html("<img src=\"" + $(this).attr("src") + "\">");
});
});
$("input:eq(1)").click(function(){
$("input:eq(0)").unbind("click");
});
$("input:eq(2)").click(function(){
$("input:eq(0)").click(function(){
$("img").one("click",function(){
$("span").html("<img src=\"" + $(this).attr("src") + "\">");
});
});
});
});
</script>
<style>
img{
cursor:pointer;
}
span{
position:fixed;
top:20px;
right:20px;
background-color:#CCCCCC;
width:200px;
height:200px;
line-height:200px;
text-align:center;
padding:10px;
}
</style>
</head>
<body>
<input type="button" value="もう一度oneする">
<input type="button" value="もう一度oneを無効にする">
<input type="button" value="もう一度one無効の取消">
</p>
<img src="img/image1.png">
<img src="img/image2.png">
<img src="img/image3.png">
<img src="img/image4.png">
<img src="img/image5.png">
<span>
選択
</span>
</body>
</html>