PDA

View Full Version : 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,
<img src="images/someImage.gif" alt="" border="0" />would turn into
<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:

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:
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
How's this:
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.



<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?


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
<!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.

tdblanchard
03-21-2007, 05:18 PM
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.
a static site can use includes....
for a windows box, you would use:

<!--#include file="includes/resourceList.html" -->
for an apache box you would use:

<!--#include virtual="includes/resourceList.html" -->
even I know that.
but i'm using php includes. when i say "static", i use the term loosely. there is no dynamic content, db talkin', etc..

Twey
03-21-2007, 05:36 PM
That's not static. These are examples of server-side includes, SSI. These count as dynamic content.

tdblanchard
03-21-2007, 05:57 PM
regardless, no one has put up anything useable.

Twey
03-21-2007, 06:05 PM
i'm using php includes.Do a str_replace() on the include before echoing it, or define a variable in the including page then reference it from the included.

mburt
03-21-2007, 06:27 PM
regardless, no one has put up anything useable.
Did you see my post?