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

首先，对于这一行<div id="header">

，大多数W3C人都会生你的气

任何语法命名的id都与通用HTML对象标记相同，只需要该标记即可。任何足以提供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'))"});
    });
});

带链接的淡化图像

1 个答案: