Yeah
I had that problem also (http://www.partygek.nl .. see the carousel).
What I did was something like this
<div id='container1'>
<div id='logo'></div>
</div>
I put a mouseover and mouseout on container1. on mouseover and
mouseout I check the fire element is a decended of container1 OR is
container 1 ... if not, it's outside container1 ;-)
On Jan 25, 6:34 pm, Geoffroy Gomet <geoffroy.go...@gmail.com> wrote:
> Thanks a lot TJ, I was beginning to think in that direction.
> This should solve my problem.
>
> Once more, thank you for the quick response.
>
> Geoffroy
>
> On Jan 25, 6:14 pm, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
>
> > Hi,
>
> > On the mouseover bit, the problem isn't really the bubbling, since
> > you'd also get that same behavior if the mouse were hovering over any
> > part of the logo div -- over some padding, for instance -- since
> > mouseover fires over and over again at the slightest change in mouse
> > position. Really what you want to do is track whether the logo is
> > already dimmed and only trigger the effect if not. Just set the flag
> > when you first dim the logo, then don't dim it again. (You can't use
> > Element#visible because if you ask when the effect is still running,
> > that will come back true.) The "flag" could even be whether the
> > mouseover handler is attached -- detach it when you dim the logo,
> > reattach it when you un-dim it.
>
> > I haven't used mouseout enough to be able to help, really, but some
> > thoughts/observations:
>
> > * Will mouseout reliably fire on logo when logo is invisible, on all
> > of your target browsers?
>
> > * To know whether you're getting a mouseout from 'logo' itself as
> > opposed to the image within it, you can use Event#findElement:
>
> > var src;
> > src = event.findElement();
> > if (src && src.id == 'logo') {
> > // It's the logo itself, undim it
> > }
>
> > * You'll want to Test This Like Crazy on a wide variety of browsers.
>
> > * If you search around, you may find implementations that emulate the
> > mouseenter and mouseleave events on browsers that don't natively
> > support them. I'm pretty sure that mouseenter and mouseleave are what
> > you want for the above, but browser support for them varies.
>
> > HTH,
> > --
> > T.J. Crowder
> > tj / crowder software / com
> > Independent Software Engineer, consulting services available
>
> > On Jan 25, 3:15 pm, Geoffroy Gomet <geoffroy.go...@gmail.com> wrote:
>
> > > Here is an example of what I want to do:
> > > ...
> > > <div class='center_part'>
> > > <div id='logo'><%=image_tag
> > > '/images/logo.png'%></div>
> > > <div id='description'>lorem ipsum</div>
> > > </div>
> > > ...
> > > $('logo').observe('mouseover', function(event){
> > > new Effect.Opacity('logo', {
> > > from: 1.0,
> > > to: 0.0,
> > > duration: 0.3
> > > });
> > > });
> > > $('logo').observe('mouseout', function(event){
> > > new Effect.Opacity('logo', {
> > > from: 0.0,
> > > to: 1.0,
> > > duration: 0.3
> > > });
> > > });
>
> > > So, I would like to avoid that hovering (mouseover) the img inside the
> > > div#logo bubble up and trigger the event once more and ruin the effect
> > > of hiding the logo.
>
> > > Already thanks for the quick answer.
>
> > > Geoffroy Gomet
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
