thanks, i fixed it - it turned out to be a z-index issue.

the image, even though it is in the div, is not being read as part of
the div - so when it's completely opaque, the image overrides the
div's onmouseover call.  as soon as opacity goes down, it calls

i fixed it by creating another div directly behind that one and
putting the images in that one.  this way the div with the onmouseover
is the only one being moused over.

the next problem is why this doesn't work...AT ALL... in IE 6 or 7.

i have a bunch of different transitions happening on one page (it's a
slideshow changing 3 different things at once), and when they aren't
on the page the onmouseover/onmouseout works perfectly fine.  as soon
as the other stuff appears, the onmouseovers don't work.  and they're
sitting in the same div as stuff that shows up, so them being covered
by the images is not the case.

On Sep 8, 2:14 pm, Diodeus <[EMAIL PROTECTED]> wrote:
> Hi Bob,
> With the way you're doing this, it is possible for the two effects to
> be running concurrently.
> If you mouse-out before the appear has completed, the fade will start
> running. If you mouse back in while the fade it still running, the
> appear will run. This can really mess things up.
> Depending on what you're trying to accomplish, you can try preventing
> the effect from being triggered until the previous one has completed.
> Here's an example how:
> <div style='height:100px;width:100px;border:1px solid #202020'
> id="goLeft"
> onmouseover="if(!Element.visible('leftArr')){new
> Effect.Appear('leftArr')}"
> onmouseout="if(Element.visible('leftArr')) {new
> Effect.Fade('leftArr')}"
> onclick="goLast();">
> <div id="leftArr" style="display:none; float:left; margin: 180px 0;">
> <img src="images/armchair.jpg" /></div>
> </div>
> You may also want to read up of Effect Queues:
> On Sep 8, 1:03 pm, el_bob <[EMAIL PROTECTED]> wrote:
> > <div id="goLeft" onmouseover="$('leftArr').appear();" onmouseout="$
> > ('leftArr').fade();" onclick="goLast();">
> > <div id="leftArr" style="display:none; float:left; margin: 180px 0;">
> > <img src="assets/images/FP_images/arrowleft.gif" />
> > </div>
> > </div>
> > i tried it like this, i tried it just using the id="leftArr" on the
> > image itself, but regardless of how i code it, i keep running into the
> > same issue -
> > when i am moused over the div (it's about 400x400, and the image is
> > about 60x60), everything works fine.
> > if i'm moused over the image itself, it gets to the end of the appear
> > and then flickers on and off, repeatedly, seemingly without end.
You received this message because you are subscribed to the Google Groups 
"Prototype &" group.
To post to this group, send email to
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at

Reply via email to