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?
 
Pravin AsarConnect With a Mentor Principal 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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.