|
|
image viewer
This is a great experiment to play with. You can use this basic application to achieve some startling results without using a server-side script. We use a preloader to download the image data into an array. We then reference the array items and display accordingly.
The getElementById() method is used to access the properties of each image. The images are then displayed . This can be taken a little further - such as putting together a slide show – or simply displaying the images in the way you have in mind.
<html>
<head>
<script type="text/javascript">
myImages=new Array();
myImages[0]="image1.gif";
myImages[1]="bulbon.gif";
myImages[2]="landscape.jpg";
myImages[3]="image2.gif";
myImages[4]="bulboff.gif";
myImages[5]="smiley.gif";
imagecounter=myImages.length-1;
i=0;
function first() {
document.getElementById('imageviewer').src=myImages[0];
i=0;
}
function previous() {
if (i>0) {
i--;
document.getElementById('imageviewer').src=myImages[i];
}
}
function next() {
if (i<imagecounter) {
i++;
document.getElementById('imageviewer').src=myImages[i];
}
}
function last() {
document.getElementById('imageviewer').src=myImages[imagecounter];
i=imagecounter;
}
</script>
</head>
<body>
<center>
<form>
<input type="button" value="First" onclick="first()">
<input type="button" value="Previous" onclick="previous()">
<input type="button" value="Next" onclick="next()">
<input type="button" value="Last" onclick="last()">
</form>
<img id="imageviewer" src="image1.gif" width="100" height="30">
</center>
</body>
</html>
A single click accesses the next, previous, first or last image given in the array stated in the JavaScript function in the HEAD of the document. Four functions were created, each with a specific action to access an index item in the array. The original image doesn’t have to even be seen – it can be a transparent image 1 pixel by 1 pixel in size or an image that is the same size and color as the page background.
|
|
