title: Changing the href attribute on hover with jQuery
body: <p>Ok, I have an html page that is loaded into another html page via PHP (ok so its a PHP page, whatever). The page that is loaded is a list of hyperlinks. I need to change the href attribute to make the hyperlinks relative to the location of the stored images they refer too. When i load the page containing the hyperlinks the links are relative to the web host server, not the server that the page is actually hosted from.</p>
  
  <p>Somthing like this:</p>
  
  <pre><code>&lt;div #screenshots)
  &lt;p&gt;&lt;a href="image1.htm"&gt;Image1&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href="image2.htm"&gt;Image2&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href="image3.htm"&gt;Image3&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href="image4.htm"&gt;Image4&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href="image5.htm"&gt;Image5&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I mouse over the links, the status bar shows the reference as "<a href="http://webHostServer.com/image1.htm" rel="nofollow noreferrer">http://webHostServer.com/image1.htm</a>". If I click it I get a 404 error. I need the href to change to something like this when I mouse over it: "<a href="http://www.actualImageHostServerIPaddress/image1.htm" rel="nofollow noreferrer">http://www.actualImageHostServerIPaddress/image1.htm</a>"</p>
  
  <p>I looked at <a href="https://stackoverflow.com/questions/2016312/jquery-selector-how-to-change-the-src-attribute-of-an-image-tag-on-link-hover">this</a> for assitance and came out with the following jQuery code, but for some reason none of it works:</p>
  
  <pre><code>$(document).ready(function(){
   $("button").click(function() {
   $("#screenshots a").addClass('ss');
   });
   $(".ss").each(function()
   {
    $(this).data("oldHref", $(this).attr("href"));
    orig = $(this).attr("href");
    over = "http://208.167.244.33/208.167.244.33/";
   $(this).hover(function() {
    $(this).attr("href", $(this).attr("href").replace(orig, over+orig));
    }, function() {
      $(this).attr("href", $(this).data("oldHref"));
    });
  });
  </code></pre>
  
  <p>When I click the button it dosen't add the class to the anchor tags, so when I hover over them nothing changes. Any help here would be great.</p>