Javascript HTML text/image rotator in sequence on page load

I need a Javascript HTML text/image rotator that rotates in sequence not random. It also has to load on a page refresh.
guzz11Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sh0eCommented:
You will need to make use of cookies.
Store a counter in a cookie, and increment it each time.
0
guzz11Author Commented:
If you can, please give me some code.
0
guzz11Author Commented:
Please try and avoide onload in the body tag as well.
0
Pravin AsarPrincipal Systems EngineerCommented:
Here is a complete working example. Try it.


<html>
<head>
<title>Document/Page Title</title>
<style type="text/css">
</style>
<!-- Library Functions -->
<script type="text/javascript">
 
function SetCookie(cookieName,cookieValue,nDays) {
	if (!cookieName.length)
	{
		alert ('No cookie name specified');
		return;
	} 
    // 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);
}
</script>
<!-- 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;
}
}
</script>
</head>
<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>
<div>
<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);">
</div>
<img id="enlarge" width="50" src="0.gif">
<input type="button" value="ReLoad" onclick="window.location.reload();">
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.