change text on text mouseover

Hey, I was now wondering if there is a way to make it so that when a user rolls over text, it will make text somewhere else on the page change. So for example, when a user rolls over “HW: Study” I would like “Default text” to change to “Explanation of assignment” Is it possible to do this with JavaScript or something? Thanks very much for your time.

Example:

HW: Study

Default text

it sure is.

ill give you the code you need.
here is the js code:

' Copyright © 2006, All rights reserved.
' Date Created: April 2006
'
' Last Modified Date: 17 May 2006
' Last Modified By: Christopher -> chris@massmedia.com.au
'
' DO NOT MODIFY THIS DOCUMENT WITHOUT
' NOTIFYING THE AUTHOR FIRST
'
------------------------------------------------*/
/* ***** Begin: GreyWyvern's Buffered Text-fade Effect - v2.2 ****** */
/* ***** Begin: GreyWyvern's Buffered Text-fade Effect - v2.1 ****** */
var fader = new Array(), fadeQ = new Array();
var RGB = new Array(256), k = 0, hex = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
for (var i = 0; i < 16; i++) for (var j = 0; j < 16; j++) RGB[k++] = hex[i] + hex[j];

function fadeObj(number, id, colOff, colOn, spdIn, spdOut, def) {
this.number = number;
this.id = id;
this.colOff = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)];
this.colOn = [parseInt(colOn.substr(0, 2), 16), parseInt(colOn.substr(2, 2), 16), parseInt(colOn.substr(4, 2), 16)];
this.colNow = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)];
this.spdIn = spdIn;
this.spdOut = spdOut;
this.def = def;
this.direction = false;
this.active = false;
this.message = new Array();
this.messageNow = 0;
}

function fadeCmd(number, message, direction) {
this.number = number;
this.message = message;
this.direction = direction;
}

function fade(number, message, direction) {
if (fader[number].def && fader[number].messageNow == 0 && fader[number].direction) {
fadeQ[fadeQ.length] = new fadeCmd(number, 0, false);
fadeQ[fadeQ.length] = new fadeCmd(number, message, direction);
message = 0;
direction = false;
} else fadeQ[fadeQ.length] = new fadeCmd(number, message, direction);
setTimeout("fadeBegin(" + number + ");", 20);
}

function fadeBegin(number) {
for (var x = 0; x < fadeQ.length; x++) {
for (var y = x + 1; y < fadeQ.length; y++) {
if (fadeQ[x].number == fadeQ[y].number && fadeQ[x].message == fadeQ[y].message && fadeQ[x].direction != fadeQ[y].direction) {
fadeQ.splice(x, 1);
fadeQ.splice(y - 1, 1);
}
}
}
if (!fader[number].active) {
for (var x = 0; x < fadeQ.length; x++) {
if (fadeQ[x].number == number && fadeQ[x].direction != fader[number].direction) {
var del = fadeQ.splice(x, 1);
setTimeout("fadeEng(" + number + ", " + del[0].message + ", " + del[0].direction + ");", 0);
break;
}
}
}
}

function fadeEng(number, message, direction) {
if (!fader[number].active) {
fader[number].active = true;
fader[number].direction = direction;
fader[number].messageNow = message;
document.getElementById(fader[number].id).innerHTML = fader[number].message[message];
}
var iniCol = (direction) ? fader[number].colOff : fader[number].colOn;
var endCol = (direction) ? fader[number].colOn : fader[number].colOff;
var incCol = fader[number].colNow;
var spd = (direction) ? fader[number].spdIn : fader[number].spdOut;
for (var x = 0; x < 3; x++) {
var incr = (endCol[x] - iniCol[x]) / spd;
incCol[x] = (incr < 0) ? Math.max(incCol[x] + incr, endCol[x]) : Math.min(incCol[x] + incr, endCol[x]);
}
document.getElementById(fader[number].id).style.color = "#" + RGB[parseInt(incCol[0])] + RGB[parseInt(incCol[1])] + RGB[parseInt(incCol[2])];
if (incCol[0] == endCol[0] && incCol[1] == endCol[1] && incCol[2] == endCol[2]) {
fader[number].active = false;
for (var x = 0; x < fadeQ.length; x++) {
if (fadeQ[x].number == number) {
var del = fadeQ.splice(x, 1);
setTimeout("fadeEng(" + number + ", " + del[0].message + ", " + del[0].direction + ");", 0);
return false;
}
}
if (!direction) {
if (fader[number].def) {
setTimeout("fadeEng(" + number + ", 0, true);", 0);
} else document.getElementById(fader[number].id).innerHTML = "&nbsp;";
}
} else setTimeout("fadeEng(" + number + ", " + message + ", " + direction + ");", 0);
}
/* ***** End: GreyWyvern's Buffered Text-fade Effect - v2.1 ******** */

