How does Mouseover work?

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

OK...I'm hoping this is an easy one...I have 5 rows of text, for example,
let's say row one is dog, row 2 is cat, row 3 is rat, row 4 is snake and row
5 is turtle. When the pointer or cursor rolls over one of these text items, I
would like a description of the item to appear in the same text box located
on the page. That is, I do not just want a tooltip to appea. Instead, no
matter which item in the list the pointer passes over, I want the description
to appear in the same place in a box on the page. I cannot figure this out.

Your help is always appreciated,

-Dan
 
Dan,
The mouseover works when certain items have the mouse pointer moved
over them. This triggers an onMouseOver event. The onMouseOver is not
supported by every element in HTML. The anchor (<a>) element does support
it, for example, but the <font> element itself does not. Some browsers may
offer additional support, but it won't work in all browsers. You may have to
make the text into an anchor and point it to # instead of an actual page
(forcing the page to refresh instead of going somewhere else in case they
click on it). You'll then need to call a javascript function in the
onmouseover event for each link. The method will probably need to have a
string passed to it representing the description you want to set for each
item. Then the javascript function can change the textbox value to whatever
the string is. You may want an onMouseOut event to call this javascript
funciton as well, but pass an empty string to it so that the description
dissappears from the textbox when the user moves off the item thus keeping
things tidy.

Hope this helps,
Mark Fitzpatrick
Microsoft MVP - FrontPage
 
Thank you Mark. Do you have an example of the coding required for what you
are suggesting? I am a beginner.
 
dan_the_man said:
Thank you Mark. Do you have an example of the coding required for
what you are suggesting? I am a beginner.
Click to expand...

I am not Mark, but would this help.
It is code I put together for a previous query which was very similar.

When an item is moused over a description appears on the right.

<html>
<head>

<meta name="Author" content="Trevor Lawrence"/>
<meta http-equiv="Content-Language" content="en-au"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<script type="text/javascript">
function hideit(elid,hide)
{
if (hide != "show")
document.getElementById(elid).style.display="none"
else
document.getElementById(elid).style.display="block"
}
</script>
</head>
<body>

<div style="float:left">
<table>
<tr>
<td valign="top" onmouseover="hideit('row1','show')"
onmouseout="hideit('row1','hide')">
Item 1
</td>
</tr>

<tr>
<td valign="top" onmouseover="hideit('row2','show')"
onmouseout="hideit('row2','hide')">
Item 2
</td>
</tr>
</table>
</div>

<div>
<table border="1">
<tr>
<td id="row1" style="display:none">
Item 1 Full description<br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
</td>
<td id="row2" style="display:none">
Item 2 Full description<br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
</td>
</tr>
</table>
</div>

</body>
</html>
 
Back
Top