Question

I have 2 images one as a background image and 1 as a foreground image

the css is as follows :

#backImage{
    position: absolute;
    float: left;
    z-index: 0;
}

#mainImage{
    float: left;
    position: absolute;
    z-index: 1;
    left: 12px;
    top: 10px;
}

The mark-up is as follows :

<div id="homepageCarousel">
    <img id="backImage" src="discreet images/white_bg.png" />
        <img id="mainImage" src="discreet images/homepage_img1.jpg" />  
    //some other divs
</div>

I have a navigation bar at the top,

as I hover over each item in the bar, the mainImage should go and the image corresponding to the navigation item should appear.

How can I do this in jQuery, this is what I have thus far : (for now, I’m just trying to remove() and append() the mainImage)

$("#navigation li").mouseover(function(){
        $("#mainImage").remove();
    }).mouseout(function(){
        $("#backImage").append("<img id='mainImage' 
           src = 'discreet images/homepage_img1.jpg' />");
});

Answer 1

I’d suggest simply changing the src attribute of the img element, rather than appending and removing elements as those are expensive operations to run.