View Full Version : navbar help - 7 files into one ASP.NET

06-07-2007, 05:44 PM
You'd think finding ASP.NET VB navbar code would be easy, but I haven't been able to find anything resembling what I need.

I have a navbar that is pretty simple. 7 pages, 6 navbar items, 18 images (3 for each button - on, off, mouseover). One page has all off, other pages have one button in 'on' state. Every button has a rollover image using js.

Using ASP.NET 2.0 with Visual Studio 2005.

Right now, I am doing this the easy (wrong) way. I have 7 different include files for each page's navbar. Each page inserts the appropriate include file for the navbar for that page.

Here's one of the include files (for page 2, no rollover for 'on' state). Using CSS for an inline list. I know I could/should do the rollovers in CSS, but this is what I have now:

<ul id="mainNav">
<li><a href="index.aspx"><img src="_images/nav_01_ho_off.gif" name="01ho" width="209" height="35" border="0" id="01ho" onmouseover="swapImage('01ho','','_images/nav_01_ho_ro.gif',1)" onmouseout="swapImgRestore()" /></a></li>
<li><a href="page02.aspx"><img src="_images/02_ef_on.gif" name="02ef" width="126" height="35" border="0" id="02ef" /></a></li>
<li><a href="page03.aspx"><img src="_images/nav_03_hl_off.gif" name="03hl" width="131" height="35" border="0" id="01mm" onmouseover="swapImage('03hl','','_images/nav_03_hl_ro.gif',1)" onmouseout="swapImgRestore()" /></a></li>
<li><a href="page04.aspx"><img src="_images/nav_04_sf_off.gif" name="04sf" width="113" height="35" border="0" id="04sf" onmouseover="swapImage('04sf','','_images/nav_04_sf_ro.gif',1)" onmouseout="swapImgRestore()" /></a></li>
<li><a href="page05.aspx"><img src="_images/nav_05_ps_off.gif" name="05ps" width="230" height="35" border="0" id="05ps" onmouseover="swapImage('05ps','','_images/nav_05_ps_ro.gif',1)" onmouseout="swapImgRestore()" /></a></li>
<li><a href="page06.aspx"><img src="_images/nav_06_re_off.gif" name="06re" width="151" height="35" border="0" id="06re" onmouseover="swapImage('06re','','_images/nav_06_re_ro.gif',1)" onmouseout="swapImgRestore()" /></a></li>

Pretty simple, right?

I have 7 of these files. I want to have one file. Basically, the code just needs to 'know' what page it is on to display a different image for that page's button.

Can anyone point me in the right direction? Ideally, I want to use ASP.NET and VB to do this.


06-16-2007, 06:41 PM
The id attribute for the <img> controls must be renamed to start with a letter so that you can reference the controls in your code. The <img> tags also need a runat attribute, e.g.,
<img id="img01ho" runat="server"...

Your VB ASP.NET code can then change the img01ho control's attributes in Page_Load(), e.g.,
img01ho.Src = "~/Images/Pretty.gif"