I had originally posted this in the Javascript forum but thought a CSS guru may be able to help.

Basically I have a thumbnail viewer and when a thumbnail is mouseover the larger image appears in a <div id="container></div>.....This is simple enough and works fine.

Now within this <div id="container"></div> the script unloads the enlarged image and loads a new one on mouseover which is where I am having trouble.

I am trying to overlay 1 of 3 transparent images over this container to alter a specific part of the image. Is there anyway I can do this in CSS so that the overlay doesn't unload if a new thumbnail is selected ?

Here is what I have tried.....

CSS CODE

#container {
        background-image: url('images/image.jpg');
        position: relative;        
        width: 400px;
        height: 363px;
        top: 0;
        left:0;
        z-index; 10; 
          }
#container img.1 {
        position: absolute;
        width: 400px;
        height: 363px;
        top: 0;
        left:0;
        z-index; 11;
}

And <div> tag area

<div id="container">
<img src="images/transparent.gif" class="1">
</div>

Now this works on the initial image but will not work on a mouseovered image. It also unloads if I have it on the initial image and then mouseover a thumbnail.

Any tips ?

CSS cannot do the 'unloading' of the image, you can only do that with scripting.

Are the mouseover areas in different places on the image, sort of like an image map ?

OK let's start again.....

This blending slideshow is doing all the loading and unloading of full images within the <div id="container"></div> with scripting.

Now without altering any of that scripting is it possible to have a transparent gif overlay this container and remain there even when the slideshow is working ?

I think that's going to be really tricky. Check out how LightBox works, you'll see the transparent 'curtain' that opens, but the photos are above it. You might be able to modify it so that it is above your slideshow.

http://ahavriluk.home.comcast.net/lightboxEx/doc/

Tricky !! I guess it's tricky.....to think about laying a transparent image over that container seems easy enough but the functions within that container are the whole problem.

I have used lightbox before but I don't think it would work either as I would need to be able to toggle my slides and again.

On this same type of concept, it would probably be easier for me to just position this transparent.gif using margin-top and margin-left rather than placing it in the container.

Finally figured it out .....will post in a bit. Thanks !