Flashing layer/interactive buttons on button mouseover

T

Tom Eberle

I have created a layer positioned below each of my
naviagation buttons on a shared top border. Each layer
has several interactive buttons which changes shape on
mouseover. I have created a behavior for each navigation
button to make each layer below that button visible on
mouseover and hidden on mouse out. I have also created a
behavior to make the layer visible on mouseover and
hidden on mouse out. The overall effect is a nifty
submenu which drops down as you mouse over the navigation
buttons and stays visible as you mouse down over the
submenu items (interactive buttons) and becomes hidden
when you mouse out of the layer or navigation button. The
problem is that the button & layer flashes (exposing view
of page behind layer) as you mouse over each interactive
button in the submenu. It's very noticable and
distracting and looks unprofessional. I notice that it
happens in IE6.0 (Windows XP) but not in Netscape 7.0
(Windows XP). Does anyone have any ideas on how to
prevent this flashing from occurring?

Thanks,

Tom
 
T

Thomas A. Rowe

Have you look at this on different computers, as it could be a video
card/driver issue?

--

==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, Forums, WebCircle,
MS KB Quick Links, etc.
==============================================
 
T

Thomas A. Rowe

The following is modified code from the link below and no longer flashes:

<body bgcolor="#000000" onload="FP_preloadImgs(/*url*/'button42.gif',
/*url*/'button43.gif');
FP_changeProp(/*id*/'lag1',0,'style.visibility','hidden');
FP_changeProp(/*id*/'lag3',0,'style.visibility','hidden');
FP_changeProp(/*id*/'lag2',0,'style.visibility','hidden');
FP_changeProp(/*id*/'lag4',0,'style.visibility','hidden')">
<div style="position: absolute; width: 93px; height: 146px; z-index: 1;
left: 62px; top: 34px" id="lag1"
onmouseover="FP_changeProp(/*id*/'lag1',0,'style.visibility','visible');">
<table border="0" width="100%">
<tr>
<td>
<font size="2" color="#6666FF"><a href="test1">TEST1</a></font><p>
<font size="2" color="#6666FF"><a href="test2">TEST2</a></font><p>
<font size="2" color="#6666FF"><a href="test3">TEST3</a></font><p>
<font size="2" color="#6666FF"><a href="test4">TEST4</a></font><p>
<font size="2" color="#6666FF"><a href="test5">TEST5</a></font><p>
<font size="2" color="#6666FF"><a href="test6">TEST6</a></font><p>
<font size="2" color="#6666FF"><a href="test7">TEST7</a></font></td>
</tr>
</table>
</div>
<p>
<img border="0" id="img3" src="button41.gif" height="20" width="100"
alt="TEST" fp-style="fp-btn: Soft Capsule 7; fp-bgcolor: #000000;
fp-transparent: 1" fp-title="TEST"
onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button42.gif');
FP_changeProp(/*id*/'lag1',0,'style.visibility','visible')"
onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button41.gif');
FP_changeProp(/*id*/'lag1',0,'style.visibility','hidden')"
onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button43.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button42.gif')">&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</p>
</body>
</html>

The main item I removed was:

onmouseout="FP_changeProp(/*id*/'lag1',0,'style.visibility','hidden');"

==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, Forums, WebCircle,
MS KB Quick Links, etc.
==============================================
 
J

jon spivey

But the idea was to make the menu hide onmouseout which it won't do now.
It's not a good idea to put onmouseout on a div.
1/ it's not supported by NN4
2/ onmouseout fires when you mouseout of anything within the div - links etc
For example
<div onmouseout="alert('mouseout')">
<p>text</p>
<p>more text</p>
</div>
notice that mouseout fires when you mouseout of the paragraphs - this is
what causes the flickering. When you move your mouse within the div it's
repeatedly firing onmouseover to make it visible and mouseout to hide it.

