onclick = style.backgroundImage array plus 1

**BCinNV** · 09-13-2009, 06:48 AM

I found this online somewhere and used it load a random background inside a table id'd "shgbody". It works great:

Code:

<!--
var backgroundImages=new Array(9);
backgroundImages[0]="html-homeimages/bk1.jpg";
backgroundImages[1]="html-homeimages/bk2.jpg";
backgroundImages[2]="html-homeimages/bk3.jpg";
backgroundImages[3]="html-homeimages/bk4.jpg";
backgroundImages[4]="html-homeimages/bk5.jpg";
backgroundImages[5]="html-homeimages/bk6.jpg";
backgroundImages[6]="html-homeimages/bk7.jpg";
backgroundImages[7]="html-homeimages/bk8.jpg";
backgroundImages[8]="html-homeimages/bk9.jpg";
backgroundImages[9]="html-homeimages/bk10.jpg";
onload=function(){
var e=(document.getElementById)?document.getElementById("shgbody"):(document.all)?document.all.myTableId:(document.layers)?document.myTableId:null;
if(!e)return true;
e.style.backgroundImage="url("+backgroundImages[Math.floor(Math.random()*backgroundImages.length)]+")";
}
//-->

But I need a simple onlick (a href type link) that will run a function for users to tour through the array of photos; similar to what microsoft has done with bing.com (to click through the different images).

I've tried to create a function using the bottom portion of the scipt below, but java isn't as intuitive as VBA so I'm having a difficult time trying to understand or come up with anything that will work.

I was trying this:

Code:

<!--
function nextimage()

random_number= Math.floor(Math.random()* 9+1 );
if (random_number==0) {
e.style.backgroundImages="html-homeimages/bk1.jpg";
}
if (random_number==1) {
e.style.backgroundImages="html-homeimages/bk2.jpg";
}
if (random_number==2) {
e.style.backgroundImages="html-homeimages/bk3.jpg";
}
if (random_number==3) {
e.style.backgroundImages="html-homeimages/bk4.jpg";
}
if (random_number==4) {
e.style.backgroundImages="html-homeimages/bk5.jpg";
}
if (random_number==5) {
e.style.backgroundImages="html-homeimages/bk6.jpg";
}
if (random_number==6) {
e.style.backgroundImages="html-homeimages/bk7.jpg";
}
if (random_number==7) {
e.style.backgroundImages="html-homeimages/bk8.jpg";
}
if (random_number==8) {
e.style.backgroundImages="html-homeimages/bk9.jpg";
}
if (random_number==9) {
e.style.backgroundImages="html-homeimages/bk1.jpg";
}
-->

<a href="#" "onClick="nextimage()">Click</a>

Can anyone tell me why this isn't working?

**BCinNV** · 09-13-2009, 08:11 PM

Okay so I got this to work to change it. I need it do the if type stuff though; any ideas?

Code:

<!--
function change1(){

document.getElementById("shgbody").style.background='url(html-homeimages/bk1.jpg)';

}
-->

Originally Posted by BCinNV

I found this online somewhere and used it load a random background inside a table id'd "shgbody". It works great:

Code:

<!--
var backgroundImages=new Array(9);
backgroundImages[0]="html-homeimages/bk1.jpg";
backgroundImages[1]="html-homeimages/bk2.jpg";
backgroundImages[2]="html-homeimages/bk3.jpg";
backgroundImages[3]="html-homeimages/bk4.jpg";
backgroundImages[4]="html-homeimages/bk5.jpg";
backgroundImages[5]="html-homeimages/bk6.jpg";
backgroundImages[6]="html-homeimages/bk7.jpg";
backgroundImages[7]="html-homeimages/bk8.jpg";
backgroundImages[8]="html-homeimages/bk9.jpg";
backgroundImages[9]="html-homeimages/bk10.jpg";
onload=function(){
var e=(document.getElementById)?document.getElementById("shgbody"):(document.all)?document.all.myTableId:(document.layers)?document.myTableId:null;
if(!e)return true;
e.style.backgroundImage="url("+backgroundImages[Math.floor(Math.random()*backgroundImages.length)]+")";
}
//-->

