Layering Images

[chestertb]

I'm, pushing another boundary here, at least for me.

I'm trying to speed up the load time of my web page.
Right now, it uses lots of little images to create rollover effects.

I had a thought... that if I could use just two larger images that are layered, so that the visible layer was the normal state for all the images, and the underlying layer was the rollover state for all of the images, and I could then make sections of the top layer clear to reveal the underlying layer as the mouse rolled over the image map, that would save a huge amount of load time because it would eliminate about 80% of the calls back to the server.

Is this possible, and if so, can someone point me in the right direction?

IB

[tigrrboxer]

Umm, as far as I know the best you can do is one image map and several separate rollover states. So if you have 6 rollovers, you'll have a total of 7 images rather than 12. Somehow I think that you may be better of with the "lots of little images."

It may be possible to achieve your idea with JavaScript. I have this awed respect for JS, and refuse to accept that it has limits. Mainly because I'm so crap at it that it'll take me decades to bump against its boundaries!!

[Aronya1]

Originally posted by chestertb
... that would save a huge amount of load time because it would eliminate about 80% of the calls back to the server.
OK, maybe I'm missing something here, but what are the calls back to the server for? Aren't the images all loaded with the page, then called via javascript when you roll over them?

One thought; have you optimized your images for file size?

[Lotus]

You could try to just have two larger images; one containig all the normal state images side by side, and one containing the rollovers. Then you could (using Photoshop) make slices around all the different images. I'm sure there's a way to choose which slice to use where.

[chestertb]

Thanks all... sorry I haven't been back... internet connection has been down for a few days.

First, the calls back to the server issue... I will profess to not really understanding how it all works, but my observation is that each individual image on a page triggers a call back to the server. The also seems to apply when they are pre-loaded.

Next, the file size issue... I did the maths, and two larger images was smaller than 12 smaller images.

I ended up having the two larger images as suggested, and used absolute positioning and the clip function.. works a treat, cuts about 30% of the total file size download, AND reduces the calls back to the server from many to few.

Thanks everyone for all your help.

CTB