Menu
I created a simple page to get a good understanding of using onMouseover and onMouseout.
When hovering the mouse over any of the images and then moving them away, it does work as it should (the background color of the buttons change color and then change back). However, when the page [U]initially
[URL=”http://goken68.brinkster.net/RolloverEffects.html”]http://goken68.brinkster.net/RolloverEffects.html
[CODE]
<html>
<head>
<script type=”text/javascript” language=”javascript”>
contactImage = new Image();
contactImage.src = ‘americanpride.jpg’;
contactImage2 = new Image();
contactImage2.src = ‘baldeagle.jpg’;
contactImage3 = new Image();
contactImage3.src = ‘ProudToBeAmerican.jpg’;
function loadImage()
{
document.getElementById(‘imgContact’).src = contactImage.src;
document.getElementById(‘imgContact2’).src = contactImage2.src;
document.getElementById(‘imgContact3’).src = contactImage3.src;
}
function changeIt()
{
first = document.getElementById(‘Button1’);
first.style.backgroundColor=”green”;
}
function changeBack()
{
first = document.getElementById(‘Button1’);
first.style.backgroundColor=”blue”;
}
function changeIt2()
{
second = document.getElementById(‘Button2’);
second.style.backgroundColor=”red”;
}
function changeBack2()
{
second = document.getElementById(‘Button2’);
second.style.backgroundColor=”blue”;
}
function changeIt3()
{
third = document.getElementById(‘Button3’);
third.style.backgroundColor=”orange”;
}
function changeBack3()
{
third = document.getElementById(‘Button3’);
third.style.backgroundColor=”blue”;
}
</script>
</head>
<body onload=”loadImage()”>
<img src=”americanflag.jpg” id=”imgContact” onMouseOver=”changeIt()” onMouseOut=”changeBack()”/><br /><br />
<input type=”button” value=”Button1″ id=”Button1″ color=”#ffffff” backgroundColor=”blue”><br /><br />
<img src=”americanflag2.jpg” id=”imgContact2″ onMouseOver=”changeIt2()” onMouseOut=”changeBack2()” /><br /><br />
<input type=”button” value=”Button2″ id=”Button2″ color=”#ffffff” backgroundColor=”blue”><br /><br />
<img src=”americanflag3.jpg” id=”imgContact3″ onMouseOver=”changeIt3()” onMouseOut=”changeBack3()” /><br /><br />
<input type=”button” value=”Button3″ id=”Button3″ color=”#ffffff” backgroundColor=”blue”>
</body>
</html>