Forum Moderators: open
I am an html beginner, just starting out. For a simple homepage I wanted to show a random image, from a file containing a large series of my artwork. Having just been introduced to JavaScript, I thought I'd use this method to produce the random image. I realise php and css methods do exist, but I am not familiar with these yet. Considering that I wanted minimal html code, for it to be as efficient and simple as possible. I wanted to use an external .js However this has caused me a few problems. Here below is a test .html I'm using along with the .js I am doing all this coding offline.
---------------
test_index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lewis</title>
<link rel="Shortcut Icon" href="logo.ico"/>
<script type="text/javascript" language="JavaScript" src="test/test_randomimage.js"></script>
</head>
<body>
<table cellpadding="" cellspacing="">
<tr>
<td bgcolor="#33CC00" >
<P> Artwork
</td>
<td>
<img id="randimg" src="test/test_randomimage.js" alt="random image found within website">
</td>
</tr></table>
</body>
</html>
----------
test_randomimage.js
<!--
window.onload=rimag;
var img=new Array(53);
img[0]="web_images/random/ri_001.JPG";
img[1]="web_images/random/ri_002.JPG";
img[2]="web_images/random/ri_003.JPG";
img[3]="web_images/random/ri_004.JPG";
...continues
img[52]="web_images/random/ri_053.jpg";
var rand=Math.round(Math.random()*52);
function rimag() {
document.getElementById("randimg").src = img[randNum];
}
-->
-----------
This .js code does work when embedded within the html. But as I want to simplify the html as much as possible (and to help with design), an external .js is necessary. Plus, when I attempt to execute the .js the alt="random image found within website" is displayed, nothing else!
Another problem is that the
<link rel="Shortcut Icon" href="logo.ico"/> stops functioning. the logo vanishes.
Any help would be greatly appreciated.
logo1.jpg
logo2.jpg
logo3.jpg
.
.
.
logo53.jpg
When your images are ready, upload them into a directory on your server.
Here is an example image tag:
<img src="logo2.jpg">
If all of your images will have the same height and width, you might also include those in the image tag:
<img src="logo2.jpg" height="150" width="200">
Put this JavaScript into the HEAD area of your web page (or) in .js file.
<HTML>
<HEAD>
<script type="text/javascript" language="JavaScript">
<!--
// Type the number of images you are rotating.
NumberOfImagesToRotate = 53;
// Specify the first and last part of the image tag.
FirstPart = '<img src="logo';
LastPart = '.jpg" height="150" width="200">';
function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
//-->
</script>
</HEAD>
Where you want the random image to appear on your web page, put:
<script type="text/javascript" language="JavaScript"><!--
printImage();
//--></script>
