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]

I'm doing something wrong....

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>






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

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>


<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:47px; background-image: url("http://img190.imageshack.us/img190/8070/messagehover.png"); background-position:bottom left; background-repeat:no-repeat;}</style>

GENERAL

CODE

<style>
.dezignxgrafix { just below is the code where put the URL to your background image – replace the link } </style>

<style> body{background-image:url("http://img3.imageshack.us/img3/1218/acdbgr.png"); background-attachment:fixed; background-repeat: no-repeat; background-position:top center; background-color:392400; margin-top:0px; }</style>



<i class="i">
Hide stuff to prepare for Div Overlay
<a href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tcy9kaXYtb3ZlcmxheQ==">myspace div overlay code tutorial by Eileen</a>
</i>
<i class="i">!-Begin Block to set Table Level and Open custom Div-!</i>
<i class="i">Close ALL open tables so that our div is not effected by the stuff we have removed </i>
</td></tr></table>
</td></tr></table>
</td></tr></table>

<i class="i">!!Create and size our div.!! </i>
<div class="myCoreDiv" style="width:891px; height:1953px !important; border:0px violet solid; position:relative; top:0px; overflow:hidden; z-index:0;">
<i class="i">!!-----START Core Custom CONTENT------!! </i>

<img src="http://img14.imageshack.us/img14/2069/acdoverlayversion2.png" />





<i class="i">!!-------END Core CUSTOM CONTENT--------!!</i>

<i class="i">!!Open same number of tables we closed.!!
</i>
<table class="myTclass0"><tr><td class="hideIfInInterests">
<table class="i"><tr><td>
<table><tr><td>
<i class="off">!-END Custom Block to Set Table Level and Create Custom Div-!</i>





<span class="off">!-Start Custom Code in Sounds Like-!</span>

</td></tr></table></td></tr></table></td></tr></table>

<span class="off">!-START code for custom text section_About Louisiana Mixtapes-!</span>
<div class="myBio" style="width:480px; height:195px; position:absolute; top:1220px; left:370px; overflow:auto">

FAKE TEXT


</div>


<div class="myBio" style="width:280px; height:345px; position:absolute; top:1590px; left:600px; overflow:auto">

FAKE TEXT


</div>



<span class="off">!CLOSE Text Div!</span>
<style>
table div.myBio {display:block; visibility:visible;}
</style>
<table><tr><td><table class="off"><tr><td><table><tr><td>
<span class="off">!-END Custom Code in Sounds Like-!</span>