I took a look at the page you originally posted a link to, and I see
the problem now.
Part of the problem is the structure of the page is a bit...
non-optimal. Why is there separate divs holding the links? Oh wait I
see, it's all programatically generated... Ideally/normally it would
all be done via CSS, with a :hover rule on the links.
Ok, given that it's all generated programatically and so is going to
produce hideous code anyway, my suggestion is to add a "wrapper" div
around the two elements that "swap".
For example:
<!-- This is 'five_jpg' wrapper -->
<div id="Layer-11-12-wrapper" >
<!-- This is 'five_jpg_linkover' -->
<div id="Layer-12" >
<a href=""><img src="Layer-12.jpg" alt="five_jpg_linkover"
border="0" /></a>
</div>
<!-- This is 'five_jpg_link' -->
<div id="Layer-11" >
<a href=""><img src="Layer-11.jpg" alt="five_jpg_link" border="0" /></a>
</div>
</div>
Then in your JavaScript you can go something like (and this should be
made much much more generic):
$(function(){
// ...
$("#Layer-11").hide();
$('#Layer-11-12-wrapper').hover(
function() { $("#Layer-11").show(); $("#Layer-12").hide(); },
function() { $("#Layer-12").show(); $("#Layer-11").hide(); }
);
// ...
});
I would suggest shifting away from the use of "inline" images as
backgrounds, instead stick the background images where they belong, as
CSS backgrounds to the elements/divs.
Karl Rudd
On Tue, Jul 1, 2008 at 11:53 PM, Shaun <[EMAIL PROTECTED]> wrote:
>
> Thanks for the reply.
>
> I actually tried that. This was my first attempt:
>
> $("#Layer-4").addClass("defHide").hide();
> $("#Layer-3").hover(
> function(){ $("#Layer-4").show(); $("#Layer-3").hide(); },
> function(){ $("#Layer-3").show(); $("#Layer-4").hide(); });
> ...
>
> And that doesn't work because I'm actually swapping out the DIV
> layer. It flashes while the mouse is over the DIVs. I think that the
> show() and hide() from the first function cause the second one to
> fire.
>
> So then I tried this (which is such a hack, but on the chance that
> hover uses something other than mouseover, mouseout, mouseenter or
> mouseleave).
>
> $("#Layer-4").addClass("defHide").hide();
> $("#Layer-3").hover(
> function(){ $("#Layer-4").show(); $("#Layer-3").hide(); },
> function() { });
> $("#Layer-4").hover(
> function(){ },
> function(){ $("#Layer-3").show(); $("#Layer-4").hide(); });
> ...
>
> But still no joy. That works just like the original solution did -
> with the occasional 'sticking' for quick mouse movement.
>
>
>
> On Jun 30, 7:54 pm, "Karl Rudd" <[EMAIL PROTECTED]> wrote:
>> Have a look at the "hover" function:
>>
>> http://docs.jquery.com/Events/hover
>>
>> It deals with the issues associated with "mouseout" and "mouseover".
>>
>> Karl Rudd
>>
>>
>>
>> On Tue, Jul 1, 2008 at 12:14 PM, Shaun <[EMAIL PROTECTED]> wrote:
>>
>> > I was able to verify that it looks slow on FF3 today as well.
>>
>> > If anyone knows of a lighter weight solution, please post. Thanks.
>>
>> > On Jun 29, 11:41 am, Shaun <[EMAIL PROTECTED]> wrote:
>> >> Hello All -
>>
>> >> I have the problem where for an image rollover, moving the mouse very
>> >> quickly can leave my roll over 'on' because the mouseout (mouseleave
>> >> seems to do the same thing) doesn't always fire reliably.
>>
>> >> I wrote a solution to the problem but I don't like it. I've posted
>> >> the example here:http://psd2cssonline.com/tutorials/nav/index.html
>>
>> >> The important code is this:
>>
>> >> var mouseX, mouseY;
>> >> $('*').mousemove( function(e) { mouseX = e.pageX; mouseY =
>> >> e.pageY; });
>> >> setInterval( function () {
>> >> $('.defHide:visible').each( function() {
>> >> if( mouseX < $(this).offset().left || mouseX > $
>> >> (this).offset().left + $(this).width() ||
>> >> mouseY < $(this).offset().top || mouseY > $(this).offset().top
>> >> + $(this).height() )
>> >> { $(this).trigger( 'mouseout' ); } });
>> >> }, 100 );
>>
>> >> where all of the divs that are to be hidden by default have the class
>> >> defHide added to them.
>>
>> >> The technique is kludgy at best however because it works by setting a
>> >> watchdog timer that checks current mouse position against the screen
>> >> space location of any currently visible divs that should by default be
>> >> off. It is CPU consuming and not very elegant. It seems to work fast
>> >> enough in IE7 and Opera (no visual performance degradation) but my FF2
>> >> actually looks slower when this is enabled.
>>
>> >> Does anyone know of a better solution to this problem?
>>
>> >> Thanks.
>>
>> >> --
>> >> Shaun
>> >> [EMAIL PROTECTED]
>
