Image and a Video (In unruly unison)

[Jbrady21]

My webpage has an image (layer3) and a video (layer1) which are in overlapping layers. The point is to have the user move the mouse over the image, the visibility status of each is to switch, and the video to start playing. The issue that i am having is that the image and video will flicker (visibilities of each layer show and hide at random) when the mouse is over the targeted area. The following steps were used to script the actions...

<div style="position: absolute; width: 100px; height: 100px; z-index: 102; left: 434px; top: 362px" id="layer3">
<img border="0" id="image1" src="./Images/Design/Isoview.jpg"  onmouseover="disappear()" onmouseout="reappear()" "width="374" height="303"></div>

The functions that are called are seen below...

function disappear()
{
    if(layer3.style.visibility="visible")	
	{
	layer3.style.visibility="hidden";
    	layer1.style.visibility="visible"; 
	}
    }
function reappear()
{
    if(layer3.style.visibility="hidden")	
	{
	layer3.style.visibility="visible"; 
    	layer1.style.visibility="hidden";
             }
    }

(The if statements were placed to see if the perhaps the visibility state was continuously being reset hence the flashing)

When the user places the mouse over the image, a background movie file is then shown and then initialized with the use of this code...

<div style="position: absolute; width: 243px; height: 203px; z-index: 103; left: 438px; top: 371px; visibility:hidden" id="layer1">
<img border="0" align="right" dynsrc="./Videos/Animation.wmv" start="mouseover"></font></b></div>

I am not even sure if the way I preformed the desired action is the best method, hence causing the undesired actions.

Thanks,
-James

[Twey]

Try this.

function disappear()
{
	document.getElementById("layer3").style.zIndex = 0;
	document.getElementById("layer1").style.zIndex = 1; 
	return false;
    }

function reappear()
{
	document.getElementById("layer1").style.zIndex = 0;
	document.getElementById("layer3").style.zIndex = 1;
	return false;
    }

Then, return the values of the function calls; for example:

onmouseover="return disappear();"

I'm not vouching for that video code, however; I've never seen it done like that before, but if you're sure it works...