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>

[Mikeplyts]

Replace your codes with this:

About Me:

CODE

<style> table, tr, td { background-color:transparent; border:none; border-width:0;} table table table { border-style:solid; border-width:0px; border-color:000000 background-color:000000; } .r{} table table table {border:0px padding:1; } table table{border:0px} table table table table{border:0px} font, td, a, body, input, table {color:ffffff;font-family:arial;} body, td, li, p, div, li, h1, h2, p, br {font-family: arial; font-size: 9pt; color: ffffff; font-weight: bold; } .btext {font-family: arial; font-size: 9pt; color: ffffff; } .blacktext10 {font-family: arial; font-size: 9pt; color: ffffff; } .blacktext12 {font-family: arial; font-size: 9pt; color: ffffff; } .lightbluetext8 {font-family: arial; font-size: 9pt; color: ffffff; } .nametext {font-family: arial; font-size: 9pt; color: ffffff; } .orangetext15 {font-family: arial; font-size: 9pt; color: ffffff; } .redbtext {font-family: arial; font-size: 9pt; color:ffffff; }
.redtext {font-family: arial; font-size: 11pt; color: ffffff; }
.text {font-family: arial; font-size: 9pt; color: ffffff; }
.whitetext12 {font-family: arial; font-size: 9pt; color: ffffff; }
.r{}
.blacktext12 {visibility:hidden; display:none}
.contactTable {display: none;}
</style>








<i class="i">!START code in Influences !</i>
<i class="i">!START Style Block For Hiding Elements on Band Page!
<a href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tcy9iYW5kLWhpZGUtYWxs">MySpace Band Hide Everything</a>
</i>
<style>
.i, div.clearfix i i i {display:none}
{! fix a centering problem, and clear white space caused by clear gifs !}
td {width:auto;}
table td img {display:none;}

{! restore any images displayed inside our div. You may want to use block instead of inline for some images. !}
table td div.myCoreDiv img, table td div.myCoreDiv table td img,
table td div.myCoreDiv div img {display:inline;}

{!OPTIONAL restore image on maroon nav bar, we could use a.navbar img!}
div table td a.navbar img {display:block;}

{! removes most content and the space it occupied !}
table table table {display:none}

{! minimize the remaining main page content that can not be removed without effecting the ad and menus !}
table table td { height:0px; margin:0px; padding:0px;}

{! restore my div. !}
table div.myCoreDiv {display:block;}
{! restore div with Comments !}
table div.myCoreDiv div.myDclassFC {display:block;}
table div.myCoreDiv div {display:block;}

table table br {display:none;}
table table table br {display:block;}


{! reverse effect on custom div !}
table div.myCoreDiv br {line-height:11px;}

{! remove default background coloring !}
table table, tr, td {background-color:transparent !important}

{! ONLY if you want to remove the blue behind the ad banner AND the maroon !}
div.profileWidth table, div.profileWidth td {background-color:transparent !important}
div table {border-bottom:none !important;}

{! ADDITIONAL STYLE BLOCKS CAN GO HERE !}



</style>
<i class="i">!End code in Influences !</i>

<style>
.CLASS_MESSAGE {display:block; width:178px; height:95px; background-image: url("http://img14.imageshack.us/img14/8164/messaged.png"); background-position:top left; background-repeat:no-repeat;}
.CLASS_MESSAGE:hover {display:block; width:178px; height:95px; background-image: url("http://img190.imageshack.us/img190/8070/messagehover.png"); background-position:top left; background-repeat:no-repeat;}
</style>

I'd Like to Meet:

CODE

<span class="off">!-Display Comments-!</span><style>
table table.friendsComments td.text table,
table table.friendsComments {display:block}
</style>
<span class="off">!-END Display Comments-!</span>




<span class="off">!-Display Friends-!</span>
<style>
{! display friends !}
table table td.text table.friendSpace,
table table td.text table.friendSpace td.text table {display:none}
{! restore width in FireFox and Opera; assumes default friendSpace width !}
table table td.text table.friendSpace td.text table table td {width:107px !important}
{! view friend link; override positioning for shows !}
table table td.text table.friendSpace td.text table div {position:static !important; height:auto !important;}
</style>
<span class="off">!-END Display Friends-!</span>




<span class="off">START Block to Put Comments in Div</span>
<style>
{!- comment div style stuff -!}
div.myDclassFC {width:550px; height:400px; overflow:scroll; overflow-x:hidden;}
div.myDclassFC {position:absolute; top:1540px; left:20px;}

table.friendsComments, table.friendsComments td, table.friendsComments table, table.friendsComments table td {width:100% !important}
table.friendsComments table table td {width:auto !important; border:0px silver solid; border-collapse:collapse}
{!- OPTIONAL: size control to keep comment images small -!}
table.friendsComments img {width:230px !important;}
table.friendsComments a img {width:50px !important;}
table.friendsComments span.msOnlineNow img {width:17px!important;}



</style>

</td></tr></table></td></tr></table></td></tr></table>
<div class="myDclassFC" style="border:0px purple dashed">
<table class="myTclassFC"><tr><td class="text">
<table class="off"><tr><td>
<table class="off"><tr><td>
<span class="off">END Block to Put Comments in Div</span>


<style>
.blacktext10 {display:block; border-top:1px solid; border-color:ffffff; padding-top:10px;}
</style>
</div>

<div style="position:absolute; top:360px; _top:360px; left:50%; _left:50%; margin-left:60px; _margin-left:60px;">
<a class="CLASS_MESSAGE" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZVYyJmZyaWVuZElEPTEwMTM1MjY0Mg==" target="_self">
</div>

See if that does the trick. You had quite a few spelling errors. :\