Image onmouseover function

HubridNoxx · 08-29-2010, 08:42 PM

I have six small images. Depending on which image a user hovers over, I would like a seventh image (a simple box) to change as well.

For example, if a user hovers over image1, I want the seventh image to be a red box.

If a user hovers over image2, the seventh image should be a blue box.

Simple huh? So the seventh image changes color based on which of the six smaller images the user hovers over.

-------------
So far, my current code only allows me to hover over any of the six images, and the seventh image always changes to the same image color. Code is below. Any help would be appreciated.

Code:

		<script type="text/javascript">
			function hoverBox() {
				var boxNumber;
				
				document.getElementById("info").src = "Images/infoRedColor.png";
			}
			
			function hoverBoxOut() {
				document.getElementById('info').src = "Images/info.png;"
			}
			
		</script>
	</head>
	<body>
	<div id="wrapper">

		<a href=""> <img class="box1" src="Images/box1.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box1.png'; hoverBoxOut()" ></a>
		<a href=""> <img class="box2" src="Images/box2.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box2.png'; hoverBoxOut()"></a>
		<a href=""> <img class="box3" src="Images/box3.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box3.png'; hoverBoxOut()"></a>	
		<a href=""> <img class="box4" src="Images/box4.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box4.png'; hoverBoxOut()"></a>
		<a href=""> <img class="box5" src="Images/box5.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box5.png'; hoverBoxOut()"></a>
		<a href=""> <img class="box6" src="Images/box6.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box6.png'; hoverBoxOut()"></a> 

<!-- Seventh Image -->
		<img id="info" src="Images/info.png" border="0">

	</div>
		
		
		
	</body>

Old Pedant · 08-29-2010, 09:34 PM

Is this homework???

Feels like it. But oh, well.

Let's keep it *REAL* simple:

Code:

<html>
<head>
<script type="text/javascript">
var saveImage = null;
function hoverBox(box) 
{
    saveImage = box.src;
    box.src = "'Images/box1hov.png";
    document.getElementById("info").src = "Images/Info" + box.id + "Color.png";
}
function hoverBoxOut() 
{
    document.getElementById('info').src = "Images/info.png;"
    box.src = saveImage;
}
</script>
<style>
div#wrapper img {
    border: none;
    /* any other styles? */
}
</style>
</head>
<body>
<div id="wrapper">
<img id="Red" src="Images/box1.png"
     onmouseover="hoverBox(this);" onmouseout="hoverBoxOut(this);"/>
<img id="Blue" src="Images/box2.png"
     onmouseover="hoverBox(this);" onmouseout="hoverBoxOut(this);"/>
<img id="Green" src="Images/box3.png"
     onmouseover="hoverBox(this);" onmouseout="hoverBoxOut(this);"/>
<img id="Orange" src="Images/box4.png"
     onmouseover="hoverBox(this);" onmouseout="hoverBoxOut(this);"/>
<img id="Purple" src="Images/box5.png"
     onmouseover="hoverBox(this);" onmouseout="hoverBoxOut(this);"/>
<img id="Yellow" src="Images/box6.png"
     onmouseover="hoverBox(this);" onmouseout="hoverBoxOut(this);"/>
<!-- Seventh Image -->
<img id="info" src="Images/info.png" />
</div>
</body>

HubridNoxx · 08-30-2010, 12:21 AM

tyty.