Image display

iriecircle · May 25, 2011

Hi,

I found this script on w3schools.com but how do I modify it so that users and click on a number like Previous 1 2 3 4 5 6 Next. Please help. Here is the code and site url http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_array_next

<html>

<head>

myImages=new Array();

myImages[0]="w3schools.gif";

myImages[1]="bulbon.gif";

myImages[2]="landscape.jpg";

myImages[3]="w3schools.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;

}

function next()

{

if (i<imagecounter)

{

i++;

document.getElementById('imageviewer').src=myImages;

}

function last()

{

document.getElementById('imageviewer').src=myImages[imagecounter];

i=imagecounter;

}

</script>

</head>

Thanks

hemo-ali · May 26, 2011

Use this code

<html>
<head>
<script type="text/javascript">
myImages=new Array();
myImages[0]="images/101010.jpg";
myImages[1]="images/131313.jpg";
myImages[2]="images/151515.jpg";
myImages[3]="images/u3.jpg";
myImages[4]="images/u4.jpg";
myImages[5]="images/151515.jpg";
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;
}
function change(str){
document.getElementById('imageviewer').src=myImages[str];
}
</script>
</head>

<body>
<center>
<form>
<input type="button" value="First" onclick="first()">
<input type="button" value="previous" onclick="previous()">
<input type="button" value="1" onclick="change(0)">
<input type="button" value="2" onclick="change(1)">
<input type="button" value="3" onclick="change(2)">
<input type="button" value="4" onclick="change(3)">
<input type="button" value="5" onclick="change(4)">
<input type="button" value="6" onclick="change(5)">


<input type="button" value="Next" onclick="next()">
<input type="button" value="Last" onclick="last()">
</form>
<img id="imageviewer" src="images/101010.jpg" alt="w3Scools" width="100" height="30" />
</center>
</body>
</html>

explaining:-

if you will use 5 images only

I made buttons by the numbers of the images then

I made function named change(str)

this function gets the str value and then use the array to change the image

**notice you should change the images as you want

Sign In

Image display

Recommended Posts

iriecircle

Link to comment

Share on other sites

hemo-ali

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information