Question

How can I using jQuery make the image inside of a div change to another image on mouse over? I have a div that holds inside of it an image, a header, and some text. I want to make the image change on mouse over.

Also the template I use uses a lot of jquery but the files are all over the place. Where should I put the function?

EDIT: Here’s the code I have so far:

CSS:

#tour {
    overflow:hidden;
    width:100%;
    padding:56px 0 47px
}

#tour #link {
    height:auto;
    width:200px; /* 140px + 60px */
    float:left;
    margin-right:25px;
    margin-left:10px;   

}

#tour #link:hover {
    cursor:pointer;
}

#tour img {
    /* Float the image to the left of text */
    width:50px;
    float: left;
    margin-right:10px;
    height:auto;
}

#tour h1, h2, h3, h4 {
    display:block;
    width:140px;
    float:left;
}

#tour p, #tour p.last {
    display:table-row;
    width:140px;
    alignment-baseline:baseline;
    /* Custom added */
    color: #333;
    font-size: 10px;
    margin: 5px;
    font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    font-size: 11px;
    width: 140px;   
}

HTML:

<div id="tour"> 
   <div id="link" onclick="location.href='#';"  >               
      <img src="images/icn1.png" alt="" />
      <h2>Pitch</h2>
      <p>Present your ideas in a manner that will leave your customers in amazement.</p>
   </div>
 </div>

Answer 1

$('div#imageContainer').on('mouseover', function(){
    $(this).children('img').attr('src','../newImage.png');
});

That’ll do it. Doesn’t matter where you put the code, as long as it’s within the $(document).load(function(){...});

NOTE: this is using the latest jQuery 1.7.1 .on() function which is new to this version. Same thing can be accomplished with .bind()

Update for comments:

If you want to keep this function in a separate file, you can wrap it in a function

function imageSwap(){
    $('div#imageContainer').on('mouseover', function(){
        $(this).children('img').attr('src','../newImage.png');
    });
}

And then just call the imageSwap() function from within the document load.

Also, if you want to use this on multiple divs with different images, you can do one of two things. Either A) name your images something like img1_over.png and img1.png, in which case you can modify the code as such:

$('div#imageContainer').on('mouseover', function(){
    var img = $(this).children('img');
    img.attr('src', img.attr('src').replace('.png', '_over.png'));
});

Or you can store the image path in a data attribute on the image themselves. In your HTML you would add the hover image to a data attribute like so:

<img src="../cool_img.png" data-hover="../ever_cooler_image.png" />

And your code would look like this:

$('div#imageContainer').on('mouseover', function(){
    var img = $(this).children('img');
    img.attr('src', img.data('hover'));
});