페이딩 이미지는

Question

나는 헤더

<div id="header"> 
<IMG SRC="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png"> 
</div> 

이 코드 그리고

<div id="menu"> 
<a href="url">Link One</a>, 
<a href="url">Link Two</a>, 
<a href="url">Link Three</a> 
</div> 

내가 헤더 이미지가 주 메뉴 링크를 통해 다른 이미지로 퇴색 할 메인 메뉴에이 코드를 . 이것이 가능한가? 감사. 모든 대부분의 W3C 사람들의

Answer 1

먼저이 줄 구문 일반 HTML 개체 태그와 같은 그냥 태그 할 필요가 ID로 이름 <div id="header">

아무것도 당신이 화가 얻을 것이다. id='header'의 ID를 부여 할 수있는 것이면 <header> 태그 일 수 있습니다.

둘째, 질문이 무엇인지 완전히 묻지 않으므로 아직 알려지지 않은 것을 생각해 봅니다. @Parody는 클릭 할 때마다 이미지가 변경되도록하는 방법을 보여주었습니다. 귀하의 질문 부분은 I want the header image to fade into another image through the main menu links. Is this possible?라고 말하면서 이해하기 힘들 기 때문에 어떤 종류의 이벤트가 이미지 변경을 시작한다고 가정하겠습니다. 이 작업을 수행하는 방법은 여러 가지가 있지만, 특히 초급 프로그래머의 경우 가장 좋은 방법은 Bootstrap 버전 3.0+을 사용하는 것입니다. HTML을 사용하기 위해서는 일반적으로 JavaScript/JQuery가 필요합니다.

당신은

HTML ... 그 여기 괜찮 jQuery를 사용하여 변화를 트리거 할 hover 이벤트를 사용하는 방법의 예입니다 부트 스트랩을 사용하지 않으려면

<div id="header"> 
    <img src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png" /> 
</div> 

<div id="menu"> 
    <a href="url" class="navLink" data-image="http://www.newsucanuse.org/wp-content/uploads/2011/12/sexy-woman.jpg">Link One</a> 
    <a href="url" class="navLink" data-image="http://www.datingdynamics.com/dating-advice-for-guys/wp-content/uploads/2013/09/woman-sexy-hd-celebrity-81758.jpg">Link Two</a> 
    <a href="url" class="navLink" data-image="http://images2.fanpop.com/image/photos/12700000/Xtina-looking-hot-christina-aguilera-12723427-490-628.jpg">Link Three</a> 
</div> 

JAVASCRIPT/JQUERY

$(".navLink").each(function() { 
    $(this).hover(function() { 
     $("#header img").css({"background-image":"url($(this).attr('data-image'))"}); 
    }); 
});