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]

Not sure if this got answered elsewhere, but if not, could somebody give us a reply here please, many thanks.

EDIT: Example here

[*WHIMSICAL 0NE*]

I don't think it's necessary to bring back a topic that's more than 6 months old. I'm assuming the topic started has figured it out, or else they would've bumped it.

[flaymzofice]

Oh okay, well...I haven't figured it out, so could somebody help me please? (I just figured I'd hijack this thread instead of wasting space starting a new one)

[moorepocket]

this is what he used, i guess.

CODE

.piclinks{height:15px;width:600px;position:absolute;top:375px;left:91px;}
.piclinks a {float:left;visibility:visible;height:15px;width:50px;background-image:url();
background-color: 636363;
margin-right:1px;}
.piclinks a img{z-index:9;border:1px; border-color: afd812; border-style: solid;
visibility:hidden;height:162px;width:320px;position:absolute;top:15px;left:-6px;}
.piclinks a:hover img{visibility:visible;}
.piclinks a:hover{margin-top:0px; border: 1px !important;
border-color: afd812 !important;
border-style: solid !important;}
.piclinks strong{float:left;height:12px;margin-right:5px;margin-top:4px;font-size:11px;font-weight:bold;font-variant:small-caps;}

<div class="piclinks">
<a href="http://i6.photobucket.com/albums/y203/funkl3/general2.jpg" title="General Info"><center>Basics<img src="http://i6.photobucket.com/albums/y203/funkl3/general2.jpg"></a>
<a href="http://i6.photobucket.com/albums/y203/funkl3/love2.jpg" title="<3"><3<img src="http://i6.photobucket.com/albums/y203/funkl3/love2.jpg"></a>
<a href="http://i6.photobucket.com/albums/y203/funkl3/music2.jpg" title="Music Info">Music<img src="http://i6.photobucket.com/albums/y203/funkl3/music2.jpg"></a>
<a href="http://i6.photobucket.com/albums/y203/funkl3/sports2.jpg" title="Sprots Info">Sports<img src="http://i6.photobucket.com/albums/y203/funkl3/sports2.jpg"></a>
<a href="http://i6.photobucket.com/albums/y203/funkl3/gamestab2.jpg" title="Games Info">Games<img src="http://i6.photobucket.com/albums/y203/funkl3/gamestab2.jpg"></a>
<a href="http://i6.photobucket.com/albums/y203/funkl3/random3.jpg" title="Random Info">Random<img src="http://i6.photobucket.com/albums/y203/funkl3/random3.jpg"></a>

</div>

[flaymzofice]

Okay, so to be really stupid, how do I adjust that to my layout? And exactly where would the source text go?

Here's my Myspace. Where there are 'About' 'FAQs' 'Basics' and 'Interests', I want them to be hover links but am not sure how I would go about coding it to do what the above layout does.

[flaymzofice]

So...any ideas anyone?

[anime-essence]

http://www.createblog.com/scripts/download.php?id=325

[protos]

what about when you hover over the image text actually shows up

like on this hall of famer

[moorepocket]

this is a toughie.

[anime-essence]

what about when you hover over the image text actually shows up

like on this hall of famer

^He used a method similar to a tutorial I made. It's just a fake image rollover. He used a header based image and created rollovers that were transparent before being hovered. See before the div or image is actually hovered, the background is set to transparent, but it is still linked, so the background url appears when hovered. Please follow or modify my tutorial.
http://www.createblog.com/tutorials/download.php?id=575

[flaymzofice]

Oh I didn't think to look in tutorials but yeah, you're right, requires patience I don't have right now but thanks for that link Ricky; it looks like what I'm after - a dummy's step by step guide to rollovers. Will let you know how it goes after this essay gets done.

[protos]

ok I "think" I understand how to do what you said. I understand how to do it work with images (and picture of text).

but does that work with actual text?

airguitarest (the hall of famer) did it with actual text

[anime-essence]

^Holly's script should give you a basic outline. I think you might need to add text in place of the image that appears. I believe her script should solve your problem.

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

[flaymzofice]

Any ideas anyone?

[flaymzofice]

Sorry for triple posting but still no clue why this isn't working for me

[*WHIMSICAL 0NE*]

Maybe your image map is making it show up behind the layout?

Have you used something like this in the about me:

CODE

<style>
.NAME a {position:absolute; display: block; text-align: center; font: bold 1em sans-serif;
   z-index: 4; left:50%; top:0%; margin-left:150px; margin-top: 530px; border-width: 0;
   text-decoration: none; color: FFFFFF; background: none;
   border-right: 0px;}
.NAME a:hover {color: FFFFFF; background: none; text-decoration:none;
   border-right: 0px double white;}
.NAME a span {display: none;}
.NAME a:hover span {display: block;
   position:absolute; z-index: 4; left:50%; top:0%;
   margin-left:-310px; margin-top: -100px;
   width: 247px; height: 200px;
   color: black; background: none;
   font: 10px Verdana, sans-serif; text-decoration:none; text-align: left;}
</style>

And then in the Who I'd like to Meet:

CODE

<div class="NAME">
<a href="http://"><img src="http://IMGTOROLLOVER"/><span><font color="000000">
CONTENT </font></span>
</div></a>

And only change the stuff in caps?

I'm not very good at doing this, because I don't use them. So I'm sorry for not being a big help.