JavaScript

Welcome to Dream.In.Code
	Getting Help is Easy! Join 136,459 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,804 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Call for more pictures

Call for more pictures

Options

velaphi	23 Jul, 2008 - 08:52 AM Post #1
New D.I.C Head Joined: 20 Jul, 2008 Posts: 8	Hi, i would like this program to call for more pictures when i click forward button and call for more pictures when i click backward button. CODE <html> <head> <script language="Javascript"> <!--Hide from the old browser if (document.images) { A = new Image B = new Image C = new Image D = new Image E = new Image F = new Image A.src = "Arachnid.jpg" <!--names of the pictures to be loaded--> B.src = "Bison.jpg" C.src = "Coyote.jpg" D.src = "Deer.jpg" E.src = "Elk.jpg" F.src = "Feline.jpg" } //--> </script> </head> <title> Images </title> <body> <img src="Arachnid.jpg" name="rollover" width="250" hieght="250"><br><br> <input type="BUTTON" value="Foward" onClick="document.rollover.src=A.src"> <!--Button to call the pictures--> <input type="BUTTON" value="Back" onClick="document.rollover.src=B.src"> <!--Button to call the pictures in reverse--> </body> </head>
	This Post Was Helpful!


Register for Free to Make These Ads Go Away!

ahmad_511

RE: Call For More Pictures
23 Jul, 2008 - 03:55 PM

Post #2

D.I.C Regular

Joined: 28 Apr, 2007
Posts: 351

Windows

Thanked: 8 times
Dream Kudos: 400
My Contributions

hello,
you can use array to store all image's URLs , and then you can loop over the array items to preload these images ( you can ignore the image preloader if you want to)
create a simple function to change the image source

jscript


<html>
<head>

<script language="Javascript">
<!--Hide from the old browser  
currentImageIndex=0
imgArr=new Array("Arachnid.jpg","Bison.jpg","Coyote.jpg","Deer.jpg", "Elk.jpg","Feline.jpg")
if (document.images) 
{
for (i=0;i<imgArr.length;i++){
img=new Image()
img.src=imgArr[i];
}
}
 function roll(bf){

  currentImageIndex+=bf;

 if (currentImageIndex<0)currentImageIndex=imgArr.length-1
 if(currentImageIndex>imgArr.length-1)currentImageIndex=0 
 document.getElementById("rollover").src=imgArr[currentImageIndex];
 }
//-->
</script>
</head>
<title> Images </title>
<body>

<img src="Arachnid.jpg" id="rollover" width="250" hieght="250"><br><br>
<input type="BUTTON" value="Foward"  onClick="roll(1)"> <!--Button to call the pictures-->
<input type="BUTTON" value="Back" onClick="roll(-1)"> <!--Button to call the pictures in reverse-->

</body>
</head>