클릭하면 나타나는 이미지

클릭하면 나타나는 이미지

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 -->
저작자표시 비영리 변경금지

방명록 : 관리자 : 글쓰기
zzarungna's Blog is powered by daumkakao
Skin info material T Mark3 by 뭐하라
favicon
  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • Source (1572)
    • Programming (420)
      • 프로그래밍 (16)
      • HTML (22)
      • CSS (30)
      • XML (14)
      • Javascript (27)
      • Jquery (13)
      • Ajax (10)
      • ASP (12)
      • PHP (23)
      • Java (39)
      • JSP (8)
      • 안드로이드 (9)
      • C# (52)
      • Winform (32)
      • WPF (13)
      • ADO.NET (8)
      • ASP.NET(4.0) (24)
      • LINQ (2)
      • ORACLE (9)
      • MS - SQL (24)
      • SERVER (10)
      • Programming Exam (6)
      • MySQL (3)
      • EditPlus (6)
      • 재미삼아만든 프로그램 (3)
      • IT 용어 (5)
    • IT (447)
      • IT 정보 (412)
      • 유튜브 (35)
    • SmartPhone (300)
      • 아이폰 (75)
      • 안드로이드 (117)
      • 애플리케이션 (23)
      • 카카오톡 (40)
      • 스마트폰 정보 (23)
      • SNS (22)
    • GAME (97)
      • PC (52)
      • PS4 (38)
      • PS VITA (3)
      • 게임에 대한 생각 (4)
    • PlayStation (51)
      • PS4 (35)
      • PS5 (10)
      • PlayStation Network (6)
    • Window (61)
    • My Life (53)
    • Finance (50)
    • Single Media (32)
    • Comic Book (20)
    • Sports (12)
    • Music (12)
    • Excel (5)
    • DownLoad File (3)

티스토리툴바