Jump to content

Looping Through An Array Of Images


madsovenielsen
 Share

Recommended Posts

Hey all.Im creating a image gallery with 10 images. i want to change the css property URL of background-image: when a forward button is pressed. and reverse if the backward button is pressed.Im a little stuck. this is what i have come up with so far:

// JavaScript Gallery enginefunction changeImage(){	var auditt_gallery = new Array();	audiTT[0]="url(\"auditt_silver.jpg\");";	audiTT[1]="url(\"auditt_silver2.jpg\");";	audiTT[2]="urlToImage";	audiTT[3]="urlToImage";	audiTT[4]="urlToImage";	audiTT[5]="urlToImage";	audiTT[6]="urlToImage";	audiTT[7]="urlToImage";	audiTT[8]="urlToImage";	audiTT[9]="urlToImage";	for()}

I really dont know where to go from here. any help is greatly appreciated.

Link to comment
Share on other sites

try this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#imageGallery { background:url(1cha_imgash_thumb.gif) no-repeat; width: 100px; height: 75px; }</style><script type="text/javascript">/*<![CDATA[*//*---->*/var picref=0; var auditt_gallery = new Array(); auditt_gallery[0]="1cha_imgash_thumb.gif"; auditt_gallery[1]="1cha_imgbrett_thumb.gif"; auditt_gallery[2]="1cha_imgdallas_thumb.gif"; auditt_gallery[3]="1cha_imgkane_thumb.gif";function forwardthis(){if(picref+1> auditt_gallery.length-1) { picref=auditt_gallery.length-1; }else { picref=picref+1; }changethis(picref);}function reversethis(){if(picref-1<=0) { picref=0; }else { picref=picref-1; }changethis(picref);}function changethis(picref){ document.getElementById("imageGallery").style.backgroundImage="url("+auditt_gallery[picref]+")";}/*--*//*]]>*/</script> </head><body><div id="imageGallery"></div><a href="#" onclick="forwardthis();" >Forward</a>    <a href="#" onclick="reversethis();">Back</a></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...