Hi everyone!

I have four pictures. The first three are of kids in black and white and the fourth with text. When you mouse over the first kid that kid turns colour and the text changes. When you mouseover the second kid the first two change colour and the text changes (different than first). On the third kid all three kids change colour and the text changes yet again.

You can see this at www.payitforwardfriends.com/javahelp.html

I have three problems: a) I can't figure out how to make it so that for the 2nd and 3rd ones if you rollover the first child it won't change colour. Currently the link includes all the children and the only way I can think to get around this is changing the order of children but I can't have it always change

b) I need to merge all three scenarios into one.. how can I do that?

c) How do I make it so that when you click child one, two, or three it sends you to a different webpage for each child?

The code I currently have is:

Code:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<SCRIPT LANGUAGE="JavaScript">
// Preload Images
var image0 = new Image(); image0.src = "http://www.payitforwardfriends.com/wordpress/wp-content/uploads/abw.png";
var image1 = new Image(); image1.src = "http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png";
var image2 = new Image(); image2.src = "http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png";
var image3 = new Image(); image3.src = "http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png";

var image4 = new Image(); image0.src = "http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png";
var image5 = new Image(); image1.src = "http://www.payitforwardfriends.com/wordpress/wp-content/uploads/abw.png";
var image6 = new Image(); image2.src = "http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png";
var image7 = new Image(); image3.src = "http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png";

var image8 = new Image(); image0.src = "http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png";
var image9 = new Image(); image1.src = "http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png";
var image10 = new Image(); image2.src = "http://www.payitforwardfriends.com/wordpress/wp-content/uploads/abw.png";
var image11 = new Image(); image3.src = "http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png";
//  End -->
</script>

</head>

<body link="#FFFFFF">

<p>
<!-- 1 EduPon -->
<a href="#" onmouseover="image0.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/ac.png'; 
image1.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png'; 
image2.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png';
image3.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d2.png'; " 

onmouseout="image0.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/abw.png'; 
image1.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png'; 
image2.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png';
image3.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png';">

<img name="image0" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/abw.png"></a>
<img name="image1" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png">
<img name="image2" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png">
<img name="image3" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png">

<!-- 2 EduPons -->
<a href="#" onmouseover="image4.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bc.png'; 
image5.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/ac.png'; 
image6.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png';
image7.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d3.png'; " 

onmouseout="image4.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png'; 
image5.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/abw.png'; 
image6.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png';
image7.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png';">

<img name="image5" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/abw.png">
<img name="image4" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png"></a>
<img name="image6" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png">
<img name="image7" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png"><p>
&nbsp;
<!-- 3 EduPons --><a href="#" onmouseover="image8.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cc.png'; 
image9.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bc.png'; 
image10.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/ac.png';
image11.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d4.png'; " 

onmouseout="image8.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png'; 
image9.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png'; 
image10.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/abw.png';
image11.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png';">

<img name="image10" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/abw.png">
<img name="image9" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png">
<img name="image8" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png"></a>
<img name="image11" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png">
</body>

</html>