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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Image onmouseover function

    I have six small images. Depending on which image a user hovers over, I would like a seventh image (a simple box) to change as well.

    For example, if a user hovers over image1, I want the seventh image to be a red box.

    If a user hovers over image2, the seventh image should be a blue box.

    Simple huh? So the seventh image changes color based on which of the six smaller images the user hovers over.

    -------------
    So far, my current code only allows me to hover over any of the six images, and the seventh image always changes to the same image color. Code is below. Any help would be appreciated.

    Code:
    		<script type="text/javascript">
    			function hoverBox() {
    				var boxNumber;
    				
    				document.getElementById("info").src = "Images/infoRedColor.png";
    			}
    			
    			function hoverBoxOut() {
    				document.getElementById('info').src = "Images/info.png;"
    			}
    			
    		</script>
    	</head>
    	<body>
    	<div id="wrapper">
    
    		<a href=""> <img class="box1" src="Images/box1.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
    onmouseout="this.src='Images/box1.png'; hoverBoxOut()" ></a>
    		<a href=""> <img class="box2" src="Images/box2.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
    onmouseout="this.src='Images/box2.png'; hoverBoxOut()"></a>
    		<a href=""> <img class="box3" src="Images/box3.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
    onmouseout="this.src='Images/box3.png'; hoverBoxOut()"></a>	
    		<a href=""> <img class="box4" src="Images/box4.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
    onmouseout="this.src='Images/box4.png'; hoverBoxOut()"></a>
    		<a href=""> <img class="box5" src="Images/box5.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
    onmouseout="this.src='Images/box5.png'; hoverBoxOut()"></a>
    		<a href=""> <img class="box6" src="Images/box6.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
    onmouseout="this.src='Images/box6.png'; hoverBoxOut()"></a> 
    
    <!-- Seventh Image -->
    		<img id="info" src="Images/info.png" border="0">
    
    	</div>
    		
    		
    		
    	</body>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Is this homework???

    Feels like it. But oh, well.

    Let's keep it *REAL* simple:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var saveImage = null;
    function hoverBox(box) 
    {
        saveImage = box.src;
        box.src = "'Images/box1hov.png";
        document.getElementById("info").src = "Images/Info" + box.id + "Color.png";
    }
    function hoverBoxOut() 
    {
        document.getElementById('info').src = "Images/info.png;"
        box.src = saveImage;
    }
    </script>
    <style>
    div#wrapper img {
        border: none;
        /* any other styles? */
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <img id="Red" src="Images/box1.png"
         onmouseover="hoverBox(this);" onmouseout="hoverBoxOut(this);"/>
    <img id="Blue" src="Images/box2.png"
         onmouseover="hoverBox(this);" onmouseout="hoverBoxOut(this);"/>
    <img id="Green" src="Images/box3.png"
         onmouseover="hoverBox(this);" onmouseout="hoverBoxOut(this);"/>
    <img id="Orange" src="Images/box4.png"
         onmouseover="hoverBox(this);" onmouseout="hoverBoxOut(this);"/>
    <img id="Purple" src="Images/box5.png"
         onmouseover="hoverBox(this);" onmouseout="hoverBoxOut(this);"/>
    <img id="Yellow" src="Images/box6.png"
         onmouseover="hoverBox(this);" onmouseout="hoverBoxOut(this);"/>
    <!-- Seventh Image -->
    <img id="info" src="Images/info.png" />
    </div>
    </body>
    Last edited by Old Pedant; 08-30-2010 at 12:24 AM. Reason: Missed a +
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    HubridNoxx (08-30-2010)

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    tyty.


  •  

    Posting Permissions

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