OnMouseOver Change Text

**Zaphod64831** · Jul 27th, 2001, 06:33 PM

Ok, I have no idea whatsoever how to do this, so please be thorough with any instructions.

On the left, I have a navbar, it has a list of several objects in it. What I want is when the user hovers over an object a table cell filled with text changes to fill with a description of that object. The text stays there even when the user moves the mouse off of the object but will change when the user hovers over a different object.

Sounds simple, help me out guys!

**Psyrus** · Jul 27th, 2001, 08:05 PM

Try this:

Code:

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

<script LANGUAGE = "JavaScript">

var curCell;

function changeText(tdLink,strDesc){

if(curCell){
curCell.nextSibling.innerText = '';
}
tdLink.nextSibling.innerText = strDesc;
curCell = tdLink;

}//end function
</script>

</head>
<body>
<table>
<tr>
<td NAME = "link1" ONMOUSEOVER = "changeText(this,'This is link1');">Link # 1</td>
<td NAME = "desc1"></td>
</tr>
<tr>
<td NAME = "link2" ONMOUSEOVER = "changeText(this,'This is link2');">Link # 2</td>
<td NAME = "desc2"></td>
</tr>
</table>
</body>
</html>

**Zaphod64831** · Jul 27th, 2001, 08:26 PM

This is almost exactly what I'm looking for, thank you. I have one problem though, can you make it so it will change the text in a certain named cell?

**Psyrus** · Jul 27th, 2001, 08:44 PM

Similar to the above:

Code:

...

<script LANGUAGE = "JavaScript">

var curCell;

function changeText(tdLink,strDesc){

if(curCell){
curCell.innerText = '';
}
tdLink.innerText = strDesc;
curCell = tdLink;

}//end function
</script>

...

<table>
<tr>
<td NAME = "link1" ONMOUSEOVER = "changeText(desc1,'This is link1');">Link # 1</td>
<td ID = "desc1"></td>
</tr>
<tr>
<td NAME = "link2" ONMOUSEOVER = "changeText(desc2,'This is link2');">Link # 2</td>
<td ID = "desc2"></td>
</tr>
</table>

...

Chris

**Zaphod64831** · Jul 27th, 2001, 11:49 PM

Thank you VERY much for your help. Unfortunately I found one more thing I need changed, I came across it earlier and I'm not sure if it's possible in javascript, but is there a way to make the browser format any HTML in the strDesc? It's basically an optional thing, but it would be much appreciated...

Thanks again!

**Psyrus** · Jul 28th, 2001, 07:53 PM

Instead of using innerText use innerHTML.
Any string passed to innerHTML will be rendered as HTML
meaning that you can use any HTML text formatting tags such as <b> and <i>.

Code:

...
tdLink.innerHTML = strDesc;
...
ONMOUSEOVER = "changeText(desc1,'<b>This is link1</b>');"
...

One final note.
This is an IE feature. I'm pretty positive that Netscape doesn't support these properties. So if that is an issue you'll have to find another way.

Chris

**Zaphod64831** · Jul 29th, 2001, 03:59 PM

Thank you! Your help is much appreciated!

**benski** · Aug 1st, 2001, 09:36 AM

Not trying to be negative, but I assume you're happy with IE specific code...

**benski** · Aug 1st, 2001, 09:38 AM

Sorry - I didn't read chris's post properly!!

**zmerlinz** · Aug 4th, 2001, 03:36 AM

i am using this code now, but is there a way to modify the code so that when the mouse moves off of the text that the information dissapears ??

cheers

**Psyrus** · Aug 4th, 2001, 07:45 AM

Use this:

Code:

ONMOUSEOUT = "changeText(this,'');"

Just pass a empty string for the second argument.

**zmerlinz** · Aug 4th, 2001, 11:46 AM

cheers mate

Thread: OnMouseOver Change Text

Thread Tools

Display

OnMouseOver Change Text

Posting Permissions