버튼 클릭 시 배너 작아지게 만드는 방법이 궁금합니다.
본문
안녕하세요, 사이트 만드는 와중에 배너 부분에서 막혀 자문을 구하고자 질문드립니다.
현재 아임웹 이라는 웹페이지 구축 사이트를 활용하고 있으며, 페이지 우측 하단에 아래 예시와 같은 플로팅 배너까지 완성을 했습니다.
<div class="floBanPc1 hidden-md hidden-sm hidden-xs"> <img src="배너 이미지"> </a> </div> <div class="floBanPc2 hidden-md hidden-sm hidden-xs"> <img src="X 버튼 이미지"> </a> </div>
여기에서 저 X 버튼을 누르면 플로팅 배너가 작은 이미지로 변하도록 만들고 싶은데 어떻게 접근을 해야할까요?
답변 1
<div><img id=myImg src="배너 이미지"></div>
<div><img id=btnImg src="X 버튼 이미지"></div>
<script>
btnImg.onclick = function() {
myImg.style.width = "100px" // height 는 자동으로 줄어듬
}
</script>
또는
<div><img id=myImg src="배너 이미지"></div>
<div><img id=btnImg src="X 버튼 이미지"></div>
<script>
btnImg.onclick = function() {
myImg.src = "다른이미지주소";
}
</script>
또는
<div id=myDiv><img src="배너 이미지"></div>
<div><img id=btnImg src="X 버튼 이미지"></div>
<script>
btnImg.onclick = function() {
myDiv.innerHTML = "<img src='다른이미지주소'>";
}
</script>
답변을 작성하시기 전에 로그인 해주세요.