change links on page from .html to .jpg [Archive]

jordanmerrick

05-28-2009, 01:27 AM

Hi - I'm a bit of a newbie with regards to javascript but am really starting to bury my head in a few books and am thoroughly enjoying it.

I'm using an image gallery generator that creates a page for each photo. For example,

<div id="pictures">
<a href="image001-large.html"><img src="image001-small.jpg"></a>
</div>

However, all image001-large.html contains is an <img> tag for image001-large.jpg. I'd rather the link be as follows

<a href="image001-large.jpg"><img src="image001-small.jpg"></a>

So I just want to change the .html of the link to .jpg. Rather than change each page manually after creation I'm wondering if there was a way to change the links using javascript? the software I'm using will allow me to add to the <head> section of the pages generated. That way, the links would be direct to the large image and not the generated html file (that way I can use something like greybox or Slimbox to display the images)

Any help would be greatly appreciated!

TinyScript

05-28-2009, 08:08 AM

there's probably a better way to do this, but I came up with this because it sounded like what you were looking for

<HTML>
<HEAD>
<TITLE></TITLE>

<script type="text/JavaScript">
function aload(){
var Atags=document.getElementsByTagName('a'); /*get all the a tags and make an array */
var oldhref=Atags[0].href; /*make var set to the contents of array position 0 href attribute*/
var s=oldhref.split('.'); /*seperate the address into an array based on where the . is. if you had more than one dot, you'll need to account for it*/
s[1]="jpg"; /*change the value of the portion of the array contaianing the string "href"*/
var newhref=s.join().replace(',','.'); /*recombine the array contents and replace the , with a . */
Atags[0].href=newhref; /*now give the a tag the new address with the .jpg instead of .html*/
}
</script>

</HEAD>

<BODY onload="aload()">

<div id="pictures">
<a href="image001-large.html"><img src="image001-small.jpg"></a>
</div>
</BODY>

</HTML>