Changing Background Images with Rollover & pre loading

[DrDaMour]

OK, i have a div that onmouseover changes the background of the page. It ass works right except it doesn't use preloaded images. Instead it redownloads the images, which causes a white background for a second or two.

the code is like


back1 = new Image();
back1.src = "images/backgrounds/a.jpg";

back2 = new Image();
back2.src = "images/backgrounds/b.jpg";

<div onmouseover="document.body.background=back2.src" onmouseout="document.body.background=back1.src">#</div>

and it will work, but it re-downloads the images. Now if i just put the images in "images/a.jpg" it seems to work, but i don't want to do this. So i'm confused as to why it's not working using a second subdirectory.

I've run into a problem trying to preload an image from an absolute url also, such as "http://www/images/backgrounds/b.jpg" or "http://www/images/b.jpg"

I'm using the latest internet explorer, and i'm really confused about this. Thanks for any help you can offer

[Jona]

Dunno if this will work, but... Try:

back1 = new Image();
back1 = "images/backgrounds/a.jpg";

back2 = new Image();
back2 = "images/backgrounds/b.jpg";

<div onmouseover="document.body.background.src=back2" onmouseout="document.body.background.src=back1">#</div>

[DrDaMour]

no that just changes the variable of back1 to a string, and not an image killing any chance of preloading the images into cache. Thanks for trying to help. I'm really trying ot get this to work right.

[Jona]

I have no idea....

[Nedals]

The question is 'Where are your images on the server?"

If they are in an 'images/backgrounds' directory, then you MUST call them using "images/background/a.jpg" in both your preload and your mouseover.

If you want to get rid of the 'images/backgrounds' path, then put your images in the same directory as your 'index.html' page and then call them using 'a.jpg' in BOTH your preload and your mouseover.

Hope that helps.

EDIT:
Forget all that, I just re-read post.
Try this..
<div onmouseover="document.body.background.src="images/backgrounds/a.jpg">....

[DrDaMour]

sorry let me clarify.
first i'm not a n00b

second the images are actually in both places for testing purposes. However they don't work when i go two subdirectories deep. They load up ok, and the display, but they're definately not coming from cache, adn since theya re 28 kb's it's gonna be noticable.

[Nedals]

Cross posting.. :)
See above EDIT. The images gets preloaded to cache then the onmouse will pull from cache.

[DrDaMour]

well the javascript object is document.body.background not document.body.background.src. And since that's all you changed i doubted it would work, and it didn't.

So again i'm at square one here, i'm gonna create a test zip so maybe people can see what i'm saying better.

[Nedals]

You're right, my mistake! :o

Can you post a link to the page in question and I'll see how it works on my browser. Kind of strange the changing the directory depth should have an effect. You'd think that once the image is in cache that should do it.

I don't think a .zip is going to help because you probably need to be on-line to see the effect.

[DrDaMour]

well actually you can see it even running off a local hd, but i think it may really just be my crappy computer, cause i just tried on my roomates and it seemed to work fine. If you would please, try it out on my page (http://www.msu.edu/~damour) check two things, see if the things in the top right require loading for the main background. and secondly see if the changing of the background in the middle i-frame takes loading. You shoudl be able to tell. I think it's my IE that's totally funked.

Thanks for your help, it's really appreciated.

[DrDaMour]

yeah i just trashed my temp internet files directory, which was full, and it seems to work fine. So let this be a lesson to all, that when you use var x = new Image() it stores the file in temporary internet files folder under IE (how fugly is that?) If someone could just verify by checkign teh link above and letting me know, it'd be much appreciated.

[Dr_DK]

Works fine for me Dr.

Little loading on the middle i_Frame but all the BG's worked fine.

(P.s. the page is not 800x600 competible, I had my IE sized down)

[DrDaMour]

it isn't meant to be, anything less that 1028x7xx is uncivilized. So there was a loading problem on the iframe then, well phooey, guess i get to bug fix more, thanks.

[khalidali63]

Here try this link and let me know if thats what you intended to do.

http://68.145.35.86/skills/javascripts/ChangeBackgroundDynamically.html

Cheers

Khalid

[Dr_DK]

Well KhaliDali, your site example didn't work for me...

[khalidali63]

I unless you are using some ancient browser,because I tested the page with NS6+ and IE6+ and it works..so ..its time to download some new stuff buddy..

:D

Cheers

Khalid

[Dr_DK]

:o IE 6.0.2 in use, and I'm telling you dude, the bg image is loading for quite a while!!!
:D
But it's ok... hihihi...

[DrDaMour]

yeah your problem was you assigned img1 to an array spot, when you really should have done array[index] = new Image()

stupid eh?

[khalidali63]

What difference would that make???

imgArr[0] = img
imgArr[0] = new Image()

Care to elaborate" EH"

[DrDaMour]

seems not to preload the images into cache for me the way you have it. And if you even bothered to check the other posts, you would see that i already had the proper javascript written, and wasn't trying to do anything but understand what was going on with load times. But it was all do two stupid way MS stores cache.

[Nedals]

DrDaMour...
Checked out your site on 56K modem, IE6.0. It took a little time to download but that's what you would expect. The changing backgound image in the iframe worked just fine. (No additional downloading). I didn't notice any problem the the top-right image.
So! All's well :)