title: jQuery Rollover Image Not Working
body: <p>I was working on the practice tutorials of JavaScript &amp; jQuery: The Missing Manual (Chapter07 - rollover.html). The link to the source files is <a href="http://sawmac.com/js2e/" rel="nofollow">http://sawmac.com/js2e/</a></p>
  
  <p>As per the instructions, after having entered the appropriate code for the jQuery functionality related to image rollover, there seems to be no change.</p>
  
  <p>When I mouse over each of the black and white images, they do not seem to pop into full color.</p>
  
  <p>The jQuery code is:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
      $(‘#gallery img’).each(function() {
          var imgFile = $(this).attr('src');
          var preloadImage = new Image();
          var imgExt = /(\.\w{3,4}$)/;
          preloadImage.src = imgFile.replace(imgExt,'_h$1');
          $(this).hover(
              function() {
                  $(this).attr('src',preloadImage.src);
          },
              function() {
                  $(this).attr('src',imgFile);
              }
          );// end hover
      });// end each
  }); // end ready
  &lt;/script&gt;
  </code></pre>
  
  <p>The complete html file source code is shown below:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="wrapper"&gt;
  &lt;div class="header"&gt;
      &lt;p class="logo"&gt;JavaScript &lt;i&gt;&amp;&lt;/i&gt; jQuery &lt;i class="mm"&gt;The&lt;br&gt;Missing&lt;br&gt;Manual&lt;/i&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  
  &lt;div class="content"&gt;
      &lt;div class="main"&gt;
          &lt;h1&gt;Rollover Images&lt;/h1&gt;
          &lt;p&gt;Mouse over the images below&lt;/p&gt;
          &lt;div id="gallery"&gt; &lt;a href="../_images/large/blue.jpg"&gt;&lt;img src="../_images/small/blue.jpg" width="70" height="70" alt="blue"&gt;&lt;/a&gt; &lt;a href="../_images/large/green.jpg"&gt;&lt;img src="../_images/small/green.jpg" width="70" height="70" alt="green"&gt;&lt;/a&gt; &lt;a href="../_images/large/orange.jpg"&gt;&lt;img src="../_images/small/orange.jpg" width="70" height="70" alt="orange"&gt;&lt;/a&gt; &lt;a href="../_images/large/purple.jpg"&gt;&lt;img src="../_images/small/purple.jpg" width="70" height="70" alt="purple"&gt;&lt;/a&gt; &lt;a href="../_images/large/red.jpg"&gt;&lt;img src="../_images/small/red.jpg" width="70" height="70" alt="red"&gt;&lt;/a&gt; &lt;a href="../_images/large/yellow.jpg"&gt;&lt;img src="../_images/small/yellow.jpg" width="70" height="70" alt="yellow"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;
  &lt;p&gt;JavaScript &amp;amp; jQuery: The Missing Manual, by &lt;a href="http://sawmac.com/"&gt;David McFarland&lt;/a&gt;. Published by &lt;a href="http://oreilly.com/"&gt;O'Reilly Media, Inc&lt;/a&gt;.&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Appreciate if someone can advise where I am going wrong. Thanks!</p>