New Image With Links
This change is based on a previous one, and uses
similar code.
Try refreshing your browser and noting how the image below changes -- the
image changes, the link changes, and the alt text changes. As there are only
four images, then sometimes the image doesn't change.
This image used a paragraph with an id, but you might prefer to use a
table or something else.
There are 3 things to do:
First modify the following code to suite your images (and put it in the
head of your page):
<!-- ####################### start of random image
####################### -->
<script type="text/javascript">
/*
####################### begins list of images to be used
####################### */
currentIndx=0;
/*List images*/
MyImages=new Array();
MyImages[0]='newImageJS.gif';
MyImages[1]='newImageCSS.gif';
MyImages[2]='newImageHTML.gif';
MyImages[3]='newImagePHP.gif';
/*List Urls, in the same order as the
images, and have the same number*/
MyLinkUrls=new Array();
MyLinkUrls[0]='index.html';
MyLinkUrls[1]='../StyleSheets/index.html';
MyLinkUrls[2]='../HTMLGuide/index.html';
MyLinkUrls[3]='../phpTutorial/index.html';
/* Do the same for the alt text:*/
MyAlts=new Array();
MyAlts[0]='JavaScript
Tutorial';
MyAlts[1]='CSS Tutorial';
MyAlts[2]='HTML Tutorial';
MyAlts[3]='PHP Tutorial';
/*
####################### this function loads a random image
####################### */
function newImage() {
/*#### This line
makes the random choice of image ###*/
currentIndx=Math.round(Math.random()*(MyImages.length-1))
myPara=document.getElementById("newImage");
var sText='<a href="'+MyLinkUrls[currentIndx]+'">'+
'<img alt="'+MyAlts[currentIndx]+'" height="100" src="'+MyImages[currentIndx]+'"
width="200"></a>';
myPara.innerHTML=sText;
}
</script>
<!-- #######################
end of random image ####################### -->
Don't forget to change the image size for your particular image!
Secondly have the following code in the body tag:
<body onload="newImage()">
And lastly, have somewhere to put the image. I used:
<p id="newImage" name="newImage"></p>
|