Hi there,
I have a menu with 4 links and 4 images associated with them. By default, the image from link 1 is displayed on the page. I would like to change the image with its corresponding one, each time i mouseover one of the other three links.
I'm trying to make the following code work unsuccesfully, i might be missing something. Any help will be appreciated.
In the <head> section i have this:
<script type="text/javascript">
img1 = new Image();
img1.src = "images/party/party.jpg";
img2 = new Image();
img2.src = "images/party/icecream.jpg";
img3 = new Image();
img3.src = "images/party/juice.jpg";
img4 = new Image();
img4.src = "images/party/videogames.jpg";
function change(num){
document.images["linkpic"].src = "img" + num
}
</script>
</head>
In the <body> i have:
That's my default image
<table>
<tr>
<td width="100">
<img src="images/party/balloon1.jpg" name="linkpic">
</td>
<td width="260" valign="top" align="left">
<table>
<tr><td><a href="Party1.html" onmouseover="change('1')">Party and Fun</a></td></tr>
<tr><td><a href="Party2.html" onmouseover="change('2')">Icecream
</a></td></tr>
<tr><td><a href="Party3.html" onmouseover="change('3')">Juice </a></td></tr>
<tr><td><a href="Party4.html" onmouseover="change('4')">Video Games
</a></td></tr>
</table>
</tr>
</table>
</body>
I would like when i point to Icecream, the picture on the left to change to the Icecream picture and so on.
Any hints and help are appreciated!
Thanks!
