Changing Image paths on a page

**tdblanchard** · 03-20-2007, 04:34 PM

sup y'all.
i'm trying to write a script that'll add to the paths of all the img tags on a page...
in other words,

HTML Code:

<img src="images/someImage.gif" alt="" border="0" />

would turn into

HTML Code:

<img src="../images/someImage.gif" alt="" border="0" />

it's the "../" that needs to be added.
here's what i have so far. works in FF but no dice in IE7:

Code:

function findImages(){  
  var img_tag = document.getElementsByTagName('img');  
  var every_image = img_tag[0];  
  var img_src = every_image.getAttribute("src");  
  for (var i=0;i<img_tag.length;i++) {  
       img_src = img_tag[i].getAttribute("src"); 
       img_tag[i].src = img_src.replace(/^images\/+/i, "../images/");
       }  
  }

**Twey** · 03-20-2007, 06:40 PM

How's this:

Code:

function prependToImages(s) {
  var base = document.createElement("img");
  base.src = "/";
  base = base.src;
  for(var i = 0, e = document.images; i < e.length; ++i)
    e[i].src = base + s + e[i].src.replace(base, "");
}

Untested.

**tdblanchard** · 03-20-2007, 06:47 PM

Originally Posted by Twey

How's this:

Code:

function prependToImages(s) {
  var base = document.createElement("img");
  base.src = "/";
  base = base.src;
  for(var i = 0, e = document.images; i < e.length; ++i)
    e[i].src = base + s + e[i].src.replace(base, "");
}

Untested.

that creates image tags. i want to replace the src attribute.

**Twey** · 03-20-2007, 06:50 PM

No it doesn't. Read it again.

**tdblanchard** · 03-20-2007, 06:58 PM

it doesn't seem to work.

**Bob90** · 03-20-2007, 07:01 PM

EDIT: Sorry, wrong idea

This should work. Just put in a HTML file and use away.

Code:

<textarea id="textToSort" cols=50 row=20>
<img src="images/hellokitty.png">
<img src="images/ohoh.png">
</textarea>
<input type="button" onClick="replaceSrcBeg()" value="Replace">

<script>
function replaceSrcBeg()
	{
	var text = document.getElementById("textToSort").innerHTML;
	text = text.replace(/img\ssrc\=\"/gi,"img src=\"../")
	document.getElementById("textToSort").innerHTML =text;
	}
</script>

**Bob90** · 03-20-2007, 07:06 PM

Does this not work?

Code:

for(var i = 0, e = document.images; i < e.length; ++i)
    e[i].src = "../"+e[i].src;

**tdblanchard** · 03-21-2007, 01:05 PM

ok.
i guess i didn't explain exactly what it is i'm trying to do...
i want the js to go through the page and prepend each image tag with "../" or maybe even a "../../".
this is a solution to the far-to-often problem in static sites with pages residing in different levels of the site that use the same include file. until now, i've just used a different include file for pages that are one or two levels deep, but i thought that a simpler solution would be to have those pages use a script that simply acts as a "base url" for just images. i would use the base url tag but it can't be relative.

**mburt** · 03-21-2007, 01:26 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Source Changer</title>
<script type="text/javascript">
function load() {
var img = document.getElementsByTagName("img");
for (var i=0;i<img.length;i++) {
	img[i].setAttribute("src","../"+img[i].getAttribute("src"));
	}
document.onclick=function(){alert(img[0].getAttribute("src"))}
}
window.onload=load
</script>
</head>
<body>
<img src="images/foo.png">
</body>
</html>

The above in red is just a test to show the first image's new src. You can remove it.

**Twey** · 03-21-2007, 04:11 PM

this is a solution to the far-to-often problem in static sites with pages residing in different levels of the site that use the same include file. until now, i've just used a different include file for pages that are one or two levels deep, but i thought that a simpler solution would be to have those pages use a script that simply acts as a "base url" for just images. i would use the base url tag but it can't be relative.

Static sites cannot include files, unless you're talking about something like using XMLHttpRequest to retreive a page -- this is horribly ugly.
Modify the paths with whatever server-side language you're using to include the files.

Thread: Changing Image paths on a page

Thread Tools

Search Thread

Changing Image paths on a page

Cheap n Nasty

Bookmarks

Bookmarks

Posting Permissions