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

[*WHIMSICAL 0NE*]

Do you mean like this?
You can't use Javascript on myspace. The alternative could be using an alt code, but the only time I've used them is for links.

[flaymzofice]

The subject in question is exactly that being asked in this thread - http://www.createblog.com/forums/index.php?showtopic=141244. We're still trying to figure out a solution.

[clarity]

Hasn't this been asked before?
Flaymzofice beat me to it.

First, Wouldn't you be able to do that in flash?
And Second, When you hover over his, those are images.
Perhaps try using image rollovers?

[flaymzofice]

I did suspect he might be using images, because I could find his content text in his page source. But that seems more complicated and less easy to amend than this guy - http://www.myspace.com/airguitarest who just uses code to enable the same/similar effect. Is he using image rollovers? I didn't really understand his code. I tried hijacking purely for experimental purposes but couldn't get it to work.

[clarity]

He is, if you look in his code it shows you the div box and everything inputed in the div box from what I see is a image url.

[flaymzofice]

Okay, I probably have no idea what I'm talking about, but you can see his actual content in his source code. Or doesn't that mean anything? (my logic being that if it's an image url, then the content is typed out beforehand and saved as a jpeg then uploaded etc etc) And if it doesn't...well, how do we go about achieving the same effect?

[*WHIMSICAL 0NE*]

Okay guys, it's not a huge mystery. To do the whole rollover an image to show text try this.

In your About Me use this code:

CODE

<style>.NAME a {position:absolute; display: block; text-align: center; font: bold 1em sans-serif;
   z-index: 4;  top:XXXX; left:XXXXpx;  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;  top:XXXXpx; left:XXXXpx;
width: 250px; height: 200px;
color: black; background: none;
font: 8px Verdana; text-decoration:none; text-align: left;}</style>

Then, in your Who I'd like to Meet use this:

CODE

<div class="NAME>
<a href="http://"><img src="http://IMAGE"/><span><font color="000000">PUT ALL YOUR TEXT HERE</font></span></a>

[flaymzofice]

Lol, I think the miscommunication as to what we're trying to do, is lending this query an air of mystery. Just to be stupid, what kind of image needs to go in that div?

[*WHIMSICAL 0NE*]

Any image that you want. You can also change that code around so that it's text and when you hover it an image shows up. Or that it's an image and when you hover it another image shows up. You just have to play around with the code a bit.

That's the code you guys were talking about, no?

[flaymzofice]

I'm gonna try it now and let you know.

EDIT: Hmm, so, it kind of works and it kind of doesn't. I put any random image in just to see how the code itself works before inputting my exact values etc, but all I get is your standard image link. No rollover/hover over effect. I think I defined all the values so I'm not quite sure how to proceed now. I think I might try googling rollovers etc to save you guys some time.

[clarity]

^ I don't think its a link at all. I think Its just hovering over an image, changes the image. And it can also change the shape. Thats why theres an empty black space on the source's MySpace.

[flaymzofice]

OH! So...that <a href=""> business...that's supposed to be left blank, just to provide the hover effect which facilitates the appearance of the image/text?

[clarity]

^ I'm pretty sure that's correct. Or maybe you don't need it at all?

[*WHIMSICAL 0NE*]

^ Well, when I tried out the code I tried to remove the <a href=".... business but it ended up not working. But it won't effect the image because if you click on it it doesn't function like a link. I tried it out here. (even though it's just on top of the myspace, lol)

[clarity]

I don't see anything on that MySpace? Where'd you put it?

[*WHIMSICAL 0NE*]

Lol, there's a little blue bordered thing by the top friends.

[clarity]

^ Oh I see.

I think it works fine, what's wrong with it?

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

[spggodd]

Ah nice one, i see how hes done it now.

Im gonna use a rollover image and make the one that appears when you roll over a huge transparent thing up until the bit i want.. if i can be arsed!!