NWE Help: Web: Authoring: Tips: Random Images

NWE Home :: Help :: Web :: Authoring :: HTML :: Tips

With some simple JavaScript, you can take several images and then have your webpage randomly load those images each time someone visits your webpage. This is a nice trick for visual variety and looks particularly attractive with collage images.

The JavaScript needed to switch your images is listed below. This JavaScript needs to go on your page where you want the images to be. The images should probably all be the same size so that switching the images doesn't distort the images (unless that's what you're going for).

To use this:

Copy the code below and paste it inbetween the BODY tags of your HTML document.
Change the fields in blue to the path to your image and the image name.
Change the fields in red to your Alternative text for each image.
Finally, change the parts in green to the width and height for your image.


<script language="javascript">
<!--
  //  Author:       Scott Brady
  //  Org:          HotSource HTML Help
  //  Website:      http://www.sbrady.com/hotsource/

var bdis = "<img src=\"";
var edis = " width=\"250\" height=\"150\" alt=\"Put your Descriptive Alternate Text Here\"border=\"0\">";
var rnumb = "";
var img = "";

rnumb += Math.floor(Math.random()*3);
img = rnumb;
if (img == "0") {
document.write(bdis+ "images/intropic1.gif\" alt=\"Ishtar\""
+edis);
}
if (img == "1") {
document.write(bdis+ "images/intropic2.gif\" alt=\"Battlefield Earth\"" +edis);
}
if (img == "2") {
document.write(bdis+ "images/intropic3.gif\" alt=\"Crossroads\"" +edis);
}
// -->
</script>

See the JavaScript Above in action below - just refresh to see the images change.

You can also link the random images, and here's a script that does just that.

<script language="JavaScript">
<!--

var b1dis = "<a href=\"";
var bdis = "\"><img src=\"";
var edis = " width=\"250\" height=\"150\" alt=\"some text\" border=\"0\"></a>";
var rnumb = "";
var img = "";

rnumb += Math.floor(Math.random()*3);
img = rnumb;

if (img == "0") {
document.write(b1dis+ "http://www.nwe.ufl.edu" +bdis+ "intropic3.gif\"" +edis);
}

if (img == "1") {
document.write(b1dis+ "http://www.ufl.edu" +bdis+ "intropic2.gif\"" +edis);
}

if (img == "2") {
document.write(b1dis+ "http://www.image.ufl.edu" +bdis+ "intropic1.gif\"" +edis);
}

//-->
</script>

And, here it is in action.