Results 1 to 5 of 5

Thread: coordinating an image swap with a caption

  1. #1
    Join Date
    Apr 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question coordinating an image swap with a caption

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    You haven't defined thediv[d]. Try giving the division an id:

    HTML Code:
    <div id="theDiv"></div>
    and using something like:

    Code:
    function someName(id, txt){
    document.getElementById(id).innerHTML=txt;
    }
    The above example could be called like so:

    Code:
    someName('theDiv', 'Hello World');
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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....
    Last edited by tweetypie; 08-04-2006 at 11:15 AM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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();">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Apr 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •