Need to make div a rollover for image within (using jquery)

Question

alright so i have some unique problems; first of all, my jquery is not working; i very well might have not put it in the html right so i am going to toss a good deal of code out to see;

basically i need the rollover class image to change to its hover state when the div class is rolled-over (i have a some css which changes the div class display to block) alright so here is the html

<div id="header">
<div class="home" id="home" ><a href="index.html"><p><img src="images/home-crown.png" class="rollover" width="100px" /></p></a></div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
<script type="text/javascript" src="js/load-it-up.js"></script>

/so yeah... trying to swap that image stuff out here is jquery

$(document).ready(function(){

 $("img.rollover").hover(
      function() 
        {this.src = this.src.replace("images/home-crown.png","images/home-crown-hover.png");},
      function() 
        {this.src = this.src.replace("images/home-crown-hover.png","images/home-crown.png");}
 ); 
});

really frustrated with it because i have tried multiple solutions; any help at all would be appreciated; it is probably something stupid :P

right now i am just trying to get the image to rollover (at least) i really want the rollover to activate when the div is rolled over (the #home div)

Answer 1

Try this.

$("img.rollover").hover(
   function(){
      $(this).attr("src","images/home-crown-hover.png");
   },
   function(){
      $(this).attr("src","images/home-crown.png");
   }
);