백그라운드 hover
본문
1-4번으로 나눠져있지만 백그라운드 이미지는 통으로 가득차게 나오게 하고싶구요.
1번에 마우스 오버시 1번에 지정해두었던 백그라운드 이미지가 나오고(1-4번영역 통이미지로)
2번에 마우스 오버시 2번에 지정해두었던 백그라운드 이미지가 나오고
3번에 마우스 오버시 3번, 4번에 마우스 오버시 4번 백그라운드이미지가 나오게 하고 싶어요.
이렇게 되면 section id에 지정된 백그라운드 이미지만 나오게 되는데..
어떤 걸 추가해야 아래 지정된 자바스크립트 소스가 적용이 될까요?
section class명을 변경되게끔 해줘야하는거같은데 어떻게 해야할지 모르겠습니다ㅠㅠㅠ
아래는 다른곳 찾아서 소스적용시켜본거에요ㅠㅠ
이렇게 전달드리면 확인이 어려우실까요?ㅠㅠ
필요하신 추가정보 있으심 말씀해주세요~
아무리봐도 답이 안나와서 요청드려요~
<div class="idx_row">
<section id="fg-container" class="fg-container-bg" style="background-image: url('07.png');">
<div class="main-top-hover pro01" id="project-01">
<div class="bg-overlay"></div>
<div class="main-content-body">
<h5 class="main-minititle">1</h5>
</div>
</div>
<div class="main-top-hover pro02" id="project-02">
<div class="bg-overlay"></div>
<div class="main-content-body">
<h5 class="main-minititle">2</h5>
</div>
</div>
<div class="main-top-hover pro03" id="project-03">
<div class="bg-overlay"></div>
<div class="main-content-body">
<h5 class="main-minititle">3</h5>
</div>
</div>
<div class="main-top-hover pro04" id="project-04">
<div class="bg-overlay"></div>
<div class="main-content-body">
<h5 class="main-minititle">4</h5>
</div>
</div>
</section>
</div>
<script type="text/javascript">
var 01Div = wrap.getElementsByClassName("pro01")[0];
var 02Div = wrap.getElementsByClassName("pro02")[0];
var 03Div = wrap.getElementsByClassName("pro03")[0];
var 04Div = wrap.getElementsByClassName("pro04")[0];
var bDiv = wrap.getElementsByClassName("fg-container-bg")[0];
01Div.onmouseover = function() {
bDiv.style.backgroundImage = "url('01.png')";
};
01Div.onmouseout = function() {
bDiv.style.backgroundImage = "url('01.png')";
};
02Div.onmouseover = function() {
bDiv.style.backgroundImage = "url('07.png')";
};
02Div.onmouseout = function() {
bDiv.style.backgroundImage = "url('07.png')";
};
03Div.onmouseover = function() {
bDiv.style.backgroundImage = "url('10.jpg')";
};
03Div.onmouseout = function() {
bDiv.style.backgroundImage = "url('10.jpg')";
};
04Div.onmouseover = function() {
bDiv.style.backgroundImage = "url('04.png')";
};
04Div.onmouseout = function() {
bDiv.style.backgroundImage = "url('04.png')";
};
</script>
답변 2
<table id=my style=table-layout:fixed;width:960px;height:540px;background-image:url(https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg) cellpadding=0 cellspacing=0>
<td id=my_1 style=text-align:center;font-size:30px;color:#ffffff>1</td>
<td id=my_2 style=text-align:center;font-size:30px;color:#ffffff>2</td>
<td id=my_3 style=text-align:center;font-size:30px;color:#ffffff>3</td>
<td id=my_4 style=text-align:center;font-size:30px;color:#ffffff>4</td>
</table>
<script>
image_1 = "https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg";
image_2 = "https://blog.kakaocdn.net/dn/cOuCrx/btrcONOGfL6/lnvgPYBKad0JunFVKIwEJK/img.jpg";
image_3 = "https://blog.kakaocdn.net/dn/dWo9XA/btrcMHvnOX6/ErTXdEKAlZ8N2MkFYkJg21/img.jpg";
image_4 = "https://blog.kakaocdn.net/dn/dBEz0N/btrcMHITtp6/GOZ46itTJACPcNa5tNRV51/img.jpg";
for(i = 1; i <= 4; i++) {
this["my_" + i].image = this["image_" + i];
this["my_" + i].onmouseover = function() {
my.style.backgroundImage = "url(" + this.image + ")";
}
}
</script>
오오오 적어주신걸로 응용해서 변경했더니 잘됩니다^^
감사합니다~
한참헤맸는데 시원하게 해결해주셨네요~
저는 레이아웃이 아니면 테이블로 코딩하는지라...
테이블에서 div 로 바꾸는 것은 금방일 것이니 그 부분은 좀 수고해 주십시오.
var 01Div;
숫자로 시작하는 변수는 javascript에서 쓰지 못할 겁니다.
var div01;
이런 식으로해 보세요.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#declarations
감사합니다~ 그런데 제가 너무 초보라 어떤걸 참고해야할지 모르겠어요^^;;위에분이 해주신거 제 소스에 대입해서 변경했더니 잘됩니다^^
