이미지 닫기버튼 만들기
본문
이미지 gif인데
여기에 닫기버튼
javascript btn.close 같은거 써서 닫고 싶은데요.
최대한 간단하게
img src에 직접 할수가 있나요?
아니면 div로 감싸고해야하려나...
고수님들 도와주십쇼 ㅠㅠ
답변 3
<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>
감사합니다 선생님 내일 해보겠습니다!
이거 닫기가 되는데 img가 사라지고서 닫기는 남아있네요...ㄷㄷㄷ
닫는 대상이 무엇인가요
div or img 입니다
답변 감사드립니다.
닫기버튼을 만드려면 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";
});이렇게 하면 닫기 버튼을 클릭하면 이미지가 사라집니다.
답변을 작성하시기 전에 로그인 해주세요.
