Multiple images in one frame

[Tigger]

Hi Peeps,

I don't know if I'm asking the impossible but what I need is some code to enable me to overlay more than 3-4 gif images in the same frame/table/box anything really and to be able to change them via a text link.

What I'm trying to do is show a background pic of a car, then overlay several .gif images to change body panel colours. I could of course just create 500 different images, the combinations are endless that's why i just need to overlay 1 image over the next if you see what I mean?

Any help would be very appreciated as I'm starting to lose sleep over this nos - lol

Cheers

Tigger

[blm126]

What you will want to do is use css layers. This won't work in all browsers but you can read about it here (http://www.echoecho.com/csslayers.htm) .

Then add this code to the head of the page


<script language="javascript">
<!--

var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>


Then the link code will be


<a href="#" onclick="showhide('div1');">show or hide</a>

then for each image to hide or show add


<div id="div1" style="display: none;"> Image goes here </div>

You can position each image with CSS layers. The only problem is that all images will be loaded when the page loads. So with more than a couple options it will take forever to load.