madsovenielsen Posted August 14, 2009 Share Posted August 14, 2009 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 More sharing options...
dsonesuk Posted August 14, 2009 Share Posted August 14, 2009 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 More sharing options...
madsovenielsen Posted August 17, 2009 Author Share Posted August 17, 2009 Thank you so much. this is very nice. /mads Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.