Log in

View Full Version : coordinating an image swap with a caption


tweetypie
08-03-2006, 10:00 AM
Can somebody help me out?
My problem is with an image swap with a caption. no wait!...
The caption is already on the page, while the pictures are back on the server. what i want is for both to display at the same moment: only switch the caption when the image is loaded.
The page is at www.geocities.com/grintches/thea.html , although you may have to beat back the adverts in order to see it.
here's my code. professionals shut your eyes now:

imagea=new Image(); imageb=new Image() etc......
// make empty image objects
var list= new Array("this.jpg","that.jpg... etc
// a list of the image sources

function writeit(text,d,pic,imageobj,f) {
if(!imageobj.src) {
thediv[d].innerHTML='collecting picture...';
imageobj.src=list[f]; }
theimg[pic].src=imageobj.src
thediv[d].innerHTML=text
}
for instance it's called like this: onclick="writeit('the caption',2,3,imagea,4)".

It's going to write 'text' into a div called 'd', make list[f] the src for one of the empty image objects, and then swap imageobj.src into <img id=pic....

so: if imageobj.src is false, it goes to fetch the missing image and give imagevar a src. Before it goes off it writes up 'collecting picture...' - to tell the viewer that something's going on. And it's not supposed to change that til it's got the new image ready..

anyway, it doesn't work: it switches the caption straight away. I thought a computer did only one thing at a time, and would pause the function while fetching the image file... obviously not.

i tried: while(!imagevar.complete){ twiddle thumbs } but this makes the page freeze - in this case it does fully concentrate on doing what's in the brackets.....

what do i do??? i feel stupid. many many thanks if you can answer
jscheuer1
08-04-2006, 06:09 AM
You haven't defined thediv[d]. Try giving the division an id:


<div id="theDiv"></div>

and using something like:


function someName(id, txt){
document.getElementById(id).innerHTML=txt;
}

The above example could be called like so:


someName('theDiv', 'Hello World');
tweetypie
08-04-2006, 10:52 AM
yes i did that already - i just didn't include it in the post, which was rather long..... thediv was short for document.getElementById("something"), and theimg also...

it's the creation of a delay that i'm stuck on. i thought maybe start up another function with a timeout to loop until the thing is complete - but i'm sure i tried that. i tried lots of stuff, mostly stupid.

and it's the order that the computer does things in which i'm curious about... when you tell it to get a file from the server it's happy to start the process and then get on with some other linear task: but it can't get a file and at the same time do a looped task. it seems.

thanks for the reply. i'm not on your continent, so there's a delay in answering....
jscheuer1
08-04-2006, 12:35 PM
In that case, you might want to experiment with the image tag's onload event. Like the <body onload="someFunction('arg1', 'arg2');"> attribute, images may have the same kind of thing. This could come in handy for the timing of these actions. The image onload fires when the image is loaded and when a new image used as the src attribute is loaded, ex:

<img src="whatever.jpg" onload="swapText();">
tweetypie
08-04-2006, 05:40 PM
that's got to be it! i didn't know about that.


this is going to be useful. as long as that 'may have' doesn't get in the way. You'll have to look at the url in a couple of days.

hmm... change some innerHTML..... i'll have to mull this over.....

I jscheuer am grateful to you