2014-01-17 2 views
0

요소 위로 마우스를 가져갈 때마다 내 PAGE 배경을 변경하려고했습니다. 현재 웹 서버에 다른 이미지를 업로드했습니다. div 위로 마우스를 가져 가면 페이지 배경을 이미지 중 하나에서 다른 이미지로 변경하고 싶습니다. 이 일을 어떻게 하죠? 나는이 작업을 수행 할 수있는 새로운 방법이 요소를 가리키면 PAGE 배경 (요소 BG가 아님)을 변경하십시오.

을 :) 배울 수 있도록 자바 스크립트, JQuery와, 또는 CSS의 경우는 문제가되지 않습니다, 더 답변을 잘 내 CSS :

body{ 
background: url(../html/dest/back2.png); 
height: 100% ; 
background-attachment: fixed; 
} 

내가 업로드 한 새 이미지 back2a.png. 사용자가 요소 위에 마우스를 올리면 이전 이미지 (back2.png) 대신이 이미지를로드하고 싶습니다. (모든 요소) 참고 : 새 이미지에 고정 된 배경 첨부를 유지하고 싶습니다. 새 이미지는 단순히 포토샵에서 수행 된 색조/채도의 변화이며, 같은 크기와 모든 것이 과감한 것은 아닙니다.

다음은이 작업을 수행하려고하는 페이지입니다. http://hourtimeagent.com/html/c++.php 답변에 감사드립니다! 고맙습니다!

답변

2

jQuery를 :

$("div").hover(function() { 
    $("body").css("background", "url(../html/dest/back2a.png)"); 
}); 

당신이 다시 변경 이후에 당신이 JQuery와 .blur 방법을 사용할 수 원하는 경우 : 당신이 원하는

$("div").blur(function() { 
    $("body").css("background", "url(../html/dest/back2.png)"); 
}); 

DIV 선택은 아무것도 변경 될 수 있습니다 유혹에.

$("div#hover").hover(function() { 
    $("body").css("background", "url(../html/dest/back2a.png)"); 
}); 

또는 호버의 클래스 : 당신이 가져가의 ID로 사업부가있는 경우 예를 들어, 같은 것을 사용

사용

$("div.hover").hover(function() { 
    $("body").css("background", "url(../html/dest/back2a.png)"); 
}); 

자바 스크립트를 바로 자바 스크립트 당신 ' 배경을 변경하려는 페이지의 요소에 이벤트를 추가해야합니다. 그것은 당신을 위해 그것을처럼 내가 jQuery를 함께 다루고 싶어요,하지만 당신은 사업부에 바로 자바 스크립트를 사용하는 것을 선호하려는 경우 당신은 추가 것 :

<div onhover="myFunc();"></div> 

를 그리고 자바 스크립트는 다음과 같습니다

<script type="text/javascript> 
function myFunc() { 
    document.body.style.background = "url(../html/dest/back2a.png)"; 
</script> 

+0

MAN 정말 고마워요! 링크가 넘어서면 다른 링크를 유지하는 것이 좋습니다. 정말 고맙습니다!! :)) –

+0

질문, 이미지가 바뀔 때마다 흰색으로 깜박 거리는 것을 방지 할 수 있습니까? –

+0

어떤 이유로 크롬에서는하지만 IE에서는 그렇지 않습니다. 위어드. –