CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Free Lancer
Free Lancer

Reputation: 1000

Make the image inside of a div change to another image on mouse over

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?

Here is an Image of the DIV

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>

Upvotes: 0

Views: 5250

Answers (4)

Jesse Atkinson
Jesse Atkinson

Reputation: 11416

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

Upvotes: 1

idrumgood
idrumgood

Reputation: 4934

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

Upvotes: 2

Aaron
Aaron

Reputation: 5247

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

Upvotes: 2

Josh Stodola
Josh Stodola

Reputation: 82513

I would recommend 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);
    }
  );
});

Upvotes: 2

Related Questions