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>

[pandemonium]

i don't think you are going to be able to use rollovers like that..
from what i can see you've got msg, add, cmnt, work, and all those links in the background image.. and you just put a clear.gif image over it..

[Mikeplyts]

i don't think you are going to be able to use rollovers like that..
from what i can see you've got msg, add, cmnt, work, and all those links in the background image.. and you just put a clear.gif image over it..

well, they can just edit it and get rid of the text and then make the separate text images then use the rollover code.

EDIT:

actually, this tutorial was the first one I used so yeah...