How to keep div focus when the mouse enters a child node

Question

Hey,

So I have this page here: http://www.eminentmedia.com/development/powercity/

As you can see when you mouse over the images the div slides up and down to show more information. Unfortunately I have 2 problems that i can't figure out and I've searched but haven't found quite the right answer through google and was hoping someone could point me in the direction of a tutorial.

The first problem is that when you mouse over an image it changes to color (loads a new image), but there's a short delay when the image is loading for the first time so the user sees white. Do I have to preload the images or something in order to fix that?

My second problem is that when you move your mouse over the 'additional content area' it goes crazy and starts going up and down a bunch of times. I just don't have any idea what would cause this but i hope one of you will!

All my code is directly in the source of that page if you would like to view the source.

Thanks in advance for your help!

Answer 1

Hi, I can see your images (the ones that are changing) are set in the background of a div. Here is a jquery script that preloads every image found in a css file. I have had the same problem in the past and this script solves it. It is also very easy to use:

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

I will take a look at your other problem...

Answer 2

1) You should be using the jquery events to drive your mouseovers. Give each div a class to indicate that its a category container and use the hover function to produce the mouseover/mouseout action you're after.

html

<div id="industrial" class="category"></div>

Javascript

$(".category").hover(
  function () {
    $(this).find('.container').show();
  }, 
  function () {
    $(this).find('.container').hide();
  }
);

I simplified the code to just do show and hide, you'll need to use your additional code to slide up and slide down.

2) Yes, you need to preload your images. Another option would be "sprite" the images. This would involve combining both the black and white and colour versions of each image into a single image. You then set it as the div's background image and simply use CSS to adjust the background-position offset. Essentially, sliding instantly from the black and white to colour images as you rollover. This technique guarentees that both images are fully loaded.

Answer 3

Yes, you have to preload the images. Thankfully, this is simple:

var images_to_preload = ['myimage.jpg', 'myimage2.jpg', ...];
$.each(images_to_preload, function(i) {
    $('<img/>').attr({src: images_to_preload[i]});
});

The other thing you have to understand is that when you use jQuery you have to truly embrace it or you will end up doing things the wrong way. For example, as soon as you find yourself repeating the same piece of code in different places, you are probably doing something wrong. Right now you have this all over the place:

<div id="service" onmouseover="javascript:mouseEnter(this.id);" onmouseout="javascript:mouseLeave(this.id);">

Get that out of your head. Now. Forever. Always. Inline javascript events are not proper, especially when you have a library like jQuery at your disposal. The proper way to do what you want is this:

$(function() {
    $('div.box').hover(function() {
        $(this).addClass('active');
        $(this).find('div.slideup').slideDown('slow');
    }, function() {
        $(this).removeClass('active');
        $(this).find('div.slideup').slideUp('slow');
    });
});

(You have to give all the #industrial, #sustainable, etc elements a class of 'box' for the above to work)

These changes will also fix your sliding problem.