/    Sign up×
Community /Pin to ProfileBookmark

Make HREF Variable Throughout Site

Copy linkTweet thisAlerts:
Jul 19.2005

Hello!

I am wondering if this can be done using JavaScript:

Every image src across all my HTML pages is referenced as “/webapp/images/imagename.gif. I would like to make “/webapp/” variable, so that when I change the name in an external js file, then all my image references/sources in the site change too.

Thanks you!

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@UltimaterJul 20.2005 — Well, the simplest way would be to use the BASE tag.
<i>
</i>&lt;base href="https://webdeveloper.com/forum/"&gt;
&lt;img src="image.php?u=30185&amp;dateline=1119832387"&gt;

I doubt that the BASE-tag is part of the W3C, so taking another harder approach might be a good idea. Also note that the BASE tag is supposed to be nested within your HEAD tag.
Copy linkTweet thisAlerts:
@dev00authorJul 20.2005 — Thanks for ther reply. The base tag though, would also affect hrefs, correct? I am wondering, would this have to be done using acookie?
Copy linkTweet thisAlerts:
@UltimaterJul 20.2005 — Yes, it would also effects HREFs as well as SRCs. If you provide a full-path URL for either, the href or src though, it will remain uneffected by the BASE-tag. The BASE-tag is used to over-ride the base, default directory that is used for all your URLs -- providing full-path URLs don't use the default directory.

Example:
<i>
</i>&lt;base href="http://http://www.yahoo.com/"&gt;
&lt;img src="https://webdeveloper.com/forum/image.php?u=30185&amp;dateline=1119832387"&gt;


If you don't decide to use the BASE-tag approach, you can always give each tag/node element that you want to change a special class name.

(note that you can assign more than one class per element)

Then use a JavaScript function document.getElementsByClassName to update each of your elements.

However, document.getElementsByClassName isn't cross-brower, but it will be after this:
<i>
</i>if(!document.getElementsByClassName&amp;&amp;(document.getElementsByTagName||document.all))
document.getElementsByClassName=function(){
var findings=[],tmp,j,i,els=(document.getElementsByTagName)?document.getElementsByTagName("*"):document.all;

for(i=0;i&lt;els.length;i++) {
tmp=els[i].className.split(" ")
for(j=0;j&lt;tmp.length;j++)
if(tmp[j]==arguments[0])findings[findings.length]=els[i]
}


return findings
}

Note that I am the original programmer of the above code and it's open for public usage w/o any copyright bull being attached.
Copy linkTweet thisAlerts:
@dev00authorJul 20.2005 — The problem I will have with using a Base HREF, is I need to be able to change the "/webapp/" directory in one location (external js file) so that it effects all the pages. I will not be able to touch (search and replace) all the pages in the site, as the site moves from one environment to another.
Copy linkTweet thisAlerts:
@UltimaterJul 20.2005 — Send each page a QueryString.

MyPage1.html?dir=webapp

MyPage2.html?dir=webapp

MyPage1.html?dir=whatever

MyPage2.html?dir=whatever

You can use JavaScript's location.search method to "look at" the query string in any given page. You chould also use cookies, but not all users browse with cookies enabled. Cookies can also be deleted over time and they also can be deleted by user maintanence

Thus, using a query string would be a better idea than cookies.
Copy linkTweet thisAlerts:
@dev00authorJul 20.2005 — That might work. Thanks for the idea. I am going to give it a try and see how it works out. :p
Copy linkTweet thisAlerts:
@UltimaterJul 20.2005 — Actually, instead of using JavaScript which 10% browse with disabled, you would be better off doing all of this in PHP with sessions. If you don't know any PHP, doing it in JavaScript is also ok but you will lose out on a potential 10%.
×

Success!

Help @dev00 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...