Solved

Random images on page load - Both Javascript & html required...

Posted on 2006-07-07
3
202 Views
Last Modified: 2010-04-06
Hello, this is a question that's been asked many times before but in fragments due to people usually knowing how to get started...  Can we assume NO knowledge on my part as to how to do this? Okay, here goes:

How do I get images to display randomly on a page each time it reloads?
i.e. A page banner that is different each time it is visited.  (I don't want the image to change whilst actually on screen).

I know I need a combination of Javascript and HTML but that's all I know.  Could somebody supply all the necessary code and end this question forever?

Many thanks indeed.
0
Comment
Question by:ml1n4
  • 2
3 Comments
 
LVL 1

Expert Comment

by:sushestvo
ID: 17061060
<html>
 <body bgcolor="#EDEDED" text="#000000" link="#000000">
 <center>

<Script Language ="JavaScript">
 function RandomNumber()
 {
   var today = new Date();
   var num= Math.abs(Math.sin(today.getTime()/1000));
   return num;
 }
  function RandomGraphics()
 {
   var x = RandomNumber();
    if (x > .77)
 {document.write("<A HREF='http://www.womir.com/'><img src='004.jpg' align=center hspace=10></a>"); return;
 }
   if (x > .66)
 {document.write("<A HREF='http://www.womir.com/'><img src='005.jpg' align=center hspace=10></a>"); return;
 }
   if (x > .55)
 {document.write("<A HREF='http://www.womir.com/'><img src='006.jpg' align=center hspace=10></a>"); return;
 }
   if (x > .44)
 {document.write("<A HREF='http://www.womir.com/'><img src='007.jpg' align=center hspace=10></a>"); return;
 }
   if (x > .33)
 {document.write("<A HREF='http://www.womir.com/'><img src='008.jpg' align=center hspace=10></a>"); return;
 }
   if (x > .22)
 {document.write("<A HREF='http://www.womir.com/'><img src='005.jpg' align=center hspace=10></a>"); return;
 }
   if (x > .11)
 {document.write("<A HREF='http://www.womir.com/'><img src='004.jpg' align=center hspace=10></a>"); return;
 }
   if (x > 0)  
 {document.write("<A HREF='http://www.womir.com/'><img src='008.jpg' align=center hspace=10></a>"); return;
 }
 }
 
 RandomGraphics();
 </SCRIPT>
<b>Reload page.</b>
 </body>
 </html>
0
 
LVL 5

Accepted Solution

by:
koolie earned 500 total points
ID: 17061156
I think you'll find this link is exactly what you are looking for.
http://jscode.com/js_random_image.shtml
It is simple and to the point.  I was going to copy it out, but it will be easier for you from the link
0
 
LVL 5

Expert Comment

by:koolie
ID: 17061181
One other note about the link I posted, if you want to learn off of it it is very well documented
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

809 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