fader[0] = new fadeObj(0, 'fade0', 'dddddd', '666666', 20, 20, true);
fader[0].message[0] = "";
/* Faded Text that appears for Mass E-Cards */
fader[0].message[1] = "Fading text for link one description<br />and then there is more text here";
fader[0].message[2] = "link two descrioption";
fader[0].message[3] = "And this is link three";
fader[0].message[4] = "Link four goes here";
fader[0].message[5] = "i think you get the point";
fader[0].message[6] = "blah";
fader[0].message[7] = "blah blah blah";
fader[0].message[8] = "Flash Games link description here";


here is the code you will need to put on your page
Where the text to be rolt over is located:
<div class="classNameHere" onmouseover="fade(0, 1, true);" onmouseout="fade(0, 1, false);"><a href="#" alt="#"/>&nbsp;<div class="arrowRight">&nbsp;</div>&nbsp;&nbsp;TEXT TO BE ROLLING OVER</a></div>
And Where you want the rollover text to appear.
<div class="classNameHere" id="fade0"></div>

give your class margins and padding if needed..

Thanks very much, but I'm a little confused. What exactly will that code do? I tried adding it to my page, but unfortunalty, it didn't work. I'm sorry, i'm a bit of a noob.

Maybe if I explain what I want to do a bit better. Ok, so on this page (http://dresden.us/~jessica_eakin/HanoverHigh/mediacenter.htm), you can see how if you mouse over the text for the online databases, the image to the right changes. This is all good, but I would like to make it so that it is text that changes, not an image.

I am making a calendar page, and I want users to be able to mouse over certain days, and then have some text change below to different text to give a more detailed explaination of the day.

Maybe I'm just confused, and that is infact what the above code does, but I just wanted to check. Thanks for the fast response.

[edit] I can post the source code for my page if you need it. Thanks!

that code will work for what you want. It even has a a faded effect to the text and is compatiable for older browsers too!

just try and make it work on a dummy page. You will be surprised how easy it is.

i've only gotten it to work with rolling over text, not an image. But im sure that wouldnt be a problem.

----
so theres three parts you will need.
one - the js code. (make sure u reference it in ur head tag)
two - the bit of code where you will be rolling over. and
three - the code (text) that appears on the mouseover.

Alright, so I'm trying to set up a dummy page, but I can't seem to get it to work. I'm sure I am just missing something really dumb. All I have on the page is the unmodified JS script, and then at the bottom is the other two lines of code, which I added to the <body> tags. Here is my page code:

<html>
<head>
<title>Calendar</title>

<script language="javascript">

' Copyright © 2006, All rights reserved.
' Date Created: April 2006
'
' Last Modified Date: 17 May 2006
' Last Modified By: Christopher -> chris@massmedia.com.au
'
' DO NOT MODIFY THIS DOCUMENT WITHOUT
' NOTIFYING THE AUTHOR FIRST
'
------------------------------------------------*/
/* ***** Begin: GreyWyvern's Buffered Text-fade Effect - v2.2 ****** */
/* ***** Begin: GreyWyvern's Buffered Text-fade Effect - v2.1 ****** */
var fader = new Array(), fadeQ = new Array();
var RGB = new Array(256), k = 0, hex = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
for (var i = 0; i < 16; i++) for (var j = 0; j < 16; j++) RGB[k++] = hex[i] + hex[j];

function fadeObj(number, id, colOff, colOn, spdIn, spdOut, def) {
this.number = number;
this.id = id;
this.colOff = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)];
this.colOn = [parseInt(colOn.substr(0, 2), 16), parseInt(colOn.substr(2, 2), 16), parseInt(colOn.substr(4, 2), 16)];
this.colNow = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)];
this.spdIn = spdIn;
this.spdOut = spdOut;
this.def = def;
this.direction = false;
this.active = false;
this.message = new Array();
this.messageNow = 0;
}

function fadeCmd(number, message, direction) {
this.number = number;
this.message = message;
this.direction = direction;
}

function fade(number, message, direction) {
if (fader[number].def && fader[number].messageNow == 0 && fader[number].direction) {
fadeQ[fadeQ.length] = new fadeCmd(number, 0, false);
fadeQ[fadeQ.length] = new fadeCmd(number, message, direction);
message = 0;
direction = false;
} else fadeQ[fadeQ.length] = new fadeCmd(number, message, direction);
setTimeout("fadeBegin(" + number + ");", 20);
}

