Rails spinoffs - Aug 2006 - Div over image Effect.Appear/Hide mouseover/out problem

Hello,

I am trying to create the same effect as on
http://www.slideshowpro.net/ when you hover over an image. I am almost
there but when i hover over the text div that''s layed over the image it
sees it as an mousout and hides the text div.

Below is what i got so far.
http://www.gijs.com/ahum/

Is there a way to fix this or work arround it?

Thanks in advance
Gijs


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---

On 29 Aug 2006, at 10:36, b83s wrote:
>
> Hello,
>
> I am trying to create the same effect as on
> http://www.slideshowpro.net/ when you hover over an image. I am almost
> there but when i hover over the text div that''s layed over the  
> image it
> sees it as an mousout and hides the text div.
>
> Below is what i got so far.
> http://www.gijs.com/ahum/
>
> Is there a way to fix this or work arround it?
This could help:

http://www.thefutureoftheweb.com/blog/2006/2/bursting-the-event-bubble

Haven''t tested it or looked into it, but it seems to deal with your  
problem (the added note near the bottom)


Best regards

Peter De Berdt



--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---

Thanks allot Peter for The info,

I tryed it yesterday and it almost workes, when i mouseover the image
the div with text shows and stays there even when i hover over the div.
But when i mouseout of the image the div with tekst doesn''t get
removed.

Could somebody give me some small explenaition about the function?
This is the code i used.

function disapearo(id){
     e = e || window.event;
     var target = e.srcElement || e.target;
     if (target != this) return;

     var related = e.relatedTarget || e.toElement;
     while (related != this && related.nodeName !=
''BODY'')
          related = related.parentNode;
     if (related == this) return;

    id = ''imageinfo''+id;
    Element.hide(id);
  } 

You can check out the page at:  

Thanks,
Gijs


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---

Here is a function that I''ve added to my Event object that will get the
related target. I''ve gone ahead and wrapped it up in an Object.extend
for
the Event object.

Object.extend(Event, {
  getRelatedTarget: function(event) {
    var t = event.relatedTarget;
    if (!t) {
      if (event.type == ''mouseout'') t = event.toElement;
      else if (event.type == ''mouseover'') t =
event.fromElement;
    }
    return $(t);
  }
});

I would highly suggest reading over this article on mouse events:
http://www.quirksmode.org/js/events_mouse.html

Brandon

On 8/30/06, b83s <gijs.epping-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
>
> Thanks allot Peter for The info,
>
> I tryed it yesterday and it almost workes, when i mouseover the image
> the div with text shows and stays there even when i hover over the div.
> But when i mouseout of the image the div with tekst doesn''t get
> removed.
>
> Could somebody give me some small explenaition about the function?
> This is the code i used.
>
> function disapearo(id){
>      e = e || window.event;
>      var target = e.srcElement || e.target;
>      if (target != this) return;
>
>      var related = e.relatedTarget || e.toElement;
>      while (related != this && related.nodeName !=
''BODY'')
>           related = related.parentNode;
>      if (related == this) return;
>
>     id = ''imageinfo''+id;
>     Element.hide(id);
>   }
>
> You can check out the page at:
>
> Thanks,
> Gijs
>
>
> >
>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---