ADDING TABS & ROLLOVERS TO YOUR DESIGNS

by Anna Dalea, ERT Website Solutions

I don't know about you, but i'm tired of seeing the old and outdated websites that use html links to get from page to page as their main navigation.  Now-a-days, people like interactive content.  One of the easiest way to implement interactive content onto your site is with tabs and rollover effects.

These are easy to implement with Dreamweaver... however if you're doing it the old fashioned (coding) way, you just need to know how to code it.  I'll give you the code here:

First of all, you need to create your tabs in Photoshop (or other graphics application).  For example, you would create a tab in medium-blue with the words "Home Page" on it... save it as "home.gif" then change the tab color to a light-blue ad perhaps change the color of the words "home page" (instead of Black use a gun-metal grey).  Then save that second tab as "home_over.gif". 

Now that you have two different versions of the same button... we will code it so that when the viewer rolls over the button with their mouse  it will toggle between medium-blue with black text to a light-blue with grey text.  This will show "interaction" and make your viewers think that you're site has been upgraded and is keeping up with competitors.

Now the only thing you have to do is implement it with the code:  (this is example code from my website, ERT Website Solutions, that was made using dreamweaver)

<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('homebutton','','images/homebtn_over.png',1)"><img src="http://images.quickblogcast.com/homebtn.png" name="homebutton" width="145" height="40" border="0" id="homebutton" /></a>

        1) In the first string the only info you change will be "index.html" to whatever the path & page is that you're 
               editing. 
        2) Now, change the name "homebutton" to what you want to call the button for your page.
        3) Now, change the path for your "over" button and the name of the "over" image.
        4) Then you'll change the image src path to the name of your button and change the name of the button
               again to whatever you changed it to in step 2.
        5) Don't forget to change the width and height to accomodate the width and height of your images.
        6) Lastly, change the id name for the button just like in step 2.

I know it seems like a lot.. but practice and it will get easier!  I promise.