?
Solved

Javascript HTML text/image rotator in sequence on page load

Posted on 2008-11-03
6
Medium Priority
?
671 Views
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.
0
Comment
Question by:guzz11
  • 2
4 Comments
 
LVL 16

Expert Comment

by:sh0e
ID: 22870190
You will need to make use of cookies.
Store a counter in a cookie, and increment it each time.
0
 

Author Comment

by:guzz11
ID: 22870202
If you can, please give me some code.
0
 

Author Comment

by:guzz11
ID: 22870403
Please try and avoide onload in the body tag as well.
0
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 2000 total points
ID: 22955216
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Ready to get certified? Check out some courses that help you prepare for third-party exams.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

862 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