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>

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>

• javascript
• jquery
• html
• css

• I don't quite understand what you're trying to do... is it to make the image clickable? make it hoverable? make the div clickable/hoverable? What? – Madara's Ghost Commented Jan 3, 2012 at 19:51
• 2. can you describe/show the file structure for the JS files? – Evan Davis Commented Jan 3, 2012 at 19:51
• I'm confused. You say in your title that you want the image to be clickable. But your question is about swapping out images on hover. If it's on hover that you're seeking, do you want the images to change when the mouse enters the div or the image? – DOK Commented Jan 3, 2012 at 19:52
• whoa. Sorry guys. I'll put up more info right now. Didn't expect such a quick response. – Free Lancer Commented Jan 3, 2012 at 19:58

4 Answers 4

$('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 acplished with .bind()

Update for ments:

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'));
});

I would remend doing this in CSS with a sprite background image, but if you must do it in jQuery...

$(function() {
  var div = $("#yourDiv");
  var img = div.find("img:first");
  var orig = img.attr("src");
  div.hover(
    function() {
      img.attr("src", "ImageOver.png");
    },
    function() {
      img.attr("src", orig);
    }
  );
});

If you're so-inclined, you could also do this without javascript by replacing your image with an anchor element, styling it, with CSS, like this...

a.imageLink {
    background: url('path/to/image.png') no-repeat;
    display: block;
    width: [width-of-image]px;
    height: [height-of-image]px;
    border: 0 !important;
    outline: 0 !important;
}

and then swapping out the background image with the :hover pseudoclass:

a.imageLink:hover {
    background-image: url('path/to/hover_image.png');
}

You should probably do this with CSS.

#img:hover {background: green;}

If you must use jQuery use .hover().

$("#img").hover(function (e) {
    $(e.target).css('background', 'purple');
},
function (e) {
    $(e.target).css('background', '');
});