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 Coder
    Join Date
    Oct 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Onmousover changing styles

    I have my code set up so whenever I hover over a picture it changes the background image and I want it so that when I leave the picture the background changes back to a black background but the background just stays as the image. I cant find out why its not changing back when I leave, it looks like everything should work.

    Code:
    var bgImage = new Array()
    		bgImage[0] = "url(../Pictures/RM/Iker.jpg)";
    		bgImage[1] = "url(../Pictures/RM/Arbeloa.jpg)";
    		 
    		
    		parseInt(event.clientX) - parseInt(movingDiv.style.left)
    		
    		function into(whoseCalling)
    		{
    			num =(document.getElementById(whoseCalling).id).substr(3);
    		    document.getElementById(whoseCalling).style.borderStyle = "double";
    			document.getElementById(whoseCalling).style.borderTopColor = "blue";
    			document.getElementById(whoseCalling).style.borderBottomColor = "red";
    			document.getElementById(whoseCalling).style.borderLeftColor = "yellow";
    			document.getElementById(whoseCalling).style.borderRightColor = "green";
    			document.getElementById(whoseCalling).style.borderWidth = "8px";
    			
    			
    			for (i=0; i<30; i++)
    			{
    				document.getElementById("img" + i).style.opacity = ".1";
    			}
    			document.getElementById(whoseCalling).style.opacity = "1";
    			document.body.style.backgroundImage = bgImage[num]
    		}
    		function out(whoseCalling)
    		{
    			document.getElementById(whoseCalling).style.borderStyle = "solid";
    			document.getElementById(whoseCalling).style.borderColor = "red";
    			document.getElementById(whoseCalling).style.borderWidth = "3px";
    			document.body.style.backgroundColor = "black";
    			
    			for (i=0; i<30; i++)
    			{
    				document.getElementById("img" + i).style.opacity = "1";
    			}
    		}
    Last edited by sylphestre; 10-15-2009 at 01:51 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Because you changed the background *COLOR* but you left the image IN PLACE.

    An image always has precedence over a color, so it just stays there.

    Probably the best way to do this is to just use the ".background" property, not either backgroundImage or backgroundColor.

    The browser should be able to tell the difference between "url(...)" and a simple color and automatically do the right thing.

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your help Old, I changed my script from backgroundImage and Color to just background and the whole code worked like I wanted it to. I have another question using the same code as in my first post, I have the images going transparent except the 1 being hovered over, could you help me with an easier way of hiding the text underneath the pictures other then going through and typing var div# = document.getElementById("div#"); and the writing div#.getElementById(div#).style.visibility = "hidden"? here is what one of my divs looks like right now.

    Code:
    <div id="div2" style="position: absolute; top: 0px; left: 200px;">
    	<img id="img1" src="../Pictures/RM/roster/2 Alvaro.jpg" alt="alvaro" style="border-width: 3px; border-color: red; 
    	                                                   border-style: solid; height: 180px; width: 140px;"
    	                                            onmouseover="into(this.id)"
    						    onmouseout="out(this.id)"><br><strong>2 Alvaro Arbeloa</strong><br>
    	</div>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    First of all, stop using <strong> and use a span:
    Code:
    <div id="div2" style="position: absolute; top: 0px; left: 200px;">
        <img id="img1" src="../Pictures/RM/roster/2 Alvaro.jpg" alt="alvaro" 
             style="border-width: 3px; border-color: red; 
             border-style: solid; height: 180px; width: 140px;"
             onmouseover="into(this)"
             onmouseout="out(this)">
        <br/>
        <span style="font-weight: bold;">Alvaro Arbeloa</span>
        <br/>
    </div>
    And then I *think* this is what you are after:
    Code:
    function into( targetImg )
    {
        targetImg.style.borderStyle = "double";
        targetImg.style.borderTopColor = "blue";
        targetImg.style.borderBottomColor = "red";
        targetImg.style.borderLeftColor = "yellow";
        targetImg.style.borderRightColor = "green";
        targetImg.style.borderWidth = "8px";
    
        targetDivNum = parseInt( targetImg.id.substring(3) ); // assumes "img3", "img17", etc.
        targetDiv = document.getElementById("div"+targetDivNum);
        targetSpan = targetDiv.getElementsByTagName("span")[0]; 
        targetSpan.style.visibility = "hidden";
    
        // now change opacities:
        for ( divnum = 1; divnum < 999999999; ++divnum )
        {
            var div = document.getElementById("div" + divnum);
            if ( div == null ) break; // quit when we don't find the div by id
            div.style.opacity = ( div == targetDiv ) ? 1.0 : 0.1;
        }
    
        document.body.style.backgroundImage = bgImage[targetDivNum];
    }
    Is that what you mean????


  •  

    Posting Permissions

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