Changing the href attribute on hover with jQuery

Question

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.

Answer 1

@Michael - Yes the images are stored at the same relative path on the server.

@Martinho, @digitaldreamer - I think you are both asking the same question here. Maybe I need to explain it in a littel more detail. I am workin on a clients site that runs an online gaming clan for a certian MMO game. The game uses a system called "Punbuster" in order to prevent cheating. The Punkbuster sytem takes screenshots of the clients screen and saves the screenshots along with an .htm page linking to the screenshots to a directory on the game server. The client wants this "master" page with all of the screenshot links to be displayed on their website so they can just go to the site and view the screeshots quickly.

The master page can be viewed at the following address http://208.167.244.33/208.167.244.33/pbsvss.htm. This is the page I am loading into the PHP page on thier website. It contains links to other pages that display the screenshots. The linked to pages are stored on the game server, but when I load the page into the website the links become relative to the website server. The href attribute is to the .htm file located on the game server (href="pb000788.htm", href="pb000789.htm", etc.), so when it is referenced from the website server it becomes (http://www.theblacksunclan.net/html/pb000788.htm), but this file is not stored at this address so it returns a 404 error. I need to change the href of each of the links returned from the master page to be relative to the game server IP (http://208.167.244.33/208.167.244.33/pb000788.htm).

I figured the easiest way to do that was to use jQuery to do it on mouse over or hover. If anyone can suggest a better way I am open to suggestions. I am sure there is a way to do it with PHP when the file is loaded, but I am not aware of it.

Answer 2

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'));
    });
});