Printable View
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!
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>
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?
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
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!
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>.
One final note.Code:...
tdLink.innerHTML = strDesc;
...
ONMOUSEOVER = "changeText(desc1,'<b>This is link1</b>');"
...
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
Thank you! Your help is much appreciated!
Not trying to be negative, but I assume you're happy with IE specific code...
:o Sorry - I didn't read chris's post properly!!
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 :)
Use this:
Just pass a empty string for the second argument.Code:ONMOUSEOUT = "changeText(this,'');"
cheers mate :)