Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    hey guys, an image selector problem here (help!)

    its me again! and yeah i need some insight from you guys. i cant seem to get this code to work and i know my flaw is in my "bloat();" function. help me out?

    Code:
    <?xml version = "1.0" encoding = "utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    
    <html xmlns = "http://www.w3.org/1999/xhtml">
    	<head>	
    		<title>Test 4</title>
    			<script type = "text/javascript">
    				function preload(){
    					images = new Array();
    						images[0] = new Image();
    							images[0].src = "image1.png";
    						images[1] = new Image();
    							images[1].src = "image2.gif";
    						images[2] = new Image();
    							images[2].src = "image3.png";
    						images[3] = new Image();
    							images[3].src = "image4.jpg";
    						images[4] = new Image();
    							images[4].src = "image5.gif";
    				}
    				function bloat(){
    					if(document.getElementById("image1").onMouseOver === true){
    						document.getElementById("main").src = "image1.png";}
    					else if(document.getElementById("image2").onMouseOver === true){
    						document.getElementById("main").src = "image2.gif";}
    					else if(document.getElementById("image3").onMouseOver === true){	
    						document.getElementById("main").src = "image3.png";}
    					else if(document.getElementById("image4").onMouseOver === true){
    						document.getElementById("main").src = "image4.jpg";}
    					else(document.getElementById("image5").onMouseOver === true){
    						document.getElementById("main").src = "image5.gif";}
    				}
    
    			</script>
    	</head>
    	<body onLoad = "preload();" bgcolor = "orange"><center>
    			<img src = "bloat();" alt = "main" id = "main" height = "400" width = "450"><br /><br />
    		<a href = "http://www.joystiq.com">
    			<img src = "image1.png" alt = "image1" id = "image1" onMouseOver = "bloat();" height = "200" width = "225"></a>
    		<a href = "http://www.engadget.com">
    			<img src = "image2.gif" alt = "image2" id = "image2" onMouseOver = "bloat();" height = "200" width = "225"></a>
    		<a href = "http://www.amazon.com">
    			<img src = "image3.png" alt = "image3" id = "image3" onMouseOver = "bloat();" height = "200" width = "225"></a>
    		<a href = "http://www.newegg.com">
    			<img src = "image4.jpg" alt = "image4" id = "image4" onMouseOver = "bloat();" height = "200" width = "225"></a>
    		<a href = "http://www.smc.edu">
    			<img src = "image5.gif" alt = "image5" id = "image5" onMouseOver = "bloat();" height = "200" width = "225"></a>
    	</center></body>
    </html>
    so essentially the way this should look is a list of five images tiled length wise. when you onMouseOver one it becomes a bigger image right above them. when you click the "thumbnails" as i'll call it, you get linked to a web page.

    i got everything formatted right however i think there is an error with my function. any insight fellas? thanks!
    Last edited by SecretAgentHam; 12-11-2011 at 06:00 AM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    The insight is: You need to learn about event handlers :-)

    With assigning a "value" to onmouseover you are actually assigning code (a function/a method) that will be executed as soon as the event occurs. There is no such thing as a boolean value (true/false) of onmouseover that can be checked to see if the element is currently hovered!

    Code:
    document.getElementById("image1").onmouseover = function() {
       document.getElementById("main").src = "image1.png";
    };

  • Users who have thanked devnull69 for this post:

    SecretAgentHam (12-11-2011)

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by devnull69 View Post
    The insight is: You need to learn about event handlers :-)

    With assigning a "value" to onmouseover you are actually assigning code (a function/a method) that will be executed as soon as the event occurs. There is no such thing as a boolean value (true/false) of onmouseover that can be checked to see if the element is currently hovered!

    Code:
    document.getElementById("image1").onmouseover = function() {
       document.getElementById("main").src = "image1.png";
    };
    trying this right now, thanks i wasnt aware!

  • #4
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    i got it working, thanks a million!


  •  

    Posting Permissions

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