Changing the href attribute on hover with jQuery
- by AverageJoe
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.
