www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: Change Multiple Images on Mouseover Depending on Image Mouseover-ed

Hybrid View

  1. #1
    Join Date
    Dec 2011
    Posts
    18

    Change Multiple Images on Mouseover Depending on Image Mouseover-ed

    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>

  2. #2
    Join Date
    Dec 2011
    Posts
    163
    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>
    Last edited by Dragonfire2008; 12-29-2011 at 12:06 PM.

  3. #3
    Join Date
    Dec 2011
    Posts
    18
    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

  4. #4
    Join Date
    Dec 2011
    Posts
    163
    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".

  5. #5
    Join Date
    Dec 2011
    Posts
    18
    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.

  6. #6
    Join Date
    Dec 2011
    Posts
    18
    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?

  7. #7
    Join Date
    Dec 2011
    Posts
    163
    The CSS for those images is set to a size of 155x300, remember those two images that were 144x300...?

  8. #8
    Join Date
    Dec 2011
    Posts
    18
    Alright so if I change the first one to the same dimensions then the gap should go away?

    Gracias

  9. #9
    Join Date
    Dec 2011
    Posts
    163
    don't forget t make sure the image and DIV dimensions are the same.

  10. #10
    Join Date
    Dec 2011
    Posts
    18
    How do I do that?

  11. #11
    Join Date
    Dec 2011
    Posts
    18
    Oh, also, is there anyway I can put the head information in the body? Where I input my code there is no head area.

  12. #12
    Join Date
    Dec 2011
    Posts
    163
    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).

  13. #13
    Join Date
    Dec 2011
    Posts
    18
    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!

  14. #14
    Join Date
    Dec 2011
    Posts
    163
    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:
    window.location
    to
    Code:
    window.open
    and just take the add target="_blank" out of the code entirely.

  15. #15
    Join Date
    Dec 2011
    Posts
    18
    You didn't need to test it first you're doing me a big favour already!

    Thanks again

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles