Change Multiple Images on Mouseover Depending on Image Mouseover-ed

**Ilan** · 12-28-2011, 07:52 PM

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>

**Dragonfire2008** · 12-29-2011, 11:42 AM

Working on it...

UPDATE

Ok, here goes, the only thing you need to do is replace the onClick links (3 of them) to your "child links", also wouldnt help to resize the child images to all match...

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>
<style type="text/css">
.peoplepic {
	margin: 0px;
	padding: 0px;
	float: left;
	height: 300px;
	width: 155px;
}
</style>
</head>

<body link="#FFFFFF">

<div class="peoplepic">
<!-- 1 EduPon -->
<a href="#" 

onClick="window.location='www.yourchild0page.com'"

onmouseover="image0.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/ac.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'; 
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>
</div>

<div class="peoplepic">
<!-- 2 EduPon -->
<a href="#" 

onClick="window.location='www.yourchild1page.com'"

onmouseover="image0.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/ac.png'; 
image1.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bc.png';
image3.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d3.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';
image3.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png';">

<img name="image1" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png"></a>
</div>

<div class="peoplepic">
<!-- 3 EduPon -->
<a href="#" 

onClick="window.location='www.yourchild2page.com'"

onmouseover="image0.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/ac.png'; 
image1.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bc.png';
image2.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cc.png';
image3.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d4.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="image2" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png"></a>
</div>

<img name="image3" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png">
</body>

</html>

**Ilan** · 12-29-2011, 01:53 PM

Wow, thanks so much!

That worked great.

About image size, does it really matter that they're different sizes? I mean they'll be right next to each other and the only different dimension is width.

Thanks again. Big help

**Dragonfire2008** · 12-29-2011, 01:55 PM

Well you have 3 child images, but one is 155x300, and the other two are 144x300, it would be nice to have them all the same size for organizational reasons IMO.

Oh! Almost forgot to add something, if you want those links to open a new window just add target="_blank" between the "a" and "onClick".

**Ilan** · 12-29-2011, 01:58 PM

I tried to make them the same size but then there's no white space for the first child.

Anyway, thanks a bunch!

I'll be using that new window thing too.

**Ilan** · 12-29-2011, 02:09 PM

Oh, sorry, one more thing: there's a gap between the images where if you put your mouse there nothing shows up. How can I get rid of it?

**Dragonfire2008** · 12-29-2011, 02:15 PM

The CSS for those images is set to a size of 155x300, remember those two images that were 144x300...?

**Ilan** · 12-29-2011, 02:19 PM

Alright so if I change the first one to the same dimensions then the gap should go away?

Gracias

**Dragonfire2008** · 12-29-2011, 02:59 PM

don't forget t make sure the image and DIV dimensions are the same.

**Ilan** · 12-29-2011, 03:03 PM

How do I do that?

**Ilan** · 12-29-2011, 03:22 PM

Oh, also, is there anyway I can put the head information in the body? Where I input my code there is no head area.

**Dragonfire2008** · 12-29-2011, 11:32 PM

The CSS you can put right into the tags themselves if you want...

HTML Code:

<div style="padding:0px;margin:0px;width:155px;height:300px;float:left;">

Instead of using a CSS class.

The script I think must be loaded in the header bc otherwise the page won't load it when it's time for the body to load. But I could be wrong (someone correct me if so).

**Ilan** · 12-30-2011, 02:40 AM

So I was able to get that to work by using an iframe where I can put stuff into the header.. but now I have a different problem.

The link is here http://www.payitforwardfriends.com/edupon.html

When you click the child it opens the same page in a new window and it uses that window to go to the paypal page. I want it to stay on the same page and open the new tab with paypal.

My code 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>
<style type="text/css">
.peoplepic {
	margin: 0px;
	padding: 0px;
	float: left;
	height: 300px;
	width: 144px;
}
</style>
</head>

<body link="#FFFFFF">

<div class="peoplepic">
<!-- 1 EduPon -->
<a href="#" 
add target="_blank"
onClick="window.location='https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=53DMTML66C9U2'"

onmouseover="image0.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/ac.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'; 
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>
</div>

<div class="peoplepic">
<!-- 2 EduPon -->
<a href="#" 
add target="_blank"
onClick="window.location='https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=V6G7SQQQA6UMN'"

onmouseover="image0.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/ac.png'; 
image1.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bc.png';
image3.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d3.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';
image3.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png';">

<img name="image1" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png"></a>
</div>

<div class="peoplepic">
<!-- 3 EduPon -->
<a href="#" 
add target="_blank"
onClick="window.location='https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RJRKRMETLLP5S'"

onmouseover="image0.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/ac.png'; 
image1.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bc.png';
image2.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cc.png';
image3.src='http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d4.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="image2" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png"></a>
</div>

<img name="image3" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png">
</body>

</html>

Thanks!

**Dragonfire2008** · 12-30-2011, 09:22 AM

I see what you mean. It actually makes sense what it's doing, the target="_blank" is an HTML thing, while the link is being run by javascript. So when you click on a child, it opens the new window with the html link which is "#" or nothing, then paypal opens to the main page with javascript. Sorry I should have tested that first...

Just change the...

Code: