Hovering Over Text to change stuff Options

[spggodd]

Ok, im trying something different this time with my layout

im at http://www.myspace.com/spggodd2

What i wanna do if make a table on the side with about me, music ect.. and when i hover over the text i want it to display the information required in the form of an image.

Can i do this in HTML??

Thanks

Steeeve x

Example :

http://www.myspace.com/funkl3

[flaymzofice]

Um...the text doesn't show up on rollover...? When I was just trying out how the image/a href stuff worked, and left out <span> etc, I could see the text. It wasn't where I wanted it tto be, but it showed up. As soon as I put <span> in, the text just, well, disappears and I don't know what's happened to it.

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; }

.ME a {position:absolute; display: block; text-align: center; font: bold 1em sans-serif;
   z-index: 4; left:50%; top:0%; left:37px; top: 571px; border-width: 0;
   text-decoration: none; color: FFFFFF; background: none;
   border-right: 0px;}
.ME a:hover {color: FFFFFF; background: none; text-decoration:none;
   border-right: 0px double white;}
.ME a span {display: none;}
.ME a:hover span {display: block;
   position:absolute; z-index: 4; left:50%; top:0%;
   left: 37px; margin-top: 580px;
   width: 250px; height: 150px;
   color: black; background: none;
   font: 10px Verdana, sans-serif; text-decoration:none; text-align: left;}

</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/myspacev4copy2.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=" http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=91763328">

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

Who I'd Like To Meet

CODE

<div class="ME"> <a href="http://"><img src="
http://img.photobucket.com/albums/v27/flaymzofice/about.gif"/><span><font color="ffffff">
TEXT </font> </span> </a> </div>