roll over words instead of image Options

[prongs0101]

http://profile.myspace.com/index.cfm?fusea...iendid=14126934

soo...this is what i was talking about in my earlier topics.
when you rollover a link or and image a set of words shows.
this guys profile has his profile like that.
i wanted to know how to do that.

oh look at the section with view my pics, comment and message

[flaymzofice]

So this hovering business really isn't working for me. I've tried changing the z-index with Holly's code, but it keeps coming up under my background layer and I don't know why. I don't think the values I've given the CSS with regard to that specific item, are working either, because I set the 'About Me' link to appear 750px from the top and it's showing up default in the middle of the page (under the background layer). It's doing my head. Am I actually that stupid or am I missing something?

Here's my code:

CODE

<style type="text/css">

    table, tr, td {background:transparent;}
    table table table table, table table table table td.text, table.contactTable {display:none;}
    td.text table, .orangetext15 {visibility:hidden;}
    td.text table table {display:inline; visibility:visible;}
    td.text td.text table {display:none;}
    div b font font, div font font u {display:none;}
.whitetext12 { display: none; }
.nametext { display:none;}

table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}
table table table {border: 0px solid; border-color: transparent; background-color: transparent; }

table table,table table table table,table table{background-color:transparent;width:;border:0px;}

div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}

a.navbar,font,.whitetext12,.btext,.orangetext15,.redbtext,.redtext,.blacktext12,
lightbluetext8,strong,.nametext,div b font font, div font font u,table table table table, table.contacttable{display:none;}

div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;di-splay:none}
td.text table table {display:inline; visibility:visible;}

embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}

.scroll{
scrollbar-face-color:fffffe;
scrollbar-arrow-color:ffffff;
scrollbar-track-color:fffffe;
scrollbar-shadow-color:fffffe;
scrollbar-highlight-color:fffffe;
scrollbar-3dlight-color:ffffff;
scrollbar-darkshadow-Color:ffffff;
filter:chroma(color=fffffe);}

body {
background-color:000000;
scrollbar-arrow-color:ffffff;
scrollbar-track-color:000000;
scrollbar-shadow-color:ffffff;
scrollbar-face-color:000000;
scrollbar-highlight-color:ffffff;
scrollbar-darkshadow-color:000000;
scrollbar-3dlight-color:ffffff;
}

table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}

{The actual modules}
table table table {border: 1px solid; border-color:000000; background-color:transparent; }

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea  
{font:normal 12px Verdana; color:ffffff; font-weight:none; border:0px; text-transform: none; line-height:13px;}

{class for the basic font for the page}
.text {font:normal 12px Verdana; color:CCCACA; font-weight:none; border:0px; text-transform: none; line-height:13px;}  

{style for the number of comments you have. The actual comments}
.redtext{font-family:arial; font-size:12px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase; }

{date stamp on comments}  
.blacktext10{font-family:verdana; font-size:10px;  color:ffffff; font-weight:none;border:0px; text-transform: uppercase;width:300px;}

{This is how all anchor points will be displayed; anchor points appear before all links.}  
a{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }  
a:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{Default Links}
a:link, a.man{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; letter-spacing: 0px;}  

a:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{bolded words}
.standard b, p b, B, strong {
font-family:verdana; font-size:12px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

</style>

<div class="background" style="position: absolute; left: -5px; top:140px; overflow: hidden; z-index:0;">

<img src="http://img.photobucket.com/albums/v27/flaymzofice/myspacev4.jpg" border="0" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="60,123,134,146" href="http://home.myspace.com/index.cfm?fuseaction=user&MyToken=584ade7e-949d-40f8-93a9-0f9ee39e5028">

<area shape="rect" coords="259,124,374,144" href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=91763328">

<area shape="rect" coords="410,122,526,142"
href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=91763328">

<area shape="rect" coords="162,123,217,143"
href=" [url=http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=91763328">]http://collect.myspace.com/index.cfm?fusea...63328">[/url]

  <area shape="rect" coords="524,645,547,749"
href="http://home.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=91763328">

  <area shape="rect" coords="" href="http://home13.myspace.com/index.cfm?fuseaction=user.viewcomments&friendID=91763328" class="menusearch">

  <area shape="rect" coords="" href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=91763328" class="menusearch">
  </map>
</div>

<style type="text/css">
textarea.combox
{position: absolute; overflow: auto; z-index:3; width: 200px; height: 50px; left: 660px; top: 700px; border-width: 1px; border-style: solid; border-color: ffffff; font-family: small fonts; font-size: 7pt; text-transform: none; letter-spacing: 2pt; color: blue; background-color: transparent;}

input.combox
{position: absolute; z-index:3; left: 730px; top: 755px; border-width: 1px; border-style: solid; border-color: ffffff; font-family: small fonts; font-size: 7pt; text-transform: uppercase; letter-spacing: 1pt; color: blue; background-color: transparent;} </style>

<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="91763328" type="hidden"> <textarea name="f_comments" class="combox">MAKE YOUR MOVE</textarea> <br>

<input value="DANCE" type="submit" class="combox"></form>

<div class="scroll" style="position: absolute; left: 50px;  top:295px; width:450px; height:262px; overflow: auto;">

</div>

<style type="text/css">
a span{display:none;}
a:hover span {display: block;
position: absolute; top: 750px; left: 130px; width: 200px;
padding: 0px; margin: 0px; z-index: 6;
color: white; background: transparent;filter:none;
font-size: 10px;font-family: small fonts; text-align: left; text-decoration:none;}

.hidethem {visibility:visible; display:none;}
</style>

<a href="http://">ABOUT ME<span><img src="http://img.photobucket.com/albums/v27/flaymzofice/about.gif" width="100px"></span></a>

Really sorry for stretching out the page; I haven't figured out how to put codes here, in a scrollbox like Libertie does?