辰时果贴
2021-04-25 15:14
采纳率: 100%
浏览 81

如何根据页面,来改变导航栏图片?

首先申明,本人学农出身,自已建的这个网站https://www.pgzpgz.com/,完全自学,非常初级,大神勿笑

目前我用的是Dreamweaver来做的这个网站,这个页头在一个模版文件里,用的是行为中的交换图像

但这个图像仅是在点击时会变成另一个图像,当到达相应页面后还是会变回原来的图像 

以下是我用的源码

<div id="dh1"><a href="https://www.pgzpgz.com/index.htm" target="_blank" onMouseOver="MM_swapImage('Image1','','../images/dh101.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/dh01.jpg" alt="字贴简介" width="200" height="80" id="Image1"></a><a href="https://www.pgzpgz.com/zjyp.htm" target="_blank" onMouseOver="MM_swapImage('Image2','','../images/dh102.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/dh02.jpg" alt="字贴样品" width="200" height="80" id="Image2"></a><a href="https://www.pgzpgz.com/ygff.htm" target="_blank" onMouseOver="MM_swapImage('Image3','','../images/dh103.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/dh03.jpg" alt="邮购方法" width="200" height="80" id="Image3"></a><a href="https://www.pgzpgz.com/dzztx.htm" target="_blank" onMouseOver="MM_swapImage('Image4','','../images/dh104.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/dh04.jpg" alt="定做字贴" width="200" height="80" id="Image4"></a><a href="https://www.pgzpgz.com/gwly.htm" target="_blank" onMouseOver="MM_swapImage('Image5','','../images/dh105.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/dh05.jpg" alt="联系我们" width="200" height="80" id="Image5"></a><a href="https://www.pgzpgz.com/mt.htm" target="_blank" 
onMouseOver="MM_swapImage('Image12','','../images/dh112.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/dh12.jpg" alt="毛桃贴字" width="200" height="70" id="Image12"></a><a href="https://www.pgzpgz.com/zysx.htm" target="_blank" 
onMouseOver="MM_swapImage('Image13','','../images/dh113.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/dh13.jpg" alt="注意事项" width="200" height="70" id="Image13"></a><a href="https://www.pgzpgz.com/fgq.htm" target="_blank" 
onMouseOver="MM_swapImage('Image14','','../images/dh114.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/dh14.jpg" alt="分割器" width="200" height="70" id="Image14"></a><a href="https://www.pgzpgz.com/syff.htm" target="_blank" 
onMouseOver="MM_swapImage('Image15','','../images/dh115.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/dh15.jpg" alt="使用方法" width="200" height="70" id="Image15"></a><a href="https://www.pgzpgz.com/ztsp.htm" target="_blank" 
onMouseOver="MM_swapImage('Image16','','../images/dh116.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/dh16.jpg" alt="果贴简史" width="200" height="70" id="Image16"></a><a href="https://www.pgzpgz.com/hzmtx.htm" target="_blank" 
onMouseOver="MM_swapImage('Image6','','../images/dh106.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/dh06.jpg" alt="合作媒体" width="200" height="80" id="Image6"></a><a href="https://www.pgzpgz.com/yjzhw.htm" target="_blank" onMouseOver="MM_swapImage('Image7','','../images/dh107.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/dh07.jpg" alt="有奖征文" width="200" height="80" id="Image7"></a><a href="https://www.pgzpgz.com/xc1/index1.htm" target="_blank" onMouseOver="MM_swapImage('Image8','','../images/dh108.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/dh08.jpg" alt="苹果实拍" width="200" height="80" id="Image8"></a><a href="https://www.pgzpgz.com/yt.htm" target="_blank" onMouseOver="MM_swapImage('Image9','','../images/dh109.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/dh09.jpg" alt="油桃贴字" width="200" height="80" id="Image9"></a><a href="https://shop329900904.taobao.com/" target="_blank" onMouseOver="MM_swapImage('Image11','','../images/dh111.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/dh11.jpg" alt="淘宝店铺" width="200" height="80" id="Image11"></a></div>

我想要的是当点击其中一项如  视频红包栏  点到相应页面后显示的图片 是绿色的那张图片使得和其它别的页面有区别 ,我看到另一位大神发的一个贴子 如何根据页面 来改变导航栏图片

https://bbs.csdn.net/topics/210082629   这个就和我想要的是一样的,如果大家看不懂我说的,请参照下这个贴子

现在我想要的是 用Dreamweaver 中的行为或加代码的方式如何实现我说的 根据不同的页面来改变导航栏的图片 比如现在打开这个页面 https://www.pgzpgz.com/yjzhw.html  显示的是这个图片

但我需要在这个页面这里显示的是这个图片

请大神出手相助

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • 已采纳

    <script type="text/javascript">
    if (location.href.indexOf("index.htm")>=0) {
        document.getElementById("Image1").src = "images/dh101.jpg"
    }
    else if (location.href.indexOf("zjyp.htm")>=0) {
        document.getElementById("Image2").src = "images/dh102.jpg"
    }
    else if (location.href.indexOf("ygff.htm")>=0) {
        document.getElementById("Image3").src = "images/dh103.jpg"
    }

    </script>

    其他的图片自己添加

    放在导航栏代码下面

    点赞 评论
  • 获取页面地址 根据页面地址的内容来的修改图片地址 
     

    if (location.href.indexOf("A.html")>=0) {
        document.getElementById("id").src = "图片地址"
    }
     

    点赞 评论
  • a718089112 2021-04-25 16:08

    你每个页面都有这部分代码吧,每页都改一下,以“毛桃贴字”页面为例,找到毛桃贴字得a标签,去掉onMouseOver和onMouseOut方法,img得src改为../images/dh112.jpg,其他页面也一样。

    <a href="https://www.pgzpgz.com/mt.htm" target="_blank"><img src="../images/dh112.jpg" alt="毛桃贴字" width="200" height="70" id="Image12"></a>

     

    提示:这是最基础得页面,你用Dreamweaver每个页面都画可以这么想,实际开发中一般会有一个统一得这种导航管理,用动态js去处理

    点赞 评论
  • 有问必答小助手 2021-04-26 10:34

    您好,我是有问必答小助手,你的问题已经有小伙伴为您解答了问题,您看下是否解决了您的问题,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

    点赞 评论
  • 有问必答小助手 2021-04-26 17:15

    非常感谢您使用有问必答服务,为了后续更快速的帮您解决问题,现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中,希望能得到您的支持与协助!

    速戳参与调研>>>https://t.csdnimg.cn/Kf0y

    点赞 评论

相关推荐 更多相似问题