But I need a simple onlick (a href type link) that will run a function for users to tour through the array of photos; similar to what microsoft has done with bing.com (to click through the different images).

I've tried to create a function using the bottom portion of the scipt below, but java isn't as intuitive as VBA so I'm having a difficult time trying to understand or come up with anything that will work.

I was trying this:

Code:

<!--
function nextimage()

random_number= Math.floor(Math.random()* 9+1 );
if (random_number==0) {
e.style.backgroundImages="html-homeimages/bk1.jpg";
}
if (random_number==1) {
e.style.backgroundImages="html-homeimages/bk2.jpg";
}
if (random_number==2) {
e.style.backgroundImages="html-homeimages/bk3.jpg";
}
if (random_number==3) {
e.style.backgroundImages="html-homeimages/bk4.jpg";
}
if (random_number==4) {
e.style.backgroundImages="html-homeimages/bk5.jpg";
}
if (random_number==5) {
e.style.backgroundImages="html-homeimages/bk6.jpg";
}
if (random_number==6) {
e.style.backgroundImages="html-homeimages/bk7.jpg";
}
if (random_number==7) {
e.style.backgroundImages="html-homeimages/bk8.jpg";
}
if (random_number==8) {
e.style.backgroundImages="html-homeimages/bk9.jpg";
}
if (random_number==9) {
e.style.backgroundImages="html-homeimages/bk1.jpg";
}
-->

<a href="#" "onClick="nextimage()">Click</a>

Can anyone tell me why this isn't working?

**thenajsays** · 09-13-2009, 08:23 PM

you could do ifs, like this:

Code:

randNum= Math.floor(Math.random()* 9+1 );
if (randNum == 0){
do something
}
else if (randNum == 1){
do something else
}
else if (randNum == 2){
do something else
}

or you could do a switch... i dont use switches much so for that i would point you to the great tutorials at w3schools.com... here is where you can find info on switches... cheers!

**BCinNV** · 09-13-2009, 08:37 PM

Thought I tried that. Maybe typed it wrong. I'll try again.

is it be possible just to do something like this:

random_number= 0; instead of random_number= Math.floor(Math.random()* 9+1 ); ?

just so the slide begins at the start of the images? I'm having trouble understanding what the math.floor(Math.random) * 9 + 1 is doing.

Basically all I am trying to do is get the next number in the line and go through like a slideshow each time someone clicks the button to do the function. SO if on image 9, then go to image 1 (the start of the array), if on 1, go to 2, etc.

**thenajsays** · 09-13-2009, 08:41 PM

you tried something similar...
math.floor(Math.random) * 9 + 1 creates a random number... you want to click through an array of images... do you want to click through them in order? then you wouldnt need the random number code...

**BCinNV** · 09-13-2009, 08:51 PM

Yes in order; but starding from the image that's there. WHen you enter the website page, the body of my content is inside a table. Javascript loads a random background into that table, so users don't see the same one every time they visit the site. That's the first script I posted.

This function needs to find out what number from the array that was, and start the slide show from the next image in line. Are var's stored. For example, can I put in the first script randNum = (something to retrieve what it created here) and use that in the onclick function to click through the nine images?

I thought this would work but it deosn't seem to want to:

if (document.getElementById("shgbody").style.background='url(html-homeimages/bk1.jpg)') {
document.getElementById("shgbody").style.background='url(html-homeimages/bk2.jpg)'
}

**thenajsays** · 09-13-2009, 09:09 PM

OH! ok... so then you start off with a slightly modified version of your first code:

Code:

<!--
var backgroundImages=new Array(9);
backgroundImages[0]="html-homeimages/bk1.jpg";
backgroundImages[1]="html-homeimages/bk2.jpg";
backgroundImages[2]="html-homeimages/bk3.jpg";
backgroundImages[3]="html-homeimages/bk4.jpg";
backgroundImages[4]="html-homeimages/bk5.jpg";
backgroundImages[5]="html-homeimages/bk6.jpg";
backgroundImages[6]="html-homeimages/bk7.jpg";
backgroundImages[7]="html-homeimages/bk8.jpg";
backgroundImages[8]="html-homeimages/bk9.jpg";
backgroundImages[9]="html-homeimages/bk10.jpg";
var slideCount = backgroundImages.length;
var slideNum = Math.floor(Math.random() * slideCount);
onload=function(){
var e=(document.getElementById)?document.getElementById("shgbody"):(document.all)?document.all.myTableId:(document.layers)?document.myTableId:null;
if(!e)return true;
e.style.backgroundImage="url("+backgroundImages[slideNum]+")";
}
//-->

