반응형
클릭하면 나타나는 이미지
html, CSS, jQuery, Javascript를 이용해 웹페이지에서 특정 영역을 누르면 이미지가 나타나고 해당 이미지를 누르면 이미지가 사라지는 소스를 간단히 작성해 보았습니다.
동그란 영역을 누르면 이미지가 나타납니다. 그리고 나타난 이미지를 다시 누르면 해당 이미지가 사라집니다.
직접 사이트 링크를 걸어 놓았으니 테스트 해보실 분들은 링크에서 확인 하시면 됩니다. - http://enjoyrank.com/blog/jjangku.html
소스는 아래 걸로 가져다 쓰시면 됩니다. 이미지와 jQuery 모두 웹에 있는 것을 가져와 사용한 것이기에 소스 그대로 가져와 사용 하시면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>클릭시 이미지 띄우기</title>
<style>
#circle{
width: 150px;
height: 150px;
background-color: #e12b02;
cursor: grab;
border-radius: 400px;
}
#popup{
display: none;
position: absolute;
left: 10px;
top: 34px;
}
#text{
padding-top: 62px;
text-align: center;
color: aliceblue;
}
#jjangku{
cursor: no-drop;
}
</style>
</head>
<body>
<div id="circle" onclick="show()">
<p id="text">Click Me!!</p>
</div>
<div id="popup">
<img id="jjangku" alt="이미지를 누르면 없어져요." src="https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png" onclick="imgx()">
</div>
</body>
</html>
<!-- javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function show(){
$("#popup").show();
}
function imgx(){
$("#popup").hide();
}
</script>
<!-- javascript -->반응형
