[SOLVED] Thumbnail Viewer Snag

[phpbeginner]

I have created a virtual kitchen using a blending image slideshow which works great to a point but have run into a snag.

 

Currently I have 30 thumbnails with different kitchen countertops and on mouseover the thumbnails, the larger image will display in a <div id="container">LARGE IMAGE</div>. Easy enough, works good.

 

The problem I am having is I wanted to take this a step further and have created transparent gifs of 3 different cabinet styles. I simply want to overlay these in the <div id="container">LARGE IMAGE</div> and have been trying for 3 days with no success.

 

Is there a way, with CSS or javascript or any other means where these transparent gifs can be selected and remain as an overlay ? I can select them initially over the original image but once I mouseover a thumbnail for the 30 countertops, it unloads the previous image and my transparent gif.

 

Any help would be GREATLY APPRECIATED !

[emehrkay]

try this:

 

make a container div. give it relative positioning

 

insert a picture in that div, give it absolute positioning, top: 0, left:0 z-index 10;

 

insert the next pic, same positioning and top/left coordinates up the z-index to 11

 

repeat for each layer

[phpbeginner]

thanks emehrkay, I have tried something similar but again this unloads my transparent .gif ......Here's what I have

 

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;
}         

 

The background-image in container is an initial image loaded into the <div id=conatiner></div>

 

now in my .php page here is what I have in my container.....

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

 

 

[emehrkay]

take out the width and height definitions in your div tag, it is unnecessary because you define it in you css and i think that is invalid markup anyway

 

dont use a number as a class name, i dont know if its ok, but just dont do it.

 

and finally, what is the issue with what you posted?

[phpbeginner]

Same as initial issue......

 

When I mouseover one of the blending slideshow images, it unloads the enlarged image plus my transparent.gif .

 

Again, I have 30 images of 1 kitchen with different coutertops. These are full images and are enlarged within the <div id="container"></div>

 

Now, when any of these full images are displayed in the enlarged area I simply want to be able to place one of my transparent.gifs on top of these for a different cabinet and have it remain on top.

 

 

[emehrkay]

my advice would be to just try a static page using the above css

 

create the div and place a few images inside of it, and make sure you give each one the proper css.

 

lets see your js while you're here too

[phpbeginner]

I do a lot of css and it works fine on a static page. The issue is within the

 

<div id="container"></div>

 

This container is based on mouseover, mouseout, effects, etc.... I am just trying to figure out if their is anyway possible to overlay a transparent.gif within this tag and have it remain there as other functions are being used within the <div> tags.

 

Been trying with css, but no go so far. If I place an image using css in this tag it just unloads with the functions used within the <div></div>.

 

 

[emehrkay]

function overlay(image){

var new_img = '<img src="'+ image +'" alt="whatever" class="whateverClass" />';

document.getElementById('container').setHTML += new_img;

}

 

that should add it to the div and allow you to keep adding images to that div. now if you want to remove it you'll have to write a function that would be a little more complex using

 

removeChild(image.id)

 

http://developer.mozilla.org/en/docs/DOM:element.removeChild

[phpbeginner]

Thanks emehrkay, I did finally get it to overlay using a css id's and

 

<script type="text/javascript">
//Switch elements visible or hidden
function A() {
document.getElementById("a").style.visibility = 'visible';
document.getElementById("b").style.visibility = 'hidden';
}
function B() {
document.getElementById("a").style.visibility = 'hidden';
document.getElementById("b").style.visibility = 'visible';
}
</script>