Image transition - placing the image

SteveH

07-13-2012, 08:41 PM

Hello

I have some JS in my <script type="text/javascript"></script> tags that fades images in and out, and in the same Web page I have this in my <body></body> tags:

<table class="center">

<tr><td width="100%" align="center" valign="top" id="gradient"></td></tr>

</table>

<div id="placeholderImageBackground">
<img alt="slide show" src="test1.jpg" width="320" height="320" id="placeholderImage" /></div>

<script type="text/javascript">
RunSlideShow("placeholderImage","placeholderImageBackground",
"test1.jpg;test2.jpg;test3.jpg;test4.jpg;test5.jpg",6);
</script>

The fading transition features made possible by the JS work great, but at the moment the image(s) are outside the table (which has a gradient as a background).

I know I probably need to use CSS to position the image(s), but what snippet of code in the JS do I 'hang' the CSS to? Is it: placeholderImageBackground? I am also not sure if I can place the snippets of JS cited here inside a table cell, but I am not sure of another way of doing it.

Thanks for any help.

Steve

Old Pedant

07-13-2012, 10:12 PM

I don't think this has anything to do with the JavaScript.

I think you solve it with static CSS.

You show an image there of 320x320 pixels. If it is supposed to sit behind your <table>, how do you guarantee that the table is that same size (or, I suppose, smaller)??

Usually, you would do something like this:

<div style="position: relative;">
<table style="position: absolute; z-index: 10;">
...
</table>
<div id="placeholderImageBackground" style="position: absolute; z-index: 1;">
<img alt="slide show" src="test1.jpg" width="320" height="320" id="placeholderImage" />
</div>
</div>

That is, the outermost <div> holds the <table> and the inner <div>, both of which are position at 0px:0px within the outer <div> and so are at the same spot on the page.

So... It's all CSS and the JS code probably needs no changes at all.

SteveH

07-14-2012, 08:56 PM

Hello Old Pedant

Many thanks for that. After incorporating your suggestion, my code looks like this:

<div style="position: relative;">
<table style="position: absolute; z-index: 10;">

<tr><td width="100%" valign="top" id="gradient"></td></tr>
</table>

<div id="placeholderImageBackground" style="position: absolute; z-index: 1;">
<img alt="slide show" src="test1.jpg" width="320" height="320" id="placeholderImage" />
</div>
</div>

<script type="text/javascript">
RunSlideShow("placeholderImage","placeholderImageBackground",
"test1.jpg;test2.jpg;test3.jpg;test4.jpg;test5.jpg",6);
</script>

That produces this (please see screenshot).

Let's say I can reduce the size of the images and have them fade in and out somewhere near the top left corner of the page and, to the right of the images and centered in the page, is the green gradient background held in a table cell. I have tried removing the 'absolute' position in the snippet you kindly gave me, but it hasn't changed anything. How would I achieve that effect (sorry for posting on the JS board - originally I wasn't sure if something in the JS would need changing).

Thanks again.

Steve