[jQuery] Re: use .each? hover over list items to change contents of div

[Mike Alsup]

> <ul id="fruits">
>         <li id="apple">apple</li>
>         <li id="orange">orange</li>
>         <li id="grape">grape</li>
> </ul>
>
> I also have a div that is currently displaying an image of an apple using a
> background image:
>
> <div id="fruit-display"></div>
>
> where
>
> #fruit-display {background: url(images/image_apple.jpg)}
>
> I want to be able to change the image as I hover over the different items on
> the list.
>
> I have something like this:
>
>         $('#fruits li').mouseover(function() {
>                 id = $(this).attr('id');
>                 menuId = '#' + id
>                 image = 'url(images/image_' + id + '.jpg)'
>
>                 $(menuId).mouseover(function(){
>                         $('#fruit-display').css("backgroundImage", image);
>                 });
>         });
>
> but, of course, those images won't be ready until after you've hovered over
> a list item.
>
> I mean, I can hover over orange, but it will still show an image of the
> apple until I hover over another fruit and then back again on orange. How
> can I get the orange to show up exactly when I hover over the list item
> called orange?


Try this:

$('#fruits li').mouseover(function() {
    var image = 'url(images/image_' + this.id + '.jpg)';
    $('#fruit-display').css('backgroundImage', image);
});