Javascript HTML text/image rotator in sequence on page load

Posted on 2008-11-03
Last Modified: 2012-05-05
I need a Javascript HTML text/image rotator that rotates in sequence not random. It also has to load on a page refresh.
Question by:guzz11
    LVL 16

    Expert Comment

    You will need to make use of cookies.
    Store a counter in a cookie, and increment it each time.

    Author Comment

    If you can, please give me some code.

    Author Comment

    Please try and avoide onload in the body tag as well.
    LVL 28

    Accepted Solution

    Here is a complete working example. Try it.

    <title>Document/Page Title</title>
    <style type="text/css">
    <!-- Library Functions -->
    <script type="text/javascript">
    function SetCookie(cookieName,cookieValue,nDays) {
    	if (!cookieName.length)
    		alert ('No cookie name specified');
        // Initialize date variable
         var today = new Date();
         var expire = new Date();
         // Validate input nDays
         if (nDays==null || nDays < 1 ) nDays=1;
         // Add time to expire variable, it is milliseconds *hour 
         // 1 day has 24 hours , 1 hour has 3600000 milliseconds;
         expire.setTime(today.getTime() + 3600000*24*nDays);
         document.cookie = cookieName+"="+escape(cookieValue)
                     + ";expires="+expire.toGMTString();
    function GetCookieValue(cookiename)
        // get all cookies
         var  ck = document.cookie;
         // append "=" to cookiename
         var  cn = cookiename + "=";
         // search for cookie
         var pos = ck.indexOf (cn);
         // if found 
         if (pos != -1) {
                 // set start location
                 var start = pos + cn.length;
                   // Get the end of cookie, start search from 'start' position.
                   var end   = ck.indexOf (";", start);
                   // If end not found, set the end location equal to cookies length.               
                   if (end == -1) end = ck.length;
                   // Get Value of Cookies
                   var cookieValue= ck.substring (start, end);
    			   return (unescape(cookieValue));
         return (null);
    <!-- Local Functions -->
    <script type="text/javascript">
    function SaveLastImage(imgSrc) {
    	SetCookie("lastImage", imgSrc, 1);
    	document.getElementById('enlarge').src = imgSrc;
    function LoadLast() {
    var imgSrc= GetCookieValue("lastImage");
    if (imgSrc) {
    	document.getElementById('enlarge').src = imgSrc;
    <body onload="LoadLast();">
    <p>Click on the Image to see the enlarged image</p>
    <p>When a image is loaded/enlarged, it's location is saved in a cookie</p>
    <p>At the time of loading the page, it checks for the cookie value, if set loads the saved image.</p>
    <img src="0.gif" width="10" onclick="SaveLastImage(this.src);">
    <img src="1.gif" width="10" onclick="SaveLastImage(this.src);">
    <img src="2.gif" width="10" onclick="SaveLastImage(this.src);">
    <img src="3.gif" width="10" onclick="SaveLastImage(this.src);">
    <img id="enlarge" width="50" src="0.gif">
    <input type="button" value="ReLoad" onclick="window.location.reload();">

    Open in new window


    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Join & Write a Comment

    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    This video teaches users how to migrate an existing Wordpress website to a new domain.
    The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now