function fadeBegin(number) {
for (var x = 0; x < fadeQ.length; x++) {
for (var y = x + 1; y < fadeQ.length; y++) {
if (fadeQ[x].number == fadeQ[y].number && fadeQ[x].message == fadeQ[y].message && fadeQ[x].direction != fadeQ[y].direction) {
fadeQ.splice(x, 1);
fadeQ.splice(y - 1, 1);
}
}
}
if (!fader[number].active) {
for (var x = 0; x < fadeQ.length; x++) {
if (fadeQ[x].number == number && fadeQ[x].direction != fader[number].direction) {
var del = fadeQ.splice(x, 1);
setTimeout("fadeEng(" + number + ", " + del[0].message + ", " + del[0].direction + ");", 0);
break;
}
}
}
}

function fadeEng(number, message, direction) {
if (!fader[number].active) {
fader[number].active = true;
fader[number].direction = direction;
fader[number].messageNow = message;
document.getElementById(fader[number].id).innerHTML = fader[number].message[message];
}
var iniCol = (direction) ? fader[number].colOff : fader[number].colOn;
var endCol = (direction) ? fader[number].colOn : fader[number].colOff;
var incCol = fader[number].colNow;
var spd = (direction) ? fader[number].spdIn : fader[number].spdOut;
for (var x = 0; x < 3; x++) {
var incr = (endCol[x] - iniCol[x]) / spd;
incCol[x] = (incr < 0) ? Math.max(incCol[x] + incr, endCol[x]) : Math.min(incCol[x] + incr, endCol[x]);
}
document.getElementById(fader[number].id).style.color = "#" + RGB[parseInt(incCol[0])] + RGB[parseInt(incCol[1])] + RGB[parseInt(incCol[2])];
if (incCol[0] == endCol[0] && incCol[1] == endCol[1] && incCol[2] == endCol[2]) {
fader[number].active = false;
for (var x = 0; x < fadeQ.length; x++) {
if (fadeQ[x].number == number) {
var del = fadeQ.splice(x, 1);
setTimeout("fadeEng(" + number + ", " + del[0].message + ", " + del[0].direction + ");", 0);
return false;
}
}
if (!direction) {
if (fader[number].def) {
setTimeout("fadeEng(" + number + ", 0, true);", 0);
} else document.getElementById(fader[number].id).innerHTML = "&nbsp;";
}
} else setTimeout("fadeEng(" + number + ", " + message + ", " + direction + ");", 0);
}
/* ***** End: GreyWyvern's Buffered Text-fade Effect - v2.1 ******** */

fader[0] = new fadeObj(0, 'fade0', 'dddddd', '666666', 20, 20, true);
fader[0].message[0] = "";
/* Faded Text that appears for Mass E-Cards */
fader[0].message[1] = "Fading text for link one description <br/> and then there is more text here";
fader[0].message[2] = "link two descrioption";
fader[0].message[3] = "And this is link three";
fader[0].message[4] = "Link four goes here";
fader[0].message[5] = "i think you get the point";
fader[0].message[6] = "blah";
fader[0].message[7] = "blah blah blah";
fader[0].message[8] = "Flash Games link description here";

</script>
</head>

<body>

<div class="fadeClass" onmouseover="fade(0, 1, true);" onmouseout="fade(0, 1, false);"><a href="#" alt="#"/>&nbsp;<div class="arrowRight">&nbsp;</div>Roll Over This Text</a></div>

<div class="fadeClass" id="fade0"></div>
</body>
</html>

<html>
<head>
</head>
<script>

function SwapText(id,txt){
document.getElementById(id).innerHTML=txt;
}
</script>
<body>

<span onmouseover="SwapText('Test1','REPLACED TEXT');" >Some Text</span>
<br>
<br>
<span id="Test1" >Start Text</span>
</body>
</html>

Hey thanks, that is exactly what I was looking for. Now, in order to replace the original text when I mouse out, I do this, right? Is there a way to do it with out having to type out the start text twice? If it's too complicated, don't bother.

<html>
<head>
</head>
<script language="javascript">

function SwapTo(id,txt)
{
document.getElementById(id).innerHTML=txt;
}

function SwapBack (id, txt)
{
document.getElementById(id).innerHTML=txt;
}

</script>

<body>

<span onmouseover="SwapTo('start1','This is the replacement text');" onmouseout="SwapBack('start1','Start Text');" >Mouseover This</span>
<br>
<br>
<span id="start1" >Start Text</span>

</body>
</html>

looks OK

or

<html>
<head>
</head>
<script language="javascript">

function SwapTo(id,txt){
var zxcobj=document.getElementById(id);
if (!zxcobj.oldtxt){ zxcobj.oldtxt=zxcobj.innerHTML; }
zxcobj.innerHTML=txt||zxcobj.oldtxt;
}


</script>

<body>

<span onmouseover="SwapTo('start1','This is the replacement text');" onmouseout="SwapTo('start1');" >Mouseover This</span>
<br>
<br>
<span id="start1" >Start Text</span>

</body>
</html>

which means that you can have different replacement text for different links always restoring to Original Text on MouseOut with minimal code

Thanks very very much, that works perfectly.