带链接的褪色图像

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