Mouse over table pop up

[MitchEvans]

I have an image (button) and when people hover over the image I would like a table to appear. When the mouse is moved away from the button I want the table to not appear
An ideas hot to do this? Would be chuffed for all your help!

<img src="img.jpg">

[ednark]

There is a way to do this will just css.. but i will skip that for a clearer solution

You can do this with javascript : you need to attach a function to the mouse over/out events of the html tag. here is one way


<img src="img.jpg"
onMouseOver="javascript:turnOnTable()"
onMouseOut="javascript:turnOffTable()" />


now you will need to write javascript functio which will show your table

function turnOnTable()
{
var table = document.getElementById('tableID')
table.style.display = '' /// blank is default which mean on
}
function turnOffTable()
{
var table = document.getElementById('tableID')
table.style.display = 'none' /// none means off
}

[JPnyc]

Or this:

function toggleOn(state) {

document.getElementById('tableID').style.display=state;

}

Then your call will look like:


<img src="img.jpg"
onmouseover="toggleOn('block')"
onmouseout="toggleOn('none')"/>

[MitchEvans]

Hey ednark i'm trying your way!
How do i get the following to work now then, as the code below doesn't work unfortunately.

<script language="javascript">
function turnOnTable()
{
var table = document.getElementById('tableID')
table.style.display = '' /// blank is default which mean on
}
function turnOffTable()
{
var table = document.getElementById('tableID')
table.style.display = 'none' /// none means off
}
</script>
<img src="housekeeping.jpg" onMouseOver="javascript:turnOnTable()"
onMouseOut="javascript:turnOffTable()">

[cahva]

Did you give id for your table? In this case the id should be "tableID".

<table id="tableID" ...