Need Expando with a Z-index

[Lorel]

Hi

I have the Expando script available on dynamicdrive working with a row of small images across the top of a page, but I would like it to float above the text on the page on mouseover so it won't push the text down. I tried adding z-index:-1; to the CSS but that didn't work.

If this is supposed to go in the js can someone tell me how to add it as I don't write JS?

Here is the page for Expando:
http://www.dynamicdrive.com/dynamici...pandoimage.htm

Lorel

[Snookerman]

For z-index to work, the element has to be positioned. Try adding position:relative; to the elements you are giving z-indexes. If you want more help:

Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out and help you.

[Lorel]

I tried the position:relative; with z-index and now the mouseover doesn't work at all. If I take out the position relative it works again but still pushing text down.

-----HTML--------

<img class="expando" src="images/Example.gif" width="100" height="137" border="0" alt="">

------CSS---------

.expando {border: none;
position:relative;
z-index:-1;
vertical-align: top; }


thanks for trying to help.

Lorel

[Snookerman]

Ahh, now I see what you want to do. Try giving the image position: absolute;. You will then need to position the image with left/right and top/bottom margins. I'm not sure if this will affect the script though, but try it.

Good luck!

[Lorel]

I tried using position:absolute, etc. but it didn't work. I tried setting up a separate class for each image as I have 5 images centered at the top of the page but that didn't work either. Noting I tried lifts the expando images above the text on the page.

[Snookerman]

I tried it on the demo site with absolute positioning and it worked. Could you please post a link to your site or attach the code you're using so we can take a look?

[Lorel]

Here is the URL. This is a rough draft temporary site.

http://www.loriswebs.com/-RC/

[Snookerman]

I see what the problem is now. Since you are using a negative z-index, the images are placed behind the other elements (when you absolutely position them) and therefore your mouse never hovers over them so the zoom-effect doesn't work. I suggest that you skip the z-index and leave the images on the top. Also, remember to give them different values from the left or right or else they'll just pile up on top of each other.

Good luck!

[jscheuer1]

Demo:

Link Removed

Use your browser's 'view source' to get the code.

Notes: The (slightly modified) script may be made external again, as long as the script credit remains on the page. The inline styles may be placed in an external stylesheet, as can the on page stylesheet's styles, as long as their order in relation to the main aarc.css styles remains the same. The:

<base href="http://www.loriswebs.com/-RC/">

tag is only required for my demo so that I did not have to copy all of your images and other external resources. It may be removed.

Any questions, feel free to ask.

[Lorel]

Hi John,

Thanks for trying to help. I can see it working on your site as it should be.

I copied off the code (put css data in the css file and JS in the JS file and edited the index file and that didn't work so I copied off the whole page on your site and put it on mine but it's not working that way either.

Can you check to see what might be wrong?

I know it's not centered. I'll deal with that later.

BTW, what was the purpose of the div>&nbsp;</div> at top of page?