求一个根据URL显示不同图片的JS

Question

问题描述：网站头部有个BANNER图片，这个BANNER是写在母版页里的，现在有个需求，就是每个页面的BANNER图片都要求不一样，如：我的导航菜单有8个链接，现在就是每个链接页面对应一个BANNER图片。我有个思路就是根据地址栏URL的不同去判断，然后加载相应的图片。求个JS。。 <div id="nav">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="50">&nbsp;</td>
        <td align="center"><a href="Default.aspx" class="index_T"><img alt="" src="images/dh_fhsy.gif" /></a></td>
        <td width="5" align="center"><img alt="" src="images/t_ge_1.gif" width="5" height="32" /></td>
        <td align="center" class="index_T"><a href="Abouts.aspx"><img alt="" src="images/dh_ljwm.gif" /></a></td>
        <td width="5" align="center" class="index_T"><img alt="" src="images/t_ge_1.gif" width="5" height="32" /></td>
        <td align="center" class="index_T"><a href="Service.aspx" class="index_T"><img alt="" src="images/dh_zxfw.gif" /></a></td>
        <td width="5" align="center" class="index_T"><img alt="" src="images/t_ge_1.gif" width="5" height="32" /></td>
        <td align="center" class="index_T"><a href="Approve.aspx" class="index_T"><img alt="" src="images/dh_zxrz.gif" /></a></td>
        <td width="5" align="center" class="index_T"><img alt="" src="images/t_ge_1.gif" width="5" height="32" /></td>
        <td align="center" class="index_T"><a href="News.aspx" class="index_T"><img alt="" src="images/dh_hydt.gif" /></a></td>
        <td width="5" align="center" class="index_T"><img alt="" src="images/t_ge_1.gif" width="5" height="32" /></td>
        <td align="center" class="index_T"><a href="Self.aspx" class="index_T"><img alt="" src="images/dh_tszw.gif" /></a></td>
        <td width="5" align="center" class="index_T"><img alt="" src="images/t_ge_1.gif" width="5" height="32" /></td>
<td align="center" class="index_T"><a href="Partners.aspx" class="index_T"><img alt="" src="images/dh_hzdw.gif" /></a></td>
        <td width="5" align="center" class="index_T"><img alt="" src="images/t_ge_1.gif" width="5" height="32" /></td>
 <td align="center" class="index_T"><a href="Contact.aspx" class="index_T"><img alt="" src="images/dh_lxwm.gif" /></a></td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </div>
    </td>
  </tr>
  <tr>
    <td height="179" colspan="4" style="background-image:url(images/index_mid.gif)">&nbsp;</td>
  </tr>
这个是显示图片的地方<tr>
    <td height="179" colspan="4" style="background-image:url(images/index_mid.gif)">&nbsp;</td>
  </tr>

Answer 1

后台代码动态控制 不知道你是c# 还是jsp

Answer 2

什么也不用动。
你这个是母板，生成的文件指定它生成的位置是不同的目录就完事了。这样，在不同目录下拷入images目录，和此目录下的t_ge_1.gif，只要用不同的t_ge_1.gif。
这样，结构清晰，不用增加代码（增加代码就意味着牺牲效率和增加风险）。

Answer 3

写个JSON格式的配置就可以了
var bannerConfig = {
  'index' : '地址1',
  'home' : '地址2'
}根据当前的url判定为什么,例如为index  则可以获得这个页面banner需要设置的图片地址了

Answer 4

我原先也考虑你的那种方法，用母版生成的文件，然后指定文件，但现在我的母版是分了三个部分，这三个部分：头部，主体，底部。且这三个部分是三个控件！就是.acx格式的。现在用修改头部只能修改Head.acx文件，除非我把Head.acx文件再分成两部分。。

Answer 5

C#要怎么调用这个JSON格式的？

Answer 6

后台代码动态控制。。我考虑了你的这种思路。
就是用response.write 输出。。
应该可行！