Announcement

Collapse
No announcement yet.

~ really smooth random images ~

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • ~ really smooth random images ~

    Hi there folks,

    here is a novel way of doing onload random images, it's very smooth as only one image is used.
    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>smooth way of doing random image</title>
    <base href="http://mysite.orange.co.uk/coothead/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    body {
         background-color:#eee;
         color:#000;
     }
    #logo {
         width:360px;
         height:280px;
         background-image:url(six.jpg);
         background-repeat:no-repeat;
         border:4px solid #000;
         margin:50px auto;
     }
    .logo0 {
         background-position:0 0;
    }
    .logo1 {
         background-position:-360px 0;
    }
    .logo2 {
         background-position:-720px 0;
    }
    .logo3 {
         background-position:-1080px 0;
    }
    .logo4 {
         background-position:-1440px 0;
    }
    .logo5 {
         background-position:-1800px 0;
    }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    onload=function() {
      var num=Math.floor(Math.random()*6);
           document.getElementById('logo').className='logo'+num;
     }
    //]]>
    </script>
    
    </head>
    <body>
    
    <div id="logo" class="logo0"></div>
    
    </body>
    </html>
    
    View the image used here...

    http://mysite.orange.co.uk/coothead/six.jpg
    Last edited by coothead; 03-26-2007, 11:09 AM. Reason: change of ISP.


    ~ the original bald headed old fart ~

  • #2
    You never cease to amaze me Coot Nice script.

    Comment


    • #3
      Hi there Joe,

      it's basically just a thought extension of the single image rollover and
      came to mind when I posted a random image script here earlier today.


      ~ the original bald headed old fart ~

      Comment

      Working...
      X