Changing the href attribute on hover with jQuery

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").rep开发者_运维问答lace(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.

I see a few issues. The first being order of operations. You added the click handler for the button in the (document).ready function as well as running the code to add the hover function to the ss class items. The problem is that the second half of the code that adds the hover event handler is running as soon as the page is ready but nothing has the ss class since you haven't clicked the button yet. As I see it you have a few options. If you need to have the button in there then you can use the .live() event to make sure that once you add the ss class to the link that they will get the event handler.

$(document).ready(function (){
    $("button").click(function() {
        $("#screenshots a").addClass('ss');
    });

    $('.ss').live('mouseover mouseout',function(event){

        var over = 'http://208.167.244.33/208.167.244.33/';

        if(event.type == 'mouseover'){    
            $(this).data('oldHref', $(this).attr('href'));    
            $(this).attr('href', over + $(this).data('oldHref'));
        }else{
            $(this).attr('href', $(this).data('oldHref'));
        }   
    });
});​

If you don't need the button you can clean things up a bit

$(document).ready(function (){        
    $('#screenshots a').hover(function(){        
        var over = 'http://208.167.244.33/208.167.244.33/';           
        $(this).data('oldHref', $(this).attr('href'));    
        $(this).attr('href', over + $(this).data('oldHref'));
    },function(){
        $(this).attr('href', $(this).data('oldHref'));
    });
});​

If you don't need to retain the original href, you can really clean it up

$(document).ready(function (){ 
    var over = 'http://208.167.244.33/208.167.244.33/';
    $('#screenshots a').each(function(){    
        $(this).attr('href', over + $(this).attr('href'));
    });
});