/    Sign up×
Community /Pin to ProfileBookmark

Image swap, for a photo album.

Copy linkTweet thisAlerts:
Feb 22.2006

On a part of my website you click on a link and I started out by using a script for inline frame webpage that I got from Rik Comery in [URL=http://www.webdeveloper.com/forum/showthread.php?t=90289]this[/URL] thread. I changed the loadIframe to onbodyload, then bodyload. I also swiched the getelementbyid to bytagname, but Im just stuck. can anybody help me? To cheak out the page Im using this for go to [url]http://www.freewebs.com/phildog/CSP/Pictures.html[/url] and im using the & symbol in the place of add I am putting in latter.

[CODE]function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split(“&”);
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split(“=”);
if (pair[0] == variable) {
return pair[1];
}
}
}
function onbodyload(){
if(getQueryVariable(“page”)==”” || !getQueryVariable(“page”)){
}else{
document.getElementTagName(“img”).src = getQueryVariable(“page”)
}
}[/CODE]

to post a comment
JavaScript

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceFeb 22.2006 — Stick with what has worked for at least eight years and continues to work in all browsers that support images. Give your IMG tag a NAME attribute and use the following:

document.images["imageName"].src = "...url...";

Also, there is no [b]onbodyload[/b] event -- only [b]onload[/b], or [b]onclick[/b], etc.

You probably want [b]window.onload[/b]?
Copy linkTweet thisAlerts:
@PhilDogauthorFeb 22.2006 — Stick with what has worked for at least eight years and continues to work in all browsers that support images. Give your IMG tag a NAME attribute and use the following:

document.images["imageName"].src = "...url...";

Also, there is no [b]onbodyload[/b] event -- only [b]onload[/b], or [b]onclick[/b], etc.

You probably want [b]window.onload[/b]?[/QUOTE]
I tried getElementbyname dosent work though ? I updated the page take a you guys would be so kind.
Copy linkTweet thisAlerts:
@phpnoviceFeb 22.2006 — It is actually [B]getElementsByName()[/B] (note the plural and the capitalizations), but don't use that. Use this:

document.images["imageName"].src = "...url...";
Copy linkTweet thisAlerts:
@PhilDogauthorFeb 22.2006 — still dosent work? I dont realy understand why though?
Copy linkTweet thisAlerts:
@phpnoviceFeb 22.2006 — OK, here's a reformat and correction of your source. Try this:
[code=html]
<html>
<HEAD>
<title>- :. Cyber Sledge Productions .:</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--//
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
}
function init(){
if(getQueryVariable("pic")=="" || !getQueryVariable("pic")){
}else{
document.images("image").src="CSP/Images/arrows.gif"
}
}
window.onload = init;
//-->
</script>
<script type="text/javascript" src="/i.js"></script>
</HEAD>

<body>
<table align=center class="3dbox"><tr><td>
<!--Ad code-->
<a>&</a>
<!--Ad code-->
</td></tr>
</table>
<br/>
<table align=center class="3dbox"><tr><td>
<img name="image" border="0" src="WIPS/Images/first.gif"/>
</td></tr>
</table>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@PhilDogauthorFeb 22.2006 — Thanks man, I got to remember to thank you for this on the page.

would it be possible for it to preload the image before making the swich?
Copy linkTweet thisAlerts:
@phpnoviceFeb 22.2006 — You've got two of these in your page now. Remove one:

<script type="text/javascript" src="/i.js"></script>

What would be the benefit to preloading and then immediately displaying an image? Otherwise, yes, that can be done.
Copy linkTweet thisAlerts:
@PhilDogauthorFeb 22.2006 — Nevermind its still not working... Its swiches the picture, but it always shows up with that image not there thing?

The page:

http://www.freewebs.com/phildog/CSP/Pictures.html?pic=http://webzoom.freewebs.com/phildog/CSP/WIPS/Images/second.gif

A picture:

http://webzoom.freewebs.com/phildog/CSP/WIPS/Images/second.gif
Copy linkTweet thisAlerts:
@PhilDogauthorFeb 22.2006 — 
[CENTER][FONT=Lucida Console]B U M P

R P Y O

I[COLOR=#f1f1f1]-----[/COLOR]S

N[COLOR=#f1f1f1]-----[/COLOR]T

G[COLOR=#f1f1f1]------[/COLOR][/FONT][/CENTER]
Copy linkTweet thisAlerts:
@phpnoviceFeb 22.2006 — I copied your source. Note the two red lines:
<i>
</i>&lt;html&gt;
&lt;HEAD&gt;
&lt;title&gt;- :. Cyber Sledge Productions .:&lt;/title&gt;
&lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
&lt;script type="text/javascript"&gt;
&lt;!--//
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&amp;");
for (var i=0;i&lt;vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
}
function init(){
if(getQueryVariable("pic")=="" || !getQueryVariable("pic")){
}else{
document.images("image").src="CSP/Images/arrows.gif"
}
}
window.onload = init;
//--&gt;
&lt;/script&gt;
[COLOR=Red]&lt;script type="text/javascript" src="/i.js"&gt;&lt;/script&gt;[/COLOR]
&lt;/HEAD&gt;
&lt;body&gt;
&lt;table align=center class="3dbox"&gt;&lt;tr&gt;&lt;td&gt;
&lt;!--Ad code--&gt;
&lt;a&gt;&amp;&lt;/a&gt;
&lt;!--Ad code--&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;br/&gt;
&lt;table align=center class="3dbox"&gt;&lt;tr&gt;&lt;td&gt;
&lt;img name="image" border="0" src="Images/loading.gif"/&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;!-- --&gt;[COLOR=Red]&lt;script type="text/javascript" src="/i.js"&gt;&lt;/script&gt;[/COLOR]&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@PhilDogauthorFeb 24.2006 — Thanks, the code should be gone now, but the code still don't work?

any help?
Copy linkTweet thisAlerts:
@phpnoviceFeb 24.2006 — I still see it twice in the original link you supplied. However, I also finally noticed this, too:

document.images("image").src=getQueryVariable("pic")

That should be this:

document.images["image"].src=getQueryVariable("pic")
×

Success!

Help @PhilDog 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.7,
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,
)...