Rollovers/Hovers Options

[dezignx]

Ok,I finished my div and was gone leave it as is but wanted to try something different this time, so I am interested in learning how to do the rollovers/hovers

My test profile is here

So, how can I achieve this? "Design Wise" Will I have to recreate/extend the top part of my div to make this happen? I mean can I leave my div as is?? Or will I have to create something I read about two images or a top half and bottom or something....I would like the links to change and also where it says click here for pricing..... like this profile here

I've read so many different things till I got confused as how to try and achieve this...

Which code should I use or which is easier to deal with?

#1
http://www.createblog.com/html_css-scripts...image-rollover/

#2

CODE

<style>
.nav1 {
display:block;color:ffffff!important;
text-align:right!important;
font-family:georgia!important;
font-size:7pt!important;
line-height:10pt!important;
background-color:202020!important;
margin: 1px!important;
border-left:3px solid!important;
border-right:0px solid!important;
border-color:7f292f!important;
letter-spacing: 4px!important;
font-weight: normal!important;
width:100%!important;
margin: 1px!important;
border-left:3px solid!important;
border-right:0px solid!important;
border-color:7f292f!important;
text-transform:uppercase!important;
text-decoration:none!important;
line-height:10pt!important;
background-color:202020!important;
}

.nav1:hover {
display:block;color:ffffff!important;
font-family:georgia!important;
text-transform:uppercase!important;
text-decoration:none!important;
line-height: 10pt!important;
overflow-x:hidden!important;
font-size:7pt!important;
background-color:2d2d2d!important;
margin: 1px!important;
border-left:3px solid!important;
border-right:0px solid!important;
border-color: a8545a!important;
text-align:right;!important
letter-spacing: 4px!important;
font-weight: normal!important;
width:100%!important;

}

</style>

CODE

<a href="URL HERE!!" class="nav1">Friend #3</a>

#3

CODE

.navigation { NAVIGATION PROPERTIES }
.navigation a { display:block; float:left; height:##px; text-indent:-999em; }
.navigation a:hover { background-position:bottom; }

.link-1 { background-image:url(IMAGE FOR 1ST LINK); width:##px; }
.link-2 { background-image:url(IMAGE FOR 2ND LINK); width:##px; }
.link-3 { background-image:url(IMAGE FOR 3RD LINK); width:##px; }

CODE

<div class="navigation">
<a class="link-1" href="URL">LINK 1</a>
<a class="link-2" href="URL">LINK 2</a>
<a class="link-3" href="URL">LINK 3</a>
</div>

[dezignx]

Ok, I will edit my layout.

To clarify, am I making two text images for each...like 2 message buttons, etc.... one original text image and another with a design or color on it or something for when they hover on it??