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.

Are the images stored in the same relative path on each server? — Michael
– Michael, Commented Apr 6, 2010 at 4:18
Is it just me, or are you "travelling to Moscow by going around the Moon"? I mean, why no just change the links when you load the html and be done with it? Or better yet, change them on the server? — R. Martinho Fernandes
– R. Martinho Fernandes, Commented Apr 6, 2010 at 4:19
Is there a reason why you can't just put the full path including the http:// into the href to begin with? — digitaldreamer
– digitaldreamer, Commented Apr 6, 2010 at 4:20

AdmSteck · Accepted Answer · 2010-04-06 14:54:06Z

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

Collectives™ on Stack Overflow

Changing the href attribute on hover with jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related