I have a similar problem to this...here is where I am so far ('tis basic as I'm just testing, but I'm crap at JavaScript anyway!):
http://www.btinternet.com/~himh/rms/test2.html
Eventually I'll have about five different images, and want a different date displaying in the table cell for each image. Do I need to write a separate function for each or is there a better way (ie less code) of doing it?
Thanks.
Is this what you want:
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>change date</title>
<script type="text/javascript">
<!--
function showdate(logo, date)
{
logo.src="http://www.publicservice.co.uk/events/image_over.gif";
document.getElementById("date").style.display="inline";
document.getElementById("date").innerHTML=date;
logo.onmouseout=function()
{
logo.src="http://www.publicservice.co.uk/events/image.gif";
document.getElementById("date").style.display="none";
document.getElementById("date").innerHTML="none";
}
}
-->
</script>
</head>
<body>
<table border="1" name="banner">
<tr>
<td>
<a href="http://www.publicservice.co.uk/events/">
<img src="http://www.publicservice.co.uk/events/image_red.gif" onMouseOver="showdate(this, '23rd Nov, 2006')" /></a>
<a href="http://www.publicservice.co.uk/events/">
<img src="http://www.publicservice.co.uk/events/image.gif" onMouseOver="showdate(this, '26th Nov, 2006')" /></a>
</td>
</tr>
<tr>http://www.publicservice.co.uk/events/
<td> <div id="date"></div>
</td>
</tr>
</table>
</body>
</html>
[/html]
I just added a new argument for the showdate function called date. Whenever you call this function you will also specify the date which would be shown in table cell using innerHTML.