Script to change Image URL

How to use Javascript to change an images location...

[trotts1974]

Hi All,

Really hope you can help me out, I'm totally new to JavaScript but think this may be possible using it, so I'm looking for a little help please...!

I'm developing a site that is going to be franchised, each franchisee will get a copy of the site which is dynamically updated by the original master sites database, i've got this working fine except all the images on the master site use relative urls and i need to change this to an absolute url, for example:

Master sites image code:

<img src="assets/images/logo.png"/>

What i need:

<img scr="http://www.example.com/assets/images/logo.png" />

Is it possible to change all image location to the absolute address using JavaScript, if so can anyone point me in the right direction on how to do this.

Thanks in advance!

[edited by: Fotiman at 2:45 pm (utc) on Jan. 4, 2010]
[edit reason] Examplified URLs [/edit]

[Kings on steeds]

Short Answer, Yes!

function replaceSrcs(){
var imgs = document.getElementsByTagName('img');
var url = 'http://www.example.com/';
foreach(imgs as i){
 i.src = url + i.src;
}
}
window.onload = function(){ replaceSrcs(); }

Longer answer,

why? why not build it into the site, like in php or something as if they have javascript turned off the images wont show? not sure you want a site that totaly breaks for those without JS

Alan

[edited by: Fotiman at 2:45 pm (utc) on Jan. 4, 2010]
[edit reason] Examplified URLs [/edit]

[trotts1974]

Thanks for the help Alan, I can see what you mean about those that have JS turned off, I wasnt really sure if it was possible using PHP as again it's something i'm slowly getting to grips with.

Do you know how to do the same thing using php or where i can find a guide?

Thanks again.
Lee

[Fotiman]

@Kings on steeds,
1. There is no "foreach" method in JavaScript.
2. Even if you were to iterate through the imgs, the src attribute is not going to contain the raw text string, but rather the computed value of the image source. For example, suppose you had this:
<img src="logo.png">
That src is relative to the current URL. If you try to access that src property with JavaScript, it will return the fully qualified URL, not "logo.png". So if you were to do something like this:
i.src = url + i.src;
You'd end up with something like:
i.src = "http://www.example.com/" + "http://www.example.com/assets/images/logo.png";

@trotts1974:

which is dynamically updated by the original master sites database

It seems like the correct place to store the URL for the image, then, would be in the database. That way, you could store it as "http://www.example.com/assets/images/logo.png". Is there a reason you don't simply do that?

[chasehx]

As said, I would not use JS. Use PHP, JS in a browser that has it disabled will cause your site to break. Since PHP is server side, it will always work, so long as your server is of course.

[Kings on steeds]

@Fotiman Thanks, I just use .each() in prototype, should have though about it more there i was again trying to be helpful and getting it wrong :-) (I promise I can code JS quite well despite the slips :p)

[trotts1974]

Thank everyone for your comments.

One of the reasons it's not stored in the DB is because the main site will be using an opensource CMS system that's currenly uses relative url's within the whole of the pages content html so i'm not reallu sure if this is possible.

I've got in touch with the CMS people to see if it's possible to use absolute instead of the relative.

Thanks again.