Change Multiple Images on Mouseover Depending on Image Mouseover-ed

@IlanDec 29.2011

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 ~~[url]~~www.payitforwardfriends.com/javahelp.html[/url]

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>   <!– 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>[/CODE]

to post a comment

JavaScript

20 Comments(s) _↴

@Dragonfire2008Dec 29.2011 — #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...

&lt;html&gt;
 
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1252"&gt;
 &lt;title&gt;New Page 1&lt;/title&gt;
 
 &lt;SCRIPT LANGUAGE="JavaScript"&gt;
 // 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 --&gt;
 &lt;/script&gt;
 &lt;style type="text/css"&gt;
 .peoplepic {
 margin: 0px;
 padding: 0px;
 float: left;
 height: 300px;
 width: 155px;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body link="#FFFFFF"&gt;
 
 &lt;div class="peoplepic"&gt;
 &lt;!-- 1 EduPon --&gt;
 &lt;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';"&gt;
 
 &lt;img name="image0" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/abw.png"&gt;&lt;/a&gt;
 &lt;/div&gt;
 
 &lt;div class="peoplepic"&gt;
 &lt;!-- 2 EduPon --&gt;
 &lt;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';"&gt;
 
 &lt;img name="image1" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png"&gt;&lt;/a&gt;
 &lt;/div&gt;
 
 &lt;div class="peoplepic"&gt;
 &lt;!-- 3 EduPon --&gt;
 &lt;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';"&gt;
 
 &lt;img name="image2" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png"&gt;&lt;/a&gt;
 &lt;/div&gt;
 
 &lt;img name="image3" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png"&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;

@IlanauthorDec 29.2011 — #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 ?

@Dragonfire2008Dec 29.2011 — #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".

@IlanauthorDec 29.2011 — #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.

@IlanauthorDec 29.2011 — #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?

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

@IlanauthorDec 29.2011 — #Alright so if I change the first one to the same dimensions then the gap should go away?

Gracias

@Dragonfire2008Dec 29.2011 — #don't forget t make sure the image and DIV dimensions are the same.

@IlanauthorDec 29.2011 — #How do I do that?

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

@Dragonfire2008Dec 30.2011 — #The CSS you can put right into the tags themselves if you want...

[code=html]<div style="padding:0px;margin:0px;width:155px;height:300px;float:left;">[/code]

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).

@IlanauthorDec 30.2011 — #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>[/CODE]

Thanks!

@Dragonfire2008Dec 30.2011 — #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...

window.location
to
window.open

and just take the add target="_blank" out of the code entirely.

@IlanauthorDec 30.2011 — #You didn't need to test it first you're doing me a big favour already!

Thanks again ?

@IlanauthorDec 30.2011 — #Actually it's not opening the windows now haha

@Dragonfire2008Dec 30.2011 — #I was just curious, is there a real reason why you need JavaScript to do the links anyways? :rolleyes:

@IlanauthorDec 30.2011 — #I need the links because that's how people are going to purchase the product. The links don't have to be in javascript though, no.

@Dragonfire2008Dec 30.2011 — #use code such as this then...

<a target="_blank" href="www.yoursite.com/child.php></a>

@IlanauthorDec 30.2011 — #But do I make the link the coloured one or the black and white one?

I know how to make the link but not sure where to put it in the code.

@Dragonfire2008Dec 30.2011 — #It's just an integration...

&lt;html&gt;
 
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1252"&gt;
 &lt;title&gt;New Page 1&lt;/title&gt;
 
 &lt;SCRIPT LANGUAGE="JavaScript"&gt;
 // 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 --&gt;
 &lt;/script&gt;
 
 &lt;/head&gt;
 
 &lt;body link="#FFFFFF"&gt;
 
 &lt;p&gt;
 &lt;!-- 1 EduPon --&gt;
 &lt;a [color=red]href="www.child0.com" target="_blank" [/color]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';"&gt;
 
 &lt;img name="image0" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/abw.png"&gt;&lt;/a&gt;
 &lt;img name="image1" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png"&gt;
 &lt;img name="image2" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png"&gt;
 &lt;img name="image3" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png"&gt;
 
 &lt;!-- 2 EduPons --&gt;
 &lt;a [color=red]href="www.child1.com" target="_blank" [/color] 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';"&gt;
 
 &lt;img name="image5" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/abw.png"&gt;
 &lt;img name="image4" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png"&gt;&lt;/a&gt;
 &lt;img name="image6" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png"&gt;
 &lt;img name="image7" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png"&gt;&lt;p&gt;
 &amp;nbsp;
 &lt;!-- 3 EduPons --&gt;
 &lt;a [color=red]href="www.child2.com" target="_blank" [/color] 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';"&gt;
 
 &lt;img name="image10" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/abw.png"&gt;
 &lt;img name="image9" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/bbw.png"&gt;
 &lt;img name="image8" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/cbw.png"&gt;&lt;/a&gt;
 &lt;img name="image11" src="http://www.payitforwardfriends.com/wordpress/wp-content/uploads/d1.png"&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;

Also in #JavaScript _↴

Need to display Print button only if needed.Code stops working because of additional (unrelated) content is added to the page???Drop Down List - Livecycle ES2

Success!

Help @Ilan spread the word by sharing this article on Twitter...

Tweet This

Change Multiple Images on Mouseover Depending on Image Mouseover-ed

20 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Change Multiple Images on Mouseover Depending on Image Mouseover-ed

20 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

20 Comments(s) _↴

Also in #JavaScript _↴