Results 1 to 3 of 3

Thread: Image rotator

  1. #1
    Join Date
    Feb 2009
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image rotator

    I have an image rotator script that everytime the page is refreshed the image changes. I would like to add a time delay on before the image changes. How can I do this? Current script below.

    <style type="text/css">
    div#image_rotate img {
    margin: 0;
    padding: 0;
    border: 0;
    }

    p#image_caption {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    font-size: 0.8em;
    }

    cite#image_attrib {
    font-family: verdana, arial, helvertica, sans-serif;
    margin: 0;
    font-size: 0.8em;
    }
    </style>

    <script>

    function addLoadEvent(newOnLoadFunction)
    {
    var theOnLoadFunctions = window.onload;
    if (typeof window.onload != 'function')
    {
    window.onload = newOnLoadFunction;
    }
    else
    {
    window.onload = function()
    {
    if (theOnLoadFunctions)
    {
    theOnLoadFunctions();
    }

    newOnLoadFunction();
    }
    }
    }

    function rotateImage()
    {
    var imgArray =
    [

    "/images/photo/intranet74.jpg",
    "/images/photo/intranet75.jpg",
    "/images/photo/intranet76.jpg",
    "/images/photo/intranet77.jpg",

    ];

    var captionArray =
    [

    "caption 1",
    "caption 2",
    "caption 3",
    "caption 4",

    ];

    var attribArray =
    [

    "title 1",
    "title 2",
    "title 3",
    "title 4",


    ];

    if (document.getElementById && document.getElementsByTagName)
    {
    srcImage = document.getElementById("source_image");
    srcCaption = document.getElementById("image_caption");
    srcAttrib = document.getElementById("image_attrib");

    var rndIndex = Math.floor(Math.random() * 4);


    srcImage.src = imgArray[rndIndex];
    srcCaption.innerHTML = captionArray[rndIndex];
    srcAttrib.innerHTML = attribArray[rndIndex];
    }
    }

    //add image rotator function to onload queue
    addLoadEvent(rotateImage);

    </script>


    <div id="image_rotate">
    <div id="image_frame">
    <img id="source_image" src="/images/photo/intranet74.jpg" />
    <p id="image_caption"></p>
    <cite id="image_attrib"></cite>
    </div>
    </div>

  2. #2
    Join Date
    Feb 2009
    Posts
    159
    Thanks
    60
    Thanked 3 Times in 3 Posts

    Default

    It would be helpful to post a link to the page.

  3. #3
    Join Date
    Feb 2009
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry the page is internal.

Bookmarks

Posting Permissions

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