Onmousover changing styles

[sylphestre]

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.

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";
			}
		}

[Old Pedant]

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.

[sylphestre]

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.

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

[Old Pedant]

First of all, stop using <strong> and use a span:

<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:

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????