javascript mouseover - change one image several times

leeolive · Jan 26, 2004

Hi

There *must* be a way to do this...I just can't get my head around it.

I have four buttons and one big image below the buttons. When I mouseover the buttons one at a time, the image below changes depending on the button I am moving over. I cannot use div's - the buttons and big image are within a table and i need to keep it this way.

Anyone have any idea how I can do this?

Thanks.
Lee

BillyRayPreachersSon · Jan 26, 2004

Lee,

This will do the job:

Code:

<html>
<head>
<script language=&quot;javascript&quot;>
<!--
	function changeImage(buttonNumber)
	{
		document.getElementById('bigImage').src = 'myImage' + buttonNumber + '.gif';
	}
//-->
</script>
</head>
<body>

<table width=&quot;75%&quot; border=&quot;1&quot;>
<tr>
	<td><input type=&quot;button&quot; value=&quot;Button 1&quot; onMouseOver=&quot;changeImage(1);&quot;></td>
	<td><input type=&quot;button&quot; value=&quot;Button 2&quot; onMouseOver=&quot;changeImage(2);&quot;></td>
	<td><input type=&quot;button&quot; value=&quot;Button 3&quot; onMouseOver=&quot;changeImage(3);&quot;></td>
	<td><input type=&quot;button&quot; value=&quot;Button 4&quot; onMouseOver=&quot;changeImage(4);&quot;></td>
</tr>
<tr>
	<td colspan=&quot;4&quot;><img id=&quot;bigImage&quot;></td>
</tr>
</table>

</body>
</html>

Assuming, of course, your images are named myImage1.gif, myImage2.gif, myImage3.gif, and myImage4.gif - although the code is easily changed.

Hope this helps!

Dan

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

javascript mouseover - change one image several times

leeolive

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor