Solved

Different graphics when a page loads or time based

Posted on 2002-06-16
39
569 Views
Last Modified: 2013-12-25
I would like to build a page which would display a differnt graphic each time the visitor came back, (eg. 5 different versions) in an attempt to keep the site looking fresh.

This could either be time-based, eg. pic changes every 5 minutes (or 5 hours, or 5 days) or the pic is different every time that visitor comes back.

Is there a simple way of doing this without getting into databases etc.?  Just some javascript or something client-side?

PS: Look at www.potlatchcorp.com - this is where I first saw it and liked it since then)

Thanks - Jane
0
Comment
Question by:janehaselden
  • 14
  • 9
  • 7
  • +5
39 Comments
 
LVL 15

Expert Comment

by:samri
ID: 7085689
Jane,

The page specified is implementing Javascript to rotate (or randomize) the image.  I would suspect that you could view the source HTML (depending on web browser you are using), by IE : Right-click | View Source.

I hope the information is useful.
0
 

Author Comment

by:janehaselden
ID: 7086228
I've viewed the source, but can't seem to spot any javascript for image randomisation.  They must be doing it server-side somehow, but I'd like to do this client-side if possible.  Does anyone know of any good javascript to do this?
0
 
LVL 15

Expert Comment

by:samri
ID: 7086261
Jane,

Apology... after examining the HTML codes, it looks like it has been hidden somewhere.  There are various "includes" which I failed to follow.

Anyhow, the following link should get you started:

http://support.the-spa.com/webpages/advanced/graphics_tips/rotating_images.html

Ran this search thru Google.
http://www.google.com/search?hl=en&lr=&ie=UTF8&oe=UTF8&q=rotating+image+using+javascript

good luck,
0
 
LVL 18

Expert Comment

by:bruno
ID: 7093490
0
 
LVL 10

Accepted Solution

by:
dij8 earned 50 total points
ID: 7099678
Doing a random image is easy.  I guess code can be found at the link above.  I can write the code if you want it here.

Doing it in order will require something very similar to the random version except you will also need a record of what the user has already seen.  Therefore cookies.  I can write you code for that as well if you like.

I don't have the code on file so I will have to write it.  That won't take long I'm asking if you need it before I bother.
0
 
LVL 1

Expert Comment

by:emery_k
ID: 7123504
Hope it is ok if I jump in. The discussion looks like a possible answer to my question `script (or ?) to change content'. Would this work to rotate blocks of text in order. Would not have to keep cookies as we don't think that what the visitor has seen before matters. We want to just rotate about 20 text items. Visitor 1 sees block 1 visitor 2 sees block 2 and if visitor 1 comes back he would see block 3.
0
 
LVL 18

Expert Comment

by:bruno
ID: 7123532
0
 

Author Comment

by:janehaselden
ID: 7124011
Yes dij8, I think your code would be very helpful indeed.  As I mentioned at the beginning of the discussion, the one on the Potlatch www.potlatchcorp.com website is very much like we need.  It doesn't really matter if they have already seen the image before, they just need a random image of, say, 5 to appear.  I notice that if I refresh their screen it doesn't always invoke a new image, but then sometimes it does so I'm not sure what their time delay is.

As people may revisit our site at roughly the same time of day eg. morning visits, it would be better if the refresh wasn't related to time of day, eg. after midnight but before midday, midday to 6pm etc., but related to hours or minutes so that they could get just about anything whatever time of day they visited.

Thanks dij8.  

Jane
0
 
LVL 18

Expert Comment

by:bruno
ID: 7124511
wtf?????



why did you ignore EVERYONE else but him?

No comments on any of the code that was already left here for you???



This is not the way to get help, and if you continue this way I'll make sure I don't offer my help to you in the future.



BRUNO
0
 

Author Comment

by:janehaselden
ID: 7124577
Well I am sorry Bruno.  I did try to read your link, but got confused at what the linked page was trying to tell me.  Didn't mean to ignore everyone at all, I know you have all been very helpful.  I guess I'm just new to this discussion forum and don't really get the etiquette yet. I don't know when to hit the 'Accept Comment as Answer' button without closing up the whole discussion yet as if everyone has been helpful, you don't want to award points to just one person rather than spread around several.

Sorreeee Jane
0
 
LVL 18

Expert Comment

by:bruno
ID: 7124692
what is it that you don't understand at this link?

http://www.bloke.com/javascript/Random/
0
 
LVL 10

Expert Comment

by:dij8
ID: 7129950
Sorry for the delay.  Here is a very simple page that displays a random image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Random image</title>
<script language="JavaScript" type="text/javascript">
ImageSelection = new Array(
  "images/image1.gif",
  "images/image2.gif",
  "images/image3.gif",
  "images/image4.gif",
  "images/image5.gif"
)
function RandomImage() {
  theImage = ImageSelection[Math.floor(Math.random()*ImageSelection.length)]
  return theImage
}
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
document.write ('<img src="' + RandomImage() + '" alt="" border="0" />')
</script>
</body>
</html>

The array ImageSelection can have as many images as you like.  Obviously the more images there are the more random the selection will be.  Note that each value in the array includes the full path to the image.

I have built the page so that the images can be any size.  Even different sizes.  The images should have a height and width value assigned though.  As long as they are all the same then include these variables (using whatever the correct height and width values are obviously) in the document.write part:
document.write ('<img src="' + RandomImage() + '" height="65" width="640" alt="" border="0" />')
0
 

Expert Comment

by:aaran
ID: 7173881
Adding to the comment above by dij8,

You may also want to preload the images before the page loads to improve the speed with which the images appear.

I have the code for this if you need it...although it's pretty easy to find, and Dreamweaver will allow you to do it through behaviours if you have it.

Aaran
0
 
LVL 10

Expert Comment

by:dij8
ID: 7173924
The images don't dynamically change so preloading is unneccessary.  It will load the only image that is used the same as it would load any other image in the page.
0
 

Expert Comment

by:aaran
ID: 7173935
I presume the images are pretty small in filesize then, as there will be some some delay between the content loading and the image displaying if the image is any larger than a handful of kb...(on a 56k dialup).

Aaran
0
 
LVL 10

Expert Comment

by:dij8
ID: 7173948
It doesn't make any difference.  ONE image is randomly loaded from a choice of images.  It is then displayed along with the rest of the page.  Preloading it will take the same amount of time as loading it when it is written.  In fact probably longer because it has to preload it first and THEN write it.  Loading it at the same time it is written will just load the single image much the same as any image.

Do you preload EVERY image on EVERY page BEFORE you display it?
0
 

Expert Comment

by:aaran
ID: 7173962
You're right, however, preloading will not take longer as writing it is completely nominal once it's loaded it.

When I use a random image script, or use any image larger than 2k, I preload it, as the image preloads before any of the page content displays.  If you don't do this, the content displays and the image displays slightly afterwards (and obviously, the larger the image file, the longer the gap).

This is an esthetical suggestion.  It merely means that there is a minimal delay between the page content loading and the random image loading.

If you look at http://www.potlatchcorp.com, where Jane first saw the effect, their images load in with a small delay.  This is what I'm trying to avoid.

Aaran
0
 

Expert Comment

by:aaran
ID: 7173966
You're right, however, preloading will not take longer as writing it is completely nominal once it's loaded it.

When I use a random image script, or use any image larger than 2k, I preload it, as the image preloads before any of the page content displays.  If you don't do this, the content displays and the image displays slightly afterwards (and obviously, the larger the image file, the longer the gap).

This is an esthetical suggestion.  It merely means that there is a minimal delay between the page content loading and the random image loading.

If you look at http://www.potlatchcorp.com, where Jane first saw the effect, their images load in with a small delay.  This is what I'm trying to avoid.

Aaran
0
 

Expert Comment

by:aaran
ID: 7173968
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 10

Expert Comment

by:dij8
ID: 7174017
And yet, still with my 512K ADSL connection I get a delay showing the new image when refreshing that page.  Although I guess preloading shouldn't ever cause a major issue.

Jane, did I give you want you want?  Do you want me to add a preload to it?  Are you there?
0
 

Expert Comment

by:aaran
ID: 7174031
That's because the images aren't fully optimised yet...there's 5, and they range in size from 9k to 21k...

Once they're fully optimised, the delay will be unnoticable on a 512k link.
0
 

Expert Comment

by:aaran
ID: 7174033
I've also just noticed that I forgot to put the preload script in!! hahaha

Apologies!
0
 

Author Comment

by:janehaselden
ID: 7174036
Thanks dij8.  I haven't had a chance to play with it yet, but hopefully at the weekend I will have a go.  I'm sure it'll be good.  The code looks helpful anyway.  Perhaps I should try the preload too.  Thanks for the help.

PS: If I want to accept the answer will aaran be able to continue the discussion?  Shall I leave it a bit longer?  Also, what if I want to make sure more than one person gets awarded points?

Jane
0
 

Expert Comment

by:aaran
ID: 7174054
If you want, I have an extension to the script that dij8 posted that allows you to use one of two methods...

The first is the random image script that you asked for.

The second uses the same images, but rotates them after a time period that you set (similar to banner rotation).

Aaran
0
 

Author Comment

by:janehaselden
ID: 7174075
It would be good to try all the alternative available - trouble is with all this help, who will get the points ?
0
 

Expert Comment

by:aaran
ID: 7174091
hahaha...there must be some help available somewhere about splitting points...

Hang on, I'll ask a moderator...

:0)
0
 

Author Comment

by:janehaselden
ID: 7174093
It would be good to try all the alternative available - trouble is with all this help, who will get the points ?
0
 

Expert Comment

by:aaran
ID: 7174095
hahaha...there must be some help available somewhere about splitting points...

Hang on, I'll ask a moderator...

:0)
0
 

Expert Comment

by:aaran
ID: 7174101
0
 
LVL 10

Expert Comment

by:dij8
ID: 7174112
Splitting points is easy.  Go to the Community Support area and post a 0 point question saying you want to split points.  Include a link to this question (http://www.experts-exchange.com/webauthor/Q_20312368.html) and how you want to split points.  The always helpful moderators will do their thing and explain what you need to do to complete the point split.

As for image preloading and/or timed swapping, I can do that.  It gets a little more complicated though if you want to get it right.  Back in a bit with a new page or two. :-)

<side-note>
aaran, use the link at the top of the page to reload the question rather than using your browser refresh.  That will stop the double posting of comments.
</side-note>
0
 
LVL 10

Expert Comment

by:dij8
ID: 7174125
Single preloaded random image version:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Random image</title>
<script language="JavaScript" type="text/javascript">
ImageSelection = new Array(
  "images/image1.gif",
  "images/image2.gif",
  "images/image3.gif",
  "images/image4.gif",
  "images/image5.gif"
)
function preload() {
  if (arguments.length>0) {
    for (i=0;i<arguments.length;i++) {
      preloadedimages = new Array
      preloadedimages[i] = new Image
      preloadedimages[i].src = arguments[i]
    }
  }
}
function RandomImage() {
     theImage = ImageSelection[Math.floor(Math.random()*ImageSelection.length)]
     return theImage
}
var theRandomImage = RandomImage()
preload(theRandomImage)
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
document.write ('<img src="' + theRandomImage + '" alt="" border="0" />')
</script>
</body>
</html>

0
 

Expert Comment

by:aaran
ID: 7174143
For the dual script that performs the random image AND the rotating image:

Put this in the HEAD of your document, replacing the image1.gif etc:-

<script language="JavaScript">
var images = new Array();

images[0] = "image1.gif";
images[1] = "image2.gif";
images[2] = "image3.gif";

function ShowImg() {
var number = images.length;
var increment = Math.floor(Math.random() * number);
var strTemp ='<img src="' + images[increment] + '">';
document.write(strTemp);
}

var rotate = 5000;
var count = 0;

function RotateImg(myImage){
 myImage.src=images[count];
 count++;
 if(count==images.length){count = 0;}
 setTimeout("RotateImg(myImage)",rotate);
}

</script>




NOW, to use the random image, simply put the following code where you want the image to be:-

<script language="javascript">ShowImg();</script>


OR to use the rotating image, put the following code in the <BODY> tag:-

onLoad="RotateImg(myImage)";

and then put the following code where you want the image to appear:-

<img name="myImage" src="" border="0">





AND THAT'S ALL THERE IS TO IT!

Enjoy.

Aaran





0
 

Expert Comment

by:aaran
ID: 7174153
The script above can be used to do either method (random image on page load, or rotating images after a certain time).

You can change the delay between image swaps by changing the variable:

var rotate = 5000;

it's in milliseconds, so 5000 = 5 seconds.

Aaran

0
 
LVL 10

Expert Comment

by:dij8
ID: 7174160
Took me a little time to write it so a bit behind Aaran.  But here's my preloaded and rotating images.  It should work crossbrowser without any issues as well.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Random image</title>
<script language="JavaScript" type="text/javascript">
ImageSelection = new Array(
 "images/image1.gif",
 "images/image2.gif",
 "images/image3.gif",
 "images/image4.gif",
 "images/image5.gif"
)
var btype = navigator.appName;
var bver = parseInt(navigator.appVersion);
var rolloversupport = true;
if (btype == "Microsoft Internet Explorer" && bver < 4 || bver < 3) {rolloversupport = false;}
function imageswap(field, newimage) {
  if (rolloversupport) {field.src = newimage;}
}
function preload() {
  if (arguments.length>0) {
    for (i=0;i<arguments.length;i++) {
      preloadedimages = new Array
      preloadedimages[i] = new Image
      preloadedimages[i].src = arguments[i]
    }
  }
}
function RandomImage() {
     theImage = ImageSelection[Math.floor(Math.random()*ImageSelection.length)]
     return theImage
}
var imageList = ""
for (p=0;p<ImageSelection.length;p++) {
     if (imageList!="") {
    imageList = imageList + "," + ImageSelection[p]
     } else {
          imageList = ImageSelection[p]
     }
}
preload(imageList)
var theRandomImage = RandomImage()
function swapRandom() {
     imageswap(document.objRandomImage,RandomImage())
}
setInterval("swapRandom()",5000)
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
document.write ('<img name="objRandomImage" id="objRandomImage" src="' + theRandomImage + '" alt="" border="0" />')
</script>
</body>
</html>

0
 

Author Comment

by:janehaselden
ID: 7174174
Wow thanks guys - is this a race - only I haven't left the start line yet !  Give me the weekend OK?  

Jane
0
 

Expert Comment

by:aaran
ID: 7174187
Ha ha ha.  Maybe dij8 and I should join forces! LOL

Hope we've been able to help.  From we've posted between us, you should be up and running in no time!

Aaran
0
 
LVL 10

Expert Comment

by:dij8
ID: 7174210
You just caught me at the right time. :-)

Try what you like over the weekend and I am sure between us Aaran and I can answer any more questions you might have on this.
0
 

Expert Comment

by:modulo
ID: 7468082
Dear janehaselden,

I've refunded 50 points to enable you to accept the comment for one expert and to post a
"Points for <expertname>" Q for the other expert in the same topic area.

Please:
1) Post the link to the original Q in the "Points for <expertname>" and
2) Add in the original Q a comment with the link to the "Points for <expertname>", thus the email notif will warn the expert.

modulo

Community Support Moderator
Experts Exchange
0
 
LVL 6

Expert Comment

by:Mindphaser
ID: 7513488
Force accepted

** Mindphaser - Community Support Moderator **

aaran, there will be a separate question with points for your help (20411379)
0

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

Accessibility and Usability are two concepts that seem to be closely related.  But, too many people seem to have a distorted perception of them. During last five years, those two words have come to the day-to-day work of almost every web develope…
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
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.

760 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

23 Experts available now in Live!

Get 1:1 Help Now