Please help me make a new very basic navigation bar.

[SPL Tech]

How does this nav bar change colors?

I am making a new nav bar to replace my current one and I cannot figure out how to get Prontpage 03 to make the image change color when I mouse over it. You will notice that the current nav bar images change white when you mouse over them. How do I create that exact same effect with Frontpage 2003?

My website: http://www.rockclimbinghawaii.com/

 

[rady]

If you choose to use an class for your menu bar you can have like this:

.menubar a:link { color:red; text-decoration:underline; }
.menubar a:visited { color:red; text-decoration:underline; }
.menubar a:hover { color:green; text-decoration:underline; }
.menubar a:active { color:red; text-decoration:underline; }

You can play with these.
Regards

 

[SPL Tech]

That only applies to text menu bars though. My menu bar is not text. Its pictures. Do you know if I can create the menu bar out of buttons instead of pictures and then change the hover color of the buttons?

 

[wetgravy]

So ok ... you have just a simple image swap menu bar on this site ...

<td align="left" background="img/nav2/topnavbar_bg.gif" valign="top"><img src="img/nav2/topnavbar_1.gif" height="78" width="800"><br>


<img src="img/nav2/topnavbar_2.gif" height="22" width="245"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','img/nav2/topnavbar_3_f2.gif',1)"><img src="img/nav2/topnavbar_3.gif" alt="Home" name="Image14" border="0" height="22" width="37"></a><img src="img/nav2/topnavbar_4.gif" height="22" width="4"><a href="outdoor_main.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','img/nav2/topnavbar_5_f2.gif',1)"><img src="img/nav2/topnavbar_5.gif" alt="Outdoor Climbing" name="Image16" border="0" height="22" width="108"></a><img src="img/nav2/topnavbar_6.gif" height="22" width="4"><a href="http://rockclimbinghawaii.com/climbaloha/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','img/nav2/topnavbar_7_f2.gif',1)" target="_blank"><img src="img/nav2/topnavbar_7.gif" alt="Climbing Gear" name="Image18" border="0" height="22" width="93"></a><img src="img/nav2/topnavbar_8.gif" height="22" width="5"><a href="links_main.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','img/nav2/topnavbar_9_f2.gif',1)"><img src="img/nav2/topnavbar_9.gif" alt="Links" name="Image20" border="0" height="22" width="86"></a><img src="img/nav2/topnavbar_10.gif" height="22" width="4"><a href="about_main.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','img/nav2/topnavbar_11_f2.gif',1)"><img src="img/nav2/topnavbar_11.gif" alt="About RCH" name="Image22" border="0" height="22" width="145"></a><img src="img/nav2/topnavbar_12.gif" height="22" width="69"></td>

that is the code for it ... bulky and unrestrained.


you can replace it with ....

<div class="menu">
<ul>
<li class="first"><a href="index.html" title="">Home</a></li>
<li><a href="about.html" title="">About Us</a></li>
<li><a href="products.html" title="">Products</a></li>
<li><a href="services.html" title="">Services</a></li>
<li><a href="contact.html" title="">Contact Us</a></li>

</ul>
</div>

which is then editable with css to use rady's code to define it with roll over.

i hope this is what you mean.

 

[adamblan]

<div class="menu">
<ul>
<li class="first"><a href="index.html" title="">Home</a></li>
<li><a href="about.html" title="">About Us</a></li>
<li><a href="products.html" title="">Products</a></li>
<li><a href="services.html" title="">Services</a></li>
<li><a href="contact.html" title="">Contact Us</a></li>

</ul>
</div>

Amen the css rollovers are not only light-weight & easily customized, but also work when js is disabled

 

[wetgravy]

I only use javascript on things that would just add that extra oomph to a site and would look completely the same with JS disabled, just without the bells and whistles.