Text Rollover-type code [Archive]

00XxXxX00

03-16-2003, 01:43 AM

OK, on my site www.riskate.tk (http://geocities.com/riwskate/home) You see the Navigation on the left? Well, I want it so when you put your mouse over one of the catagories, that text (just simple white text) Pops up on the right side of the screen(under the marquee), (shortly) summarizing the toping. For example, you put your mouse-over Ri Skate Photos, then on the right it will say --see us in action--

Is this possible? Any help would be awesome. And thanks to you guys, have helped me alot through getting my site together, so thank for all the help!

00XxXxX00

03-16-2003, 03:22 AM

Does nobody know?

redhead

03-16-2003, 09:42 AM

try this... the code is probably abit bloated... but i never was the best javascripter on the planet... ;)

<script>
var changelayer;
function change_message(message){
if(document.layers){ // for NN4
changelayer = document.layers["description"];
changelayer.document.open();
changelayer.document.write(message);
changelayer.document.close();
}
if(document.all){ // for IE
changelayer = document.all["description"];
changelayer.innerHTML=message;
}
if(!document.all && document.getElementById){ // for NN6
changelayer = document.getElementById("description");
changelayer.innerHTML=message;
}
}

</script>

<div id="description">Mouse over one of the links to change me</div>

<a href="#" onmouseover="change_message('Boo!')" onmouseout="change_message(' ')">Move your mouse here</a>
<a href="#" onmouseover="change_message('Hmm...')" onmouseout="change_message('...mmH')">Pleh</a>
:thumbsup:

00XxXxX00

03-16-2003, 12:22 PM

Thanks alot once again. But, how do i get the text that pops up to be white and not black colored text? Here is my code so far.

<script>
var changelayer;
function change_message(message){
if(document.layers){ // for NN4
changelayer = document.layers["description"];
changelayer.document.open();
changelayer.document.write(message);
changelayer.document.close();
}
if(document.all){ // for IE
changelayer = document.all["description"];
changelayer.innerHTML=message;
}
if(!document.all && document.getElementById){ // for NN6
changelayer = document.getElementById("description");
changelayer.innerHTML=message;
}
}

</script>

<html>
<head>
<style type="text/css"></style>
</head>

<body bgcolor="#000000">
<div id="description"><font color="#FFFFFF">Go Skateboard</font></div><div align="left"> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="190" height="1"> <tr> <td width="222" height="1" bgcolor="#111111" bordercolor="#333399"> <p align="left"><font color="#FFFFFF" face="CheckFontMedExt"><center><img src="image2.gif" width="170" height="32"></center></font></td> </tr> </table></div><div align="left"> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#006699" width="190" height="216" bgcolor="#111111"> <tr> <td width="190" height="216"> <font face="Verdana" size="2" color="#FFFFFF"><center><a href="http://www.geocities.com/riwskate/ourpics" onmouseout="change_message(' ')" onmouseover="change_message('See The Team in Action')">.::RI Skate Photos::.</a><br>
<a href="http://www.geocities.com/riwskate/rifootage" onmouseover="change_message('See Our Latest Moves on Film')" onmouseout="change_message(' ')">.::RI Skate Footage::.</a>
<a href="http://www.geocities.com/riwskate/prophotos" onmouseover="change_message('See the best Pros Tear it Up')" onmouseout="change_message(' ')">.::Professional Footage::.</a><br>
<a href="http://www.geocities.com/riwskate/skaterisland" onmouseover="change_message('See RIs local Skatepark')" onmouseout="change_message(' ')">.::Skater Island Footage::.</a><br>
<a href="http://www.geocities.com/riwskate/tricktips" onmouseover="change_message('Learn some Tricks from the Team')" onmouseout="change_message(' ')">.::RI Skate Tricktips::.</a><br>
<a href="http://www.geocities.com/riwskate/protips" onmouseover="change_message('Learn from the Pros')" onmouseout="change_message(' ')">.::Professional Tricktips::.</a><br>
<a href="http://www.geocities.com/riwskate/skatespots" onmouseover="change_message('Rhode Islands best Locations')" onmouseout="change_message(' ')">.::Spot Check::.</a><br>
<a href="http://www.geocities.com/riwskate/ourprofiles" onmouseover="change_message('Get to know the Team')" onmouseout="change_message(' ')">.::RI Skater Profiles::.</a><br>
<a href="http://www.geocities.com/riwskate/skateboardinglogos" onmouseover="change_message('Some cool Graphics')" onmouseout="change_message(' ')">.::Skateboarding Logos::.</a><br>
<a href="http://www.geocities.com/riwskate/latestnews" onmouseover="change_message('Latest news in the Skate World')" onmouseout="change_message(' ')">.::Latest News::.</a><br>
<a href="http://www.geocities.com/riwskate/rampplans" onmouseover="change_message('Want your own ramp? Learn how')" onmouseout="change_message(' ')">.::Ramp Plans::.</a><br>
<a href="http://www.geocities.com/riwskate/latestevents" onmouseover="change_message('This Months Outlook')" onmouseout="change_message(' ')">.::Coming Events::.</a><br>
<a href="http://skateri.proboards14.com/index.cgi" onmouseover="change_message('Interact with other Skaters')" onmouseout="change_message(' ')">.::Message Boards::.</a><br>
<a href="http://www.geocities.com/riwskate/skat" onmouseover="change_message('Chatroom')" onmouseout="change_message(' ')">.::Skate Lounge::.</a><br></center></font>
<center><a href="http://www.geocities.com/riwskate/submitform" onmouseover="change_message('Have something you want to share?')" onmouseout="change_message(' ')"><font face="Verdana"><font size="2">.::Submit
Info::</font><font size="3">.</font>
</font></a><font size="3"><br></font>
</center>
</td> </tr> </table></div><div align="left">
</body>

00XxXxX00

03-16-2003, 12:30 PM

Ok, i added <background="#000000" font="#FFFFFF"> at the top and </font> and </bpdy> at the very bottom. But go to my site, and look at the nav bar and rollyour mouse over the links. It still wont work.

redhead

03-16-2003, 01:51 PM

00XxXxX00

03-16-2003, 02:36 PM

Ok thanks, that worked great, now would there be a code so i could get the text on the right side of the screen, instead of right above my navigation table? Would the <p align="right">stuff</p> work?

THANKS

Chris