【问题标题】:Change Background Image on NavBar Click更改导航栏上的背景图像单击
【发布时间】:2013-03-16 05:59:28
【问题描述】:

我不得不承认我对此很陌生,但是我正在基于模板构建一个网站,除了一件事之外,我即将完成!当用户单击导航栏项目并弹出网站的不同部分时,我正在尝试将背景更改为不同的图像。

如果有帮助,请访问以下网站:www.pitchadvisor.com

目前,我的导航栏链接设置如下:

<a href="#!/page_about"><span></span>What</a></li>

我尝试了以下更改,但没有成功:

<a href="#!/page_about" onclick="document.getElementById('test').style.backgroundImage='url(http://www.pitchadvisor.com/images/bg2.jpg)'; return false;" >

任何帮助将不胜感激!

谢谢!

【问题讨论】:

    标签: html css image background background-image


    【解决方案1】:

    它不起作用,因为您的背景是在 html 而不是 css 中设置的,这是我想出的可能修复它的方法:

    将 html 的第 78 行更改为

    <div id="bgStretch"><img src="http://pitchadvisor.com/images/bg.jpg" alt=""></div>
    

    <div id="bgStretch"><img id='bgimage' src="http://pitchadvisor.com/images/bg.jpg" alt=""></div>
    

    并从

    更改您的javascript
    <a href="#!/page_about" onclick="document.getElementById('test').style.backgroundImage='url(http://www.pitchadvisor.com/images/bg2.jpg)'; return false;" >
    

    <a href="#!/page_about" onclick="document.getElementById('bgimage').setAttribute('src', 'http://www.pitchadvisor.com/images/bg2.jpg');" >
    

    让我知道这是否适合你,或者我能做的任何其他事情。

    【讨论】:

    • 感谢 corvin,这非常有效!非常感谢您的帮助!
    • 实际上,很抱歉让您感到痛苦,但有一个后续问题:只是想知道使这些图像之间的过渡更平滑是否是一项艰巨的任务。目前它们之间的变化非常快,我想知道是否有一个简单的解决方法。如果没有,不用担心,这不是一个大问题,只是想我会检查一下,以防它相对容易:-) 再次感谢!
    • 是的,我再看看你的代码,看看我能不能把它放慢,这样它就会在动画的中间或结尾附近出现。你可以在#corvinm@irc.esper.net 上与我交谈,如果你没有 irc 客户端,你可以使用这个在线客户端:chat.mibbit.com/?channel=%23corvinm&server=irc.esper.net
    • @python_rookie 您可以使用 jQuery 等包或 CSS3 过渡来进行过渡。由于我正在输入...我也不会粘贴 &lt;img...&gt; 标记,我会使用 CSS div#bgStretch { background: ... ; } 并且我不会永远像这样放入内联 onclick 处理程序。学习通过单独的.js 文件附加事件处理程序。
    【解决方案2】:

    这会有帮助吗?

        <a href="#" onclick="javascript:document.getElementById('asd')
    .style.backgroundImage='url(http://www.pitchadvisor.com/images/bg2.jpg)';"> 
    Click Me </a>
    
        <div id="asd" style="margin-top:50px; width: 100px; height: 100px; border: 1px dashed green;"></div>
    

    在这里试试:http://jsfiddle.net/dTAW3/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-02-21
      • 1970-01-01
      • 1970-01-01
      • 2017-01-05
      • 1970-01-01
      相关资源
      最近更新 更多