A better way to make a menu would be
<a href="javascript:;"
onmouseover="FP_changeProp(/*id*/'lag1',0,'style.visibility','visible');FP_c
hangeProp(/*id*/'closer',0,'style.visibility','visible'"><img
src="button.gif"></a>
<div id="lag1" style=".....>menu content</div>
<div id="closer" style="><a href="javascript:;"
onmouseover="FP_changeProp(/*id*/'lag1',0,'style.visibility','hidden');FP_ch
angeProp(/*id*/'closer',0,'style.visibility','hidden')"<img
src="transparent.gif"></a></div>

We put a transparent gif behind the menu to catch the mouseout. One could
get NN4 support into this quite quickly
 
T

Thomas A. Rowe

Jon,

I agree, I was only looking to find the cause of the flickering issue, which
was being caused by the onmouseout.

--

==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, Forums, WebCircle,
MS KB Quick Links, etc.
==============================================
 
T

Tom

Hi Thomas,

Thank you for the message back. I have a more complicated
site then Blaster and his example, including many more
(25 +) webpages with shared border (top). Is there a way
that changing the behavior would accomplish the same
thing? I doesn't seem that chnging source code would be
the right fix for so many pages. zi looked for the mouse
out function code you mentioned and I didn't see it in my
page. Any thoughts?

Tom
-----Original Message-----
The following is modified code from the link below and no longer flashes:

<body bgcolor="#000000" onload="FP_preloadImgs (/*url*/'button42.gif',
(/*id*/'lag1',0,'style.visibility','hidden');
(/*id*/'lag3',0,'style.visibility','hidden');
(/*id*/'lag2',0,'style.visibility','hidden');
(/*id*/'lag4',0,'style.visibility','hidden')">
<div style="position: absolute; width: 93px; height: 146px; z-index: 1;
left: 62px; top: 34px" id="lag1"
onmouseover="FP_changeProp (/*id*/'lag1',0,'style.visibility','visible');">
<table border="0" width="100%">
<tr>
<td>
<font size="2" color="#6666FF"><a
Click to expand...
href="test1">TEST1 said:
<font size="2" color="#6666FF"><a
Click to expand...
href="test2">TEST2 said:
<font size="2" color="#6666FF"><a
Click to expand...
href="test3">TEST3 said:
<font size="2" color="#6666FF"><a
Click to expand...
href="test4">TEST4 said:
<font size="2" color="#6666FF"><a
Click to expand...
href="test5">TEST5 said:
<font size="2" color="#6666FF"><a
Click to expand...
href="test6">TEST6 said:
<font size="2" color="#6666FF"><a
Click to expand...
href="test7">TEST7 said:
</tr>
</table>
</div>
<p>
<img border="0" id="img3" src="button41.gif" height="20" width="100"
alt="TEST" fp-style="fp-btn: Soft Capsule 7; fp-bgcolor: #000000;
fp-transparent: 1" fp-title="TEST"
onmouseover="FP_swapImg (1,0,/*id*/'img3',/*url*/'button42.gif');
(/*id*/'lag1',0,'style.visibility','visible')"
(0,0,/*id*/'img3',/*url*/'button41.gif');
(/*id*/'lag1',0,'style.visibility','hidden')"
(1,0,/*id*/'img3',/*url*/'button43.gif')"
onmouseup="FP_swapImg
Click to expand...
(0,0,/*id*/'img3',/*url*/'button42.gif')"> &
 
T

Thomas A. Rowe

Tom,

Did you see Jon Spivey's reply?

I prefer not to use any type of DHTML menus, since I really dislike them, so
I can't really offer any solutions, I just pointed out what was causing the
problem, and Jon indicated a solution to solve the problem.

--

==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, Forums, WebCircle,
MS KB Quick Links, etc.
==============================================
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

CASCADE MENU FRONTPAGE 2003 1
Can a mouseover be used to make a layer visible/invisible? 2
Submenu flashes 2
mouseover on text 0
Layers/behaviors- Flashing/Flickering Dynamic Menu System 9
buttons in a layer flicker black when my mouse moves across them 3
interactive buttons slow to "wake-up" when scrolling thru 2
Interactive button not working 1

Top