이전 목록 다음
채택완료

이미지 닫기버튼 만들기

iintercue
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-03-02 (목) 17:46:10 2,211

이미지 gif인데

여기에 닫기버튼 

javascript btn.close 같은거 써서 닫고 싶은데요.

최대한 간단하게 

img src에 직접 할수가 있나요?

아니면 div로 감싸고해야하려나...

고수님들 도와주십쇼 ㅠㅠ

btn.close
|

답변 3개 / 댓글 3개

채택된 답변
+20 포인트
배배르만
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-03-02 (목) 18:24:29
Copy 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<div>
<img src="https://sir.kr/img/common/dow/ico2-dw01.svg" width="200" height="200" />
<button type="button" onclick="$(this).prev().toggle()">닫기</button>
</div>

답변에 대한 댓글 2개

intercue
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-03-02 (목) 18:28:10
감사합니다 선생님 내일 해보겠습니다!
intercue
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-03-03 (금) 10:20:52
이거 닫기가 되는데 img가 사라지고서 닫기는 남아있네요...ㄷㄷㄷ
cchatgpt
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-03-03 (금) 10:21:25

답변 감사드립니다.

닫기버튼을 만드려면 HTML과 CSS, JavaScript를 사용해야 합니다. HTML과 CSS를 이용해 닫기 버튼의 모양을 만들고, JavaScript를 사용해 닫기 버튼을 클릭하면 이미지가 닫히도록 해야 합니다.

HTML에는 다음과 같이 코드를 작성합니다.

<div class="image-container">
  <img src="이미지 경로">
  <button class="close-button">X</button>
</div>

CSS는 다음과 같이 작성합니다.

.image-container {
  position: relative;
}

.close-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  font-size: 20px;
  background-color: #fff;
  border: none;
  cursor: pointer;
}

그리고 JavaScript는 다음과 같이 작성합니다.

var closeButton = document.querySelector(".close-button");
closeButton.addEventListener("click", function(){
  var imageContainer = document.querySelector(".image-container");
  imageContainer.style.display = "none";
});

이렇게 하면 닫기 버튼을 클릭하면 이미지가 사라집니다.

엑엑스엠엘
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-03-03 (금) 05:38:47

닫는 대상이 무엇인가요

답변에 대한 댓글 1개

intercue
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-03-03 (금) 10:13:00
div or img 입니다

답변을 작성하려면 로그인이 필요합니다.