then your next function should look something like this:

Code:

function nextimage(){
slideNum++;
if (slideNum <= slideCount){
document.getElementById("shgbody").style.background = backgroundImages[slideNum];
}
else if (slideNum > slideCount){
slideNum = 0;
document.getElementById("shgbody").style.background = backgroundImages[slideNum];
}
}

give that a shot and let me know how it goes! cheers!

**BCinNV** · 09-13-2009, 09:18 PM

Originally Posted by thenajsays

OH! ok... so then you start off with a slightly modified version of your first code:

Code:

<!--
var backgroundImages=new Array(9);
backgroundImages[0]="html-homeimages/bk1.jpg";
backgroundImages[1]="html-homeimages/bk2.jpg";
backgroundImages[2]="html-homeimages/bk3.jpg";
backgroundImages[3]="html-homeimages/bk4.jpg";
backgroundImages[4]="html-homeimages/bk5.jpg";
backgroundImages[5]="html-homeimages/bk6.jpg";
backgroundImages[6]="html-homeimages/bk7.jpg";
backgroundImages[7]="html-homeimages/bk8.jpg";
backgroundImages[8]="html-homeimages/bk9.jpg";
backgroundImages[9]="html-homeimages/bk10.jpg";
var slideCount = backgroundImages.length;
var slideNum = Math.floor(Math.random() * slideCount);
onload=function(){
var e=(document.getElementById)?document.getElementById("shgbody"):(document.all)?document.all.myTableId:(document.layers)?document.myTableId:null;
if(!e)return true;
e.style.backgroundImage="url("+backgroundImages[slideNum]+")";
}
//-->

then your next function should look something like this:

Code:

function nextimage(){
slideNum++;
if (slideNum <= slideCount){
document.getElementById("shgbody").style.background = backgroundImages[slideNum];
}
else if (slideNum > slideCount){
slideNum = 0;
document.getElementById("shgbody").style.background = backgroundImages[slideNum];
}
}

give that a shot and let me know how it goes! cheers!

No reaction; maybe something wrong with my link:

<a href="#" onClick="nextimage()">Click</a>

**BCinNV** · 09-13-2009, 09:27 PM

No reaction. I combined the files into on elinked javascript file like below (maybe it's wrong)? Using this as my code to start the function:

<a href="#" onClick="nextimage()">Click</a>

Code:

<!--
var backgroundImages=new Array(9);
backgroundImages[0]="html-homeimages/bk1.jpg";
backgroundImages[1]="html-homeimages/bk2.jpg";
backgroundImages[2]="html-homeimages/bk3.jpg";
backgroundImages[3]="html-homeimages/bk4.jpg";
backgroundImages[4]="html-homeimages/bk5.jpg";
backgroundImages[5]="html-homeimages/bk6.jpg";
backgroundImages[6]="html-homeimages/bk7.jpg";
backgroundImages[7]="html-homeimages/bk8.jpg";
backgroundImages[8]="html-homeimages/bk9.jpg";
backgroundImages[9]="html-homeimages/bk10.jpg";
var slideCount = backgroundImages.length;
var slideNum = Math.floor(Math.random() * slideCount);
onload=function(){
var e=(document.getElementById)?document.getElementById("shgbody"):(document.all)?document.all.myTableId:(document.layers)?document.myTableId:null;
if(!e)return true;
e.style.backgroundImage="url("+backgroundImages[slideNum]+")";
}
-->

<!--
function nextimage(){
slideNum++;
if (slideNum <= slideCount){
document.getElementById("shgbody").style.background = backgroundImages[slideNum];
}
else if (slideNum > slideCount){
slideNum = 0;
document.getElementById("shgbody").style.background = backgroundImages[slideNum];
}
}
-->