42 users online (0 members and 42 guests)  


  Results 1 to 12 of 12

Related

  1. Replies: 1
  2. need help in creating animated text    Forum: Introduce Yourself
    Replies: 7
  3. Starting an animated gif    Forum: Javascript Forum
    Replies: 3
  4. animated rollovers in netscape    Forum: HTML Forum
    Replies: 3
  1. #1
    tjanson's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    14

    Animated JPEGs with different locations on the page

    Hi-

    Can someone help me with this? I'm looking to put each of the rotating images in a different location on the page:

    http://www.cvcg.net/animate.html

    The in-elegant way to do this, would be to maintain the current javascript code and just save the images with location appropriate blackspace. Yuck.

    Suggestions?

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there tjanson,

    do you mean like this ?.......
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Rotate Image and Position</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    body {
    background:#000000;
     }
    .one {
    position:absolute;
    left:1%;
    top:1%;
     }
    .two {
    position:absolute;
    left:40%;
    top:1%;
     }
    .three {
    position:absolute;
    left:1%;
    top:40%;
     }
    .four {
    position:absolute;
    left:40%;
    top:40%;
    }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    var images=new Array();
     images[0]="uw-1-p1.jpg";
     images[1]="uw-2-p1.jpg";
     images[2]="uw-10-p1.jpg";
     images[3]="uw-12-p1.jpg";
    
    var names=new Array();
     names[0]="one";
     names[1]="two";
     names[2]="three";
     names[3]="four";
    
    
    var i=0;
    
    var speed=3000;
    
    function rotateImages() {
         document.getElementById('foo').src=images[i];
         document.getElementById('blah').className=names[i];
         i++;
    if(i>images.length-1) {
         i=0;
     }
    setTimeout(' rotateImages()',speed)
     }
    onload=rotateImages;
    //]]>
    </script>
    
    </head>
    <body >
    
    <div id="blah">
    <img id="foo" src="uw-12-p1.jpg" alt="underwater"/> 
    </div>
    
    </body>
    </html>
    
    coothead

  3. #3
    tjanson's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    14
    coothead-

    you've saved the day again, thanks so much for your help. for anyone who's interested in the solution:

    http://www.cvcg.net/animate2.html

    tjanson

  4. #4
    tjanson's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    14

    Question

    one more question:

    have you noticed that in IE, for a split second before it displays the next image, it retains a copy of the previous image? Is there anyway to clear the "buffer" so that this doesn't happen?

    tjanson

  5. #5
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there tjanson,

    I did not get that effect when testing 'at home'

    Try swapping...
    Code:
         document.getElementById('foo').src=images[i];
         document.getElementById('blah').className=names[i];
    to...
    Code:
         document.getElementById('blah').className=names[i];
         document.getElementById('foo').src=images[i];
    coothead

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    ....p.s.

    I also noticed that....
    Code:
    <img id="foo" src="uw-12-p1.jpg" alt="underwater"/>
    shoild be....
    Code:
    <img id="foo" src="uw-1-p1.jpg" alt="underwater"/>
    coothead

  7. #7
    tjanson's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    14

    Question

    thanks for the suggestion, unfortunately, i still see the split second image of the previous pic before the new one cuts in. i'm running IE 6 on Win, mabe it's buggy with that? suprisingly, it looks fine in Safari beta.

    any other workaround you can think of?

  8. #8
    krak_d's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Mar 2004
    Location
    Liverpool
    Posts
    166
    have you noticed that in IE, for a split second before it displays the next image, it retains a copy of the previous image? Is there anyway to clear the "buffer" so that this doesn't happen?
    Hi tjanson,

    just thought i 'd mention before you alter any code that the 'buffer' you mentioned doesn't occur on my IE6.

    krak_d

  9. #9
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there tjanson,

    It is strange that krak_d does not get that effect in I.E. 6.0

    But as you and I, and I presume others, do , here is a modified code.
    I have removed the <img> tag and used background instead, and have also
    popped an image preload in for good measure
    This works fine 'at home' on all the major browsers, so try it on your site,
    let's hope that it cures the bugginess of I.E.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Rotate Image and Position</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    body {
         background:#000000;
     }
    .one {
         position:absolute;
         left:1%;
         top:1%;
         width:499px;
         height:364px;
         background:url(uw-1-p1.jpg);
     }
    .two {
         position:absolute;
         left:40%;
         top:1%;
         width:499px;
         height:364px;
         background:url(uw-2-p1.jpg);
     }
    .three {
         position:absolute;
         left:1%;
         top:40%;
         width:499px;
         height:364px;
         background:url(uw-10-p1.jpg);
     }
    .four {
         position:absolute;
         left:40%;
         top:40%;
         width:499px;
         height:364px;
         background:url(uw-12-p1.jpg);
     }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    var preload = new Array();
      preload[0]="uw-1-p1.jpg";
      preload[1]="uw-2-p1.jpg";
      preload[2]="uw-10-p1.jpg";
      preload[3]="uw-12-p1.jpg";
    
    var loader = new Array();
      for(var i = 0; i < preload.length; i++){
         loader[i] = new Image();
         loader[i].src = preload[i];
    }
    
    var names=new Array();
      names[0]="one";
      names[1]="two";
      names[2]="three";
      names[3]="four";
    
     var i=0;
     var speed=3000;
    
    function rotateImages() {
         document.getElementById('blah').className=names[i];
         i++;
    if(i>names.length-1) {
         i=0;
     }
    setTimeout(' rotateImages()',speed)
     }
    onload=rotateImages;
    //]]>
    </script>
    
    </head>
    <body >
    
    <div id="blah"></div>
    
    </body>
    </html>
    
    
    
    
    coothead

  10. #10
    tjanson's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    14
    That did it! Can't thank you enough. Yay, I'm almost done with this site!!

  11. #11
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel
    Great job coothead

    D

  12. #12
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there tjanson ,

    no problem you're welcome

    Dave

    Thank you

    coothead



Tags for this Thread