Welcome to WebmasterWorld Guest from 54.144.80.75

Forum Moderators: open

Message Too Old, No Replies

Script to change Image URL

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

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

New User

5+ Year Member

joined:Jan 4, 2010
posts:3
votes: 0


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]

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

Full Member

10+ Year Member

joined:July 6, 2005
posts:215
votes: 0


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]

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

New User

5+ Year Member

joined:Jan 4, 2010
posts:3
votes: 0


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

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

Senior Member from US 

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

joined:Oct 17, 2005
posts:4966
votes: 10


@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?
11:50 pm on Jan 4, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Nov 17, 2009
posts:41
votes: 0


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.
2:14 pm on Jan 5, 2010 (gmt 0)

Full Member

10+ Year Member

joined:July 6, 2005
posts:215
votes: 0


@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)
11:49 am on Jan 7, 2010 (gmt 0)

New User

5+ Year Member

joined:Jan 4, 2010
posts:3
votes: 0


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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members