S
Simply Confusing!
Hi,
I'm wading my way thru JS initiation, so please bear with me!
I am setting up a site with a welcome page where there will be a scenic
image and a short descriptive text phrase, related to the image. I want to
create an array of images and phrases so that a visitor will randomly invoke
a new image and phrase whenever they arrive. I'm drawing from a bank of
about 40 images, each with an associated phrase.
My plan was to have a seperate JS file, which defines 1 array for images and
1 array for phrases; numbered sequentially so that image # will match phrase
#.
Example:
var ImageSwap = new Array(40)
ImageSwap[0]='..\images\mountains.jpg';
ImageSwap[1]='..\images\seaside.jpg';
ImageSwap[2]='..\images\sunset.jpg';
.... etc to 40
var TxtQuot = new Array(40)
TxtPhrase[0]='Alpine meadows';
TxtPhrase[1]='Beaches in Malibu';
TxtPhrase[2]='Sunset in Maui';
... etc to 40
I then set a random variable to govern which image-phrase combo is chosen:
var pp = Math.random()*40;
pp = Math.round(pp);
I then define 1 function to write out the image name (eventually to be part
of a longer doc.write statement which will write a css "body" background
defn into the doc head:
function showImage()
{document.write (ImageSwap[pp]);
}
Then a function which will write out the desriptive phrase:
function showQuote()
{document.write (TxtQuot[pp]);
}
end of external JS file
---------------------------------
so to change the body background image on the fly, I reasoned that I'd have
to have JS write out a CSS statement, incorporating the "showImage" function
above, in the doc head. This is probably the part that is bad planning, but
it is the best I can do at this time:
<script language="javascript">
document.write('<style type="text/css">'+'<br>'+'<!--'+'<br>'+'body
{'+'background-image: url(');
showImage();
document.write(')}'+'<br>'+'-->'+'<br>'+'</style>');
</script>
i'm getting a headache! (don't laugh!
next, I incorporate the descriptive phrase in the body of the doc:
<p align="center" class="largefont">
<script language="javascript">
showQuote();
</script>
</p>
OK, I just learned 2 things. Gotta use double back-slashes for path-name
seperators in array contents. Number two: CSS is static and can't be
re-written on the fly.
I'm dumbfounded.
Can anyone offer sympathy, cookies or help?
thanks for any direction on this..
SC
I'm wading my way thru JS initiation, so please bear with me!
I am setting up a site with a welcome page where there will be a scenic
image and a short descriptive text phrase, related to the image. I want to
create an array of images and phrases so that a visitor will randomly invoke
a new image and phrase whenever they arrive. I'm drawing from a bank of
about 40 images, each with an associated phrase.
My plan was to have a seperate JS file, which defines 1 array for images and
1 array for phrases; numbered sequentially so that image # will match phrase
#.
Example:
var ImageSwap = new Array(40)
ImageSwap[0]='..\images\mountains.jpg';
ImageSwap[1]='..\images\seaside.jpg';
ImageSwap[2]='..\images\sunset.jpg';
.... etc to 40
var TxtQuot = new Array(40)
TxtPhrase[0]='Alpine meadows';
TxtPhrase[1]='Beaches in Malibu';
TxtPhrase[2]='Sunset in Maui';
... etc to 40
I then set a random variable to govern which image-phrase combo is chosen:
var pp = Math.random()*40;
pp = Math.round(pp);
I then define 1 function to write out the image name (eventually to be part
of a longer doc.write statement which will write a css "body" background
defn into the doc head:
function showImage()
{document.write (ImageSwap[pp]);
}
Then a function which will write out the desriptive phrase:
function showQuote()
{document.write (TxtQuot[pp]);
}
end of external JS file
---------------------------------
so to change the body background image on the fly, I reasoned that I'd have
to have JS write out a CSS statement, incorporating the "showImage" function
above, in the doc head. This is probably the part that is bad planning, but
it is the best I can do at this time:
<script language="javascript">
document.write('<style type="text/css">'+'<br>'+'<!--'+'<br>'+'body
{'+'background-image: url(');
showImage();
document.write(')}'+'<br>'+'-->'+'<br>'+'</style>');
</script>
i'm getting a headache! (don't laugh!
next, I incorporate the descriptive phrase in the body of the doc:
<p align="center" class="largefont">
<script language="javascript">
showQuote();
</script>
</p>
OK, I just learned 2 things. Gotta use double back-slashes for path-name
seperators in array contents. Number two: CSS is static and can't be
re-written on the fly.
I'm dumbfounded.
Can anyone offer sympathy, cookies or help?
thanks for any direction on this..
SC