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 14 of 14
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts

    getting graphics put together

    Hi, i was wondering how i can get my graphics together. I want the top image to play the animation on the top center of the page then the bottom image to display over the top image and running infinitely because it's an animated gif. I also want it to resize to any monitor it's displayed on. Thank you. http://www.creationindex.com/

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there Repatilian,

    try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <!-- this is for coothead testing and may be removed -->
    <base href="http://www.creationindex.com/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Creation Index</title>
    
    <style type="text/css">
    body {
        margin:2px;
        background-color:#000;
     }
    #images {
        position:relative;
     }
    #images img {
        width:100%
     }
    #lineback {
        position:absolute;
        top:0;
        left:0;
     }
    </style>
    
    </head>
    <body>
    
    <div id="images">
     <img src="logospintest.gif" alt="" >
     <img id="lineback" src="lineback.gif" alt=""> 
    </div>
    
    </body>
    </html>
    
    coothead

  • Users who have thanked coothead for this post:

    Repatilian (08-14-2011)

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    oh dude thank you so much. That's perfect you helped me out alot.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    No problem, you're very welcome.

  • #5
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    coothead is there a way to pause an image from displaying while an animated gif runs?

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by Repatilian View Post
    coothead is there a way to pause an image from displaying while an animated gif runs?

    You can achieve this in photo animation, where you want , increase the frame time....

  • #7
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    well i was thinking i could just put a blank frame that pauses the graphics in the animation but i want it to loop continuiously. The pause really wouldn't be that long.

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Yes you can make animation as you want, set different duration for each frame.. and set the duration, othe frame to whom you want to pause, longer than other frame....

    example for all frames you set 0.5 seconds but for the frame you want to pause, you can set it's limit 10sec.


  • #9
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    isn't there a way to just pause the page from loading anymore. Like to put a tag in the html or add it to an img tag. Or in the css. I thought i read something about sleep. In a different thread of the same topic a guy suggested i use an onload event handler. But i don't know how to write that code or if it's html or javascript or css.

  • #10
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    here's what i tried to use for onload event handler.






    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <!-- this is for coothead testing and may be removed -->
    <base href="http://www.creationindex.com/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english">
    <meta http-equiv="Content-Style-Type" content="text/css">

    <title>Creation Index</title>
    <script type="text/javascript">
    function setTimeout(10000)

    </script>

    <style type="text/css">
    body {
    margin:2px;
    background-color:#000;
    }
    #images {
    position:relative;
    }
    #images img {
    width:100%
    }


    #lineback {
    position:absolute;
    top:0;
    left:0;
    }

    </style>


    </head>
    <body>

    <div id="images">
    <img src="logospintest.gif" alt="" onload="setTimeout()" >

    <img id="lineback" src="lineback.gif" alt="">
    </div>

    </body>
    </html>

  • #11
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by Repatilian View Post
    isn't there a way to just pause the page from loading anymore. Like to put a tag in the html or add it to an img tag. Or in the css. I thought i read something about sleep. In a different thread of the same topic a guy suggested i use an onload event handler. But i don't know how to write that code or if it's html or javascript or css.

    Sorry, I dont have any idea about this.

    However, If you use js for pausing your image, image loading can vary according to different Internet speed, like dialup, broadband, GPRS... in same cases, image can load in faster or in GPRS, it can take time..


    So, I recommend you to use photoshop to create animations and set their timings as it will be constant with speed internet.

    Let me know if there is any other method

  • #12
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there Repatilian,

    try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <!-- this is for coothead testing and may be removed -->
    <base href="http://www.creationindex.com/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Creation Index</title>
    
    <script type="text/javascript">
    function init(){
    
    /* this value is 4 seconds, which is the time that logospintest.gif takes to run it's course */
    
       var delay=4000;
    
    /*********************************************************************************************/
    
       setTimeout(
       function(){
       document.getElementById('lineback').className='';
       },delay 
       );
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    </script>
    
    <style type="text/css">
    body {
        margin:2px;
        background-color:#000;
     }
    #images {
        position:relative;
     }
    #images img {
        width:100%
     }
    #lineback,#lineback1 {
        position:absolute;
        top:0;
        left:0;
     }
    .hide {
        display:none; 
    }
    </style>
    
    </head>
    <body>
    
    <div id="images">
     <img src="logospintest.gif" alt="">
     <img id="lineback" class="hide" src="lineback.gif" alt=""> 
    <noscript>
    <div>
     <img id="lineback1" src="lineback.gif" alt=""> 
    </div>
    </noscript>
    </div>
    
    </body>
    </html>
    
    coothead

  • Users who have thanked coothead for this post:

    Repatilian (08-16-2011)

  • #13
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    thank you coothead you're the man. it works perfect.

  • #14
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    No problem, you're very welcome.


  •  

    Posting Permissions

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