Web Design Tutorials: Creating a Basic Navigation with Mouse Over effects

In this video I will show you a very simple yet very effective navigation technique.

**Pause as needed**
*Sorry for no sound my mic is broken I will update all my videos with voice over as soon as I can.

You can download the source files for this lesson at: http://www.lokeepro.com/tutorials/lesson3.rar

Step one: Create the button in photoshop, you can create any style of button you want just be sure to make 2 versions of the button.
one as the "normal UP" state and then one for the "mouse over" state.

Step two: insert the code for the link and mouseover effects.
**Be sure to name you image the same name as in the "document.*NAME*.src" this will tell it what image to change.

a href="index.html" onmouseover="document.home.src='images/home01_over.png'" onmouseout="document.home.src='images/home01.png'" img src="images/home01.png" width="80" height="40" border="0" alt="home" name="home"

Step three: You may need to add padding to the nav style to fit your navigation properly.

Experiment with this technique and BE CREATIVE!! this is a very simple yet effective way to create very nice navigation's with mouse over effects, without using flash.

Category:

Education

Tags:

• Web
• Design
• Tutorials
• Creating
• Basic
• Navigation
• with
• Mouse
• Over
• effects
• lokeepro
• lokee
• pro
• photoshop
• dreameaver

[LokeePro]

If you want the actual nav bar to change color, say under the highlighted button just simply add a colored background to the over state button.

this way the mouse over version of the button will have a different colored background than the nav bar.

[nickwyatt123]

it doesn't work for me?

[LUnarcry52]

how to make a navigation bar that it change it color when the mouse is over..