mouseover showing a picture, then off with mouseout

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

Guest

I would like to have a button that when the mouse goes over it a picture of
the items comes up like in Open Browser, but will go off when the mouse
leaves the button
 
hawk1_1 said:
I would like to have a button that when the mouse goes over it a
picture of the items comes up like in Open Browser, but will go off
when the mouse leaves the button
Click to expand...

This code may do something similar
<html>
<head><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>

When you mouse over an entry a list comes up on the right.

You can change this to only one item if you want and change the cell from
<td valign="top" onmouseover="hideit('row1','show')"
onmouseout="hideit('row1','hide')">Item 1</td>
to
<td> <button onmouseover="hideit('row1','show')"
onmouseout="hideit('row1','hide')" />Select Me</td>
to get a button rather than text
 
Back
Top