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
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.