<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
$("div").click(function(){
$("span:last-child",this).css("display","block");
});
$("span").click(function(){
$(this).css("display","none");
//親要素もクリックされるのを防ぐ
return false;
});
//下の記述でも可
/*
$("span").live("click",function(){
$(this).css("display","none");
});
*/
});
</script>
<style>
div{
cursor:pointer;
position:relative;
margin:50px;
}
span{
cursor:pointer;
display:none;
width:50px;
height:50px;
overflow:hidden;
position:absolute;
top:-25px;
left:-25px;
}
img{
margin-left:-75px;
margin-top:-75px;
}
</style>
</head>
<body>
<div>
div要素 div要素 div要素 div要素 div要素 <br>
div要素 div要素 div要素 div要素 div要素 <br>
div要素 div要素 div要素 div要素 div要素 <br>
div要素 div要素 div要素 div要素 div要素 <br>
div要素 div要素 div要素 div要素 div要素
<span><img src="img/image1.png"></span>
</div>
<div>
div要素 div要素 div要素 div要素 div要素 <br>
div要素 div要素 div要素 div要素 div要素 <br>
div要素 div要素 div要素 div要素 div要素 <br>
div要素 div要素 div要素 div要素 div要素 <br>
div要素 div要素 div要素 div要素 div要素
<span><img src="img/image2.png"></span>
</div>
<div>
div要素 div要素 div要素 div要素 div要素 <br>
div要素 div要素 div要素 div要素 div要素 <br>
div要素 div要素 div要素 div要素 div要素 <br>
div要素 div要素 div要素 div要素 div要素 <br>
div要素 div要素 div要素 div要素 div要素
<span><img src="img/image3.png"></span>
</div>
</body>
</html>