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

首先申明，本人学农出身，自已建的这个网站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  显示的是这个图片

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

请大神出手相助

<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 = "图片地址"
}
 

你每个页面都有这部分代码吧，每页都改一下，以“毛桃贴字”页面为例，找到毛桃贴字得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去处理

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

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

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

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

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