Sign in to follow this  
Supaflyfrank

[web] Vanishing Button is Vanishing To Quickly

Recommended Posts

I want to have a mouse out that makes my button appear after clicking it which will make it disappear. But some reason when I click it it disappears but if I move it even slightly it appears again. And I thought mouseout is when it leaves the area. I set my div and image width and height so I dont see the problem. This isnt working on IE quite yet still working on that. if anyone has a suggestions on how to make it work on IE i will be all for it. Here is my layerlib.js file that is imported http://freewebs.com/supaflyfrank/layerlib.js. On IE it complains on Line: 29 Error: 'document.all[...].style' is null or not an object So On IE it doesnt even disappear or reappear I just get a error. On firefox which is the one that does disappear but reappears to quickly I get an error : Error: document.getElementById(menuName) has no properties Source File: http://freewebs.com/supaflyfrank/index.htm Line: 35 I dont understand why, any help would be appreciated. http://www.freewebs.com/supaflyfrank/index.htm

Share this post


Link to post
Share on other sites
On line 51;

onmouseout="show('menu1');"

Should be;

onMouseOut="show('menu1');"

It's annoying sometimes, but you must remember where the characters need to be UPPER/lower case.

Daed.

Share this post


Link to post
Share on other sites
I thought it was that previously and I tried doing so but nothing has changed. I dont think its that function because it gets into the function show so I dont believe its that particular line. But like I said changing it to onMouseOut="show('menu1');" didnt do anything.

Share this post


Link to post
Share on other sites
Ah, I may know why now (although I'm being really pedantic know)


function show(menuName)
{

if (document.layers)
{ document.layers[menuName].visibility = 'show';
}
else if (document.all)
{

document.all[menuName].style.visibility = 'visible';
}
else if (document.getElementById)
{

document.getElementById(menuName).style.visibility = 'visible';

}
}




You have no "else" statement, add an else statement here, and set the visibility to hidden.

Either that, or I'd remove the if(document.layers) and else if(document.all) statements.

Or maybe even be because of;

window.onload = show('menu1');

I would stick that in the body as;

<body onLoad="javascript:show('menu1');">

Daed.

Share this post


Link to post
Share on other sites
Here's how I have done it on my site;

HTML file:

<div id="ButtonID" onMouseOver="javascript:ButAction( 'but', 'Down' );" onMouseOut="javascript:HideByID( 'ButtonID', 'but' );"
style="position:absolute; left:[0]; visibility:hidden;">
<img src="./Images/Buttons/ButUp.png" name="but">
</div>



JS file:

butNo = new Image();
butNo.src = "./Images/Buttons/ButNo.png";
butUp = new Image();
butUp.src = "./Images/Buttons/ButUp.png";
butDown = new Image();
butDown.src = "./Images/Buttons/ButDown.png";

function HideByID( theID, theButName )
{
document.getElementById( theID ).style.visibility = "hidden";

if ( document.images )
{
document[ theButName ].src = eval( "butUp.src" );
}
}

function ButAction( theButName, theBut )
{
if ( document.images )
{
document[ theButName ].src = eval( "but" + theBut + ".src" );
}
}



Daed.

Share this post


Link to post
Share on other sites
I tried it with slight modification and it doesnt work. I dont think it is the actually code but for some reason I think it is because of the area of the div or something. Cause it actually works but dont get why the slightest movement would trigger onMouseOut when mouse out means you moved the mouse out of the selected area.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this