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]

is that a 2.0 profile or 1.0

[dezignx]

its a 1.0 profile

[Mikeplyts]

Try using the first tutorial you posted since you're a beginner.

[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..

[dezignx]

Yep exactly...so I will have to create another image?

Thats why I was asking about design wise

so if I use the first tutorial, do I just create the image like they have it or its two separate images?

[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...

[pandemonium]

what mike said works..
and yes you can leave it like that but if you want the rollovers really bad you're going to have to slice the image and then use your first link that you posted, if you dont want to make another layout

EDIT:

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

or that! it works too.
damn mike you edited your post it got me confused

[Mikeplyts]

what mike said works..
and yes you can leave it like that but if you want the rollovers really bad you're going to have to slice the image and then use your first link that you posted, if you dont want to make another layout

EDIT:
or that! it works too.
damn mike you edited your post it got me confused

[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??

[Mikeplyts]

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??

yep.

[dezignx]

Ok good...Im going try this out..will post back whether I got it or not

Thanks so far

[dezignx]

Ok, I created my two message buttons and put the url in the code...why doesn't it show up on my div?? and what code do I use to position it if I can get it to show up? exactly where do I place this code?

I tried placing the code in the like to meet section, then in the about me section...it doesn't show up...

Does this code go in a div tag or something?

CODE

<style>
.MESSAGE {display:block;width:178px;height:95px;
background-image:url("http://img14.imageshack.us/img14/8164/messaged.png"); background-repeat:no-repeat;}

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

[Mikeplyts]

When you make the class for the rollover, you need to set it's height to half of the image's height. Then, use the a tag with a class property to it within a DIV.

So, make your class in your CSS:

CODE

.CLASS_NAME {display:block; width:###px; height:###px; background-image: url("IMAGE URL"); background-position:top left; background-repeat:no-repeat;}
.CLASS_NAME:hover {display:block; width:###px; height:###px; background-image: url("IMAGE URL"); background-position:bottom left; background-repeat:no-repeat;}

Then, input the DIV into your HTML:

CODE

<div style="position:absolute; top:###px; _top:###px; left:50%; _left:50%; margin-left:###px; _margin-left:###px;">
<a class="CLASS_NAME" href="URL" target="_self">
</div>

Replace the pound symbols and little fillers with the appropiate values.

[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>

[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. :\

[dezignx]

Thanks

Just had to do minor tweaking to get my sample text and my comments to show up....

Everything is good to go now.....

You're Awesome!! Thanks once again!!