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.

Somthing like this:

<div #screenshots)
<p><a href="image1.htm">Image1</a></p>
<p><a href="image2.htm">Image2</a></p>
<p><a href="image3.htm">Image3</a></p>
<p><a href="image4.htm">Image4</a></p>
<p><a href="image5.htm">Image5</a></p>
</div>

When I mouse over the links, the status bar shows the reference as "http://webHostServer.com/image1.htm". If I click it I get a 404 error. I need the href to change to something like this when I mouse over it: "http://www.actualImageHostServerIPaddress/image1.htm"

I looked at this for assitance and came out with the following jQuery code, but for some reason none of it works:

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

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.