Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Image transition - placing the image

    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:

    Code:
    <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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    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:
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Old Pedant

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

    Code:
    <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
    Attached Thumbnails Attached Thumbnails Image transition - placing the image-codeforum.jpg  


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •