making images show up on mouse rollover?, myspace div overlay layout Options

[hrypotrfreek2707]

how can i make it so when you roll over the link, a picture or something will show up next to it?

like first you see


then when you roll over it with the mouse you see



layout code if it helps:

CODE

<style>
.n{ HIDE STUFF }
.userProfiledetail, .userProfileURL, .userProfileSchool,
.interestsAndDetails, .friendsComments,.extendedNetwork,
.latestBlogEntry, .friendSpace, .orangetext15, .navigationbar, .profileInfo, .contacttable { display:none;}
a.text, table div font a, table div div {visibility:hidden;}
table tr td div font {display: none;}
body div table td form {display:none!important;}
table, td, tr{ background-color:transparent;}
object, embed{ width:0px; height:0px;}
body div td div div select {width:0px !important;}
</style>



<style>

body {
background-color: black;
background-image: url("http://i39.tinypic.com/24pm32h.jpg");
background-position: top left;
background-repeat:repeat;
background-attachment: fixed;
scrollbar-arrow-color:red;
scrollbar-track-color: silver;
scrollbar-shadow-color: maroon;
scrollbar-face-color:black;
scrollbar-highlight-color:white;
scrollbar-darkshadow-color:;
scrollbar-3dlight-color:;}

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: 0px solid; border-color: ######; background-color: ######; }

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

{class for the basic font for the page}
.text {font:normal 16px helvetica; color:black; font-weight:none; border:0px; text-transform: none; line-height:90px;}

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

{style for the number of friends you have.}
.redbtext{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{”Blurbs”, “About Me”, “Who I’d like to Meet”, “Friend Space”, and “Friend’s Comments” style}
.orangetext15{font-family: arial; color: white; font-weight: bold; font-size: 5px; letter-spacing: -2px;}

{”General”, “Music”, “Movies”, “Television”, “Books”, “Heros”, “Status”, “Here for”, “Hometown”, “Body Type”, “Ethnicity”, “Religion”, “Sign”, “Smoke/Drink”, “Children”, “Education”, “Occupation”, and “Income” title style}
.lightbluetext8{font-family:arial; font-size:5px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{”Contacting”, “Interests”, “Details”, and “Schools” title styling}
.whitetext12{font-family:arial; font-size:5px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{”In your extended network” style}
.blacktext12{font-family: arial; color: ######; font-weight: bold; font-size: 20px; letter-spacing: -2px; }

{Stylizing of your name above your picture }
.nametext{font-family: arial; color: ######; font-weight: bold; font-size: 30px; letter-spacing: -3px; line-height: 35px;}

{date stamp on comments}
.blacktext10{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

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

{”View all friends” and “invite more” link style}
a.redlink{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }
a.redlink:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar: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:14px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase; letter-spacing: 0px;}
a:active{font-family:Arial; font-size:10px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:Arial; font-size:10px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:Arial; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: lowercase;}

{bolded words}
.standard b, p b, B, strong {
font-family:arial; font-size:14px; color:maroon; font-weight:none;border:0px; text-transform:; }


u, s, .stext, .sbtext, .swtext {
font-family: arial;
color: red;
text-transform:none;}
</style>



<div class="bg" style="position: absolute; left:150px; top:140px; width:1000px; height:900px; overflow: hidden;">
<img src="http://i42.tinypic.com/5d44ef.jpg" usemap="#k" border="0" />
<map name="k">
<area shape="rect" coords="57,27,177,76" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" alt="" title="" />
<area shape="rect" coords="787,26,975,81" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=11794268" alt="" title="" />
<area shape="rect" coords="22,422,210,474" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=11794268" alt="" title="" />
<area shape="rect" coords="796,429,984,482" href="http://www.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=11794268" alt="" title="" />
</map>
</div>