javascript - 带有链接的褪色图像

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>

我希望标题图像通过主菜单链接淡入另一个图像。这可能吗？谢谢。

Answer 1

首先，大多数 W3C 人员会因为这行 <div id="header"> 而生你的气

任何在语法上命名为与通用 HTML 对象标签相同的 id 的东西都需要只是那个标签。任何足以给出 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 才能完成。

如果您不想使用 Bootstrap 也没关系，这里有一个如何使用 hover 的示例使用 JQuery 触发更改的事件...

HTML

<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'))"});
    });
});