사이드 배너 축소/닫기 방법 질문드립니다.
본문
안녕하세요.
웹 페이지 내 플로팅 배너 삽입 후 추가 기능 입히는 과정에서 막혀 도움을 구하고자 합니다.
(아임웹 웹 빌더를 사용하고 있습니다)
현재 아래 그림과 같은 플로팅 배너 제작 후 배너 따라다니기, 바로가기 버튼 작동까지는 구현해냈습니다.
(민트색 네모 이미지 위, 바로가기 버튼과 X 버튼이 얹어진 형태입니다.)
추가로 X 버튼 클릭시 플로팅 배너 전체가 사라지거나, 플로팅 배너 전체가 A 라는 이미지로 변하도록 구현하고 싶습니다.
사용한 코드는 다음과 같습니다.
<!-- 플로팅 배너 CSS -->
<style>
/* PC 배너1 스타일 */
.floBanPc1 {
position: fixed;
top: 741px; /* 윗쪽 끝에서부터의 거리 */
right: -314px;
z-index: 99;
}
.floBanPc2 {
position: fixed;
top: 855px; /* 윗쪽 끝에서부터의 거리 */
right: 50px;
z-index: 99;
}
.floBanPc3 {
position: fixed;
top: 770px; /* 윗쪽 끝에서부터의 거리 */
right: 57px;
z-index: 99;
}
</style>
<!-- 플로팅 배너 HTML -->
<!-- 배너배경 -->
<div class="floBanPc1 hidden-md hidden-sm hidden-xs">
<img src="배너 이미지"> </div>
<!-- 바로가기버튼 -->
<div class="floBanPc2 hidden-md hidden-sm hidden-xs">
<a href="바로가기 버튼 클릭 시 랜딩 사이트">
<img src="바로가기 버튼">
</a>
</div>
<!-- X 버튼 -->
<div class="floBanPc3 hidden-md hidden-sm hidden-xs">
<img src="X 버튼">
</div>
div id 로 묶는 방법으로 시도해봤으나 실패하였습니다. 이런 경우 어떻게 접근해야할까요?
답변 1
div id 로 묶기는 가능합니다.
floBanPc1 감사신곳 안에다가
아래것들을 넣으시고
position는 absolute;로 하시고 top하고 left right의 위치를 floBanPc안에서 다시 잡으시면 한 아이디로 묶으실 수 있습니다.
X버튼을 눌렀때 사라지거나 바꾸게 하는 방법은 자바스크립트(제이쿼리) 를 이용하셔야 합니다.
기본 html css로는
* 마우스를 올리고 있는 동안 : hover
* 마우스를 클릭하고 있는 동안 : active
* 마우스를 한번 클릭 한 이후 : visited
이것을 이용 할 수는 있지만
자바스크립트(제이쿼리)로 처리하시는것을 추천드립니다.
답변을 작성하시기 전에 로그인 해주세요.