Welcome to WebmasterWorld Guest from 54.221.49.52

Forum Moderators: open

Message Too Old, No Replies

Script to change Image URL

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

     

trotts1974

11:07 am on Jan 4, 2010 (gmt 0)

5+ Year Member



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

1:27 pm on Jan 4, 2010 (gmt 0)

10+ Year Member



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

3:50 pm on Jan 4, 2010 (gmt 0)

5+ Year Member



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

4:54 pm on Jan 4, 2010 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



@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

11:50 pm on Jan 4, 2010 (gmt 0)

5+ Year Member



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

2:14 pm on Jan 5, 2010 (gmt 0)

10+ Year Member



@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

11:49 am on Jan 7, 2010 (gmt 0)

5+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month