Click to See Complete Forum and Search --> : Mouse over on Table Text
bradharding
03-12-2003, 11:34 AM
Help !
I'm new to Javascript and having trouble finding this one in the Forum and various sites. This one is probably easy for you seasoned programmers. I'm looking for a script and how to apply to the webpage that will allow several paragraphs of text (all different) during a mouseover in table text - to display in a dynamic box. This needs to occur on several tabled columns of various text on the web page.
Should the text be placed in an external .txt file, or would it be better to just include it in the html document.
Thanks in advance,
BH
Try this:
<html>
<head>
<title>Table rollover</title>
<script language="javascript" type="text/javascript">
function addText(val)
{
oldval = document.getElementById("message").innerHTML;
document.getElementById("message").innerHTML = val;
}
function removeText()
{
document.getElementById("message").innerHTML = oldval;
}
</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td><a href="#" onmouseover="addText('Message 1');" onmouseout="removeText();">test</a></td>
</tr>
<tr>
<td><a href="#" onmouseover="addText('Message 2');" onmouseout="removeText();">test2</a></td>
</tr>
<tr>
<td id="message">Default Text</td>
</tr>
</table>
</body>
</html>
bradharding
03-12-2003, 12:08 PM
Pyro,
Thanks for the quick response. I was looking for something that would bring up a dynamic box of text (several paragraphs) to the right of the table text (Table data is on the left side of the page) during the mouseover. This would give a description of that object. Would be nice if you could adjust fonts, colors, size, possibly location, etc. Not a box that is tabled on the web page.
BH
Try this, then:
<html>
<head>
<title>Table rollover</title>
<script language="javascript" type="text/javascript">
function addText(val)
{
oldval = document.getElementById("message").innerHTML;
document.getElementById("message").innerHTML = val;
}
function removeText()
{
document.getElementById("message").innerHTML = oldval;
}
</script>
</head>
<body>
<table width="150" border="1">
<tr>
<td width="80"><a href="#" onMouseOver="addText('Message 1 and a link<br><span style=\'color:blue\'>blue text</span>');" onMouseOut="removeText();">test</a></td>
</tr>
<tr>
<td><a href="#" onMouseOver="addText('<b>Message 2<b>');" onMouseOut="removeText();">test2</a></td>
</tr>
</table>
<div id="message" style="position:relative; left: 200; top: -35;">Default Text</div>
</body>
</html>
bradharding
03-13-2003, 08:57 AM
Pyro,
Appreciate the additional suggestion.
The example you placed is getting closer to the mark.
I'm going to study the script, test it and see if this
will be the solution.
You've been great ! Thanks !
Any additional suggestions out there would be much obliged.
I'm a neophyte and trying to crash course myself in Javascript.
Regards,
BH
bradharding
03-14-2003, 02:01 PM
Pyro,
I noticed that the default text stays on. Is there a code to have no text until you mouse over the different text in the table. This would work. Another cool look would be to have a floating window (desired color and font) that follows your mouse cursor around the screen and allows you to fill it with as much text as you desire.
BTW
I was tracking your responses to the person that was looking for password access. I need this also in the near future and copied the code. The old adage, "Two Birds with one stone"
Thanks again,
BH
Another cool look would be to have a floating window
(desired color and font) that follows your mouse cursor
around the screen and allows you to fill it with as much text
as you desire.
What exactly do you mean by a "floating window"?
Originally posted by bradharding
Is there a code to have no text until you mouse over the different text in the table.Just remove the text that is in the div...
Originally posted by bradharding
I need this also in the near future and copied the code. The old adage, "Two Birds with one stone"
...lol :D
Check if this is what you mean by floating window: http://forums.webdeveloper.com/showthread.php?s=&threadid=5940
bradharding
03-14-2003, 03:02 PM
Jona,
Yes,
A boxed or unboxed window of text (several paragraphs if necessary) that when you move your mouse across the screen it sticks with your move. The next mouse over "tabled text" would bring up another text box. These boxes will contain descriptions.
Pyro,
You've struck a chord ! You have been awesome! Can't tell you how much I've appreciated your help and promptness.The block element examplehttp://klproductions.com:8080/KLTooltipsDemo.html (http://) is right on. This is exactly what I'm looking for. The floating thing is not absolutley necessary, but I thought it would look slick!
Now I just have to study all this and get familiar with the script. See you in a week. :D
P.S. Pyro, Your Avatar is a little scary :D I hope you are not related to Mothman!
BH