PDA

View Full Version : 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:




<!--
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:


<!--
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?


<!--
function change1(){

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

}
-->





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




<!--
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:


<!--
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:



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 (http://w3schools.com/js/js_switch.asp)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:

<!--
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:

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
OH! ok... so then you start off with a slightly modified version of your first 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:

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>


<!--
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];
}
}
-->

thenajsays
09-13-2009, 09:32 PM
hmmmm... im gonna have to think about this...

thenajsays
09-13-2009, 10:06 PM
got it:

<!--
var backgroundImages=new Array();
backgroundImages[0]="http://images2.wikia.nocookie.net/lostpedia/images/d/df/Jackseason5.jpg";
backgroundImages[1]="http://images4.wikia.nocookie.net/lostpedia/images/1/15/Kateseason5.jpg";
backgroundImages[2]="http://images3.wikia.nocookie.net/lostpedia/images/4/4c/Sawyerseason5.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.backgroundImage = "url("+backgroundImages[slideNum]+")";
}
else if (slideNum >= slideCount){
slideNum = 0;
document.getElementById("shgbody").style.backgroundImage = "url("+backgroundImages[slideNum]+")";
}
}
-->
just realized i left my testing images in there! sorry!

MJH
09-14-2009, 04:06 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

/* You may have as many image sets as you need. */

var imgPath = "./images/"; // the path to your image folder;
var slideInterval = 3; // a new image every 3 seconds;
var imgSet = [];

imgSet[1] = ["st_lawrence.jpg | St. Lawrence", "norfolk_rebel.jpg | Norfolk Rebel", "pathfinder.jpg | Pathfinder",
"playfair.jpg | Playfair", "pride_of_baltimore.jpg | Pride of Baltimore", "red_witch.jpg | Red Witch",
"tecumseth.jpg | Tecumseth", "true_north.jpg | True North"];

imgSet[2] = ["st_lawrence.jpg | St. Lawrence", "norfolk_rebel.jpg | Norfolk Rebel", "pathfinder.jpg | Pathfinder",
"playfair.jpg | Playfair", "pride_of_baltimore.jpg | Pride of Baltimore", "red_witch.jpg | Red Witch",
"tecumseth.jpg | Tecumseth", "true_north.jpg | True North"];

var imgIndex = [];
var playIndex = [];
var groupIndex = [];
var intervalIndex = [];

function autoTurn(nSet,nIdx){

for (i=0; i<playIndex.length; i++)
{
if (playIndex[i] == 1 && i != nIdx)
{
return;
}
}
nSet.value == "Start" ? nSet.value = "Stop" : nSet.value = "Start";
playIndex[nIdx] == 0 ? playIndex[nIdx] = 1 : playIndex[nIdx] = 0;
for (i=1; i<playIndex.length; i++)
{
if (playIndex[i] == 1)
{
turnPage('next',groupIndex[i]);
intervalIndex[i] = setInterval("turnPage('next',"+groupIndex[i]+")", slideInterval * 1000);
}
if (playIndex[i] == 0)
{
clearInterval(intervalIndex[i]);
intervalIndex[i] = "";
}
}
}

function turnPage(direction,nIdx,nBtn){

if (nBtn && intervalIndex[nIdx] != "")
{
return;
}
var nPages = imgSet[nIdx].length - 1;
if (direction == 'next')
{
if (imgIndex[nIdx] < nPages)
{
imgIndex[nIdx]++;
}
else {
imgIndex[nIdx] = 0;
}
}
if (direction == 'prev')
{
if (imgIndex[nIdx] > 0)
{
imgIndex[nIdx]--;
}
else {
imgIndex[nIdx] = nPages;
}
}
if (direction == 'first')
{
imgIndex[nIdx] = 0;
}
if (direction == 'last')
{
imgIndex[nIdx] = nPages;
}
document.getElementById('pagingImg'+nIdx).src = imgPath + imgSet[nIdx][imgIndex[nIdx]].replace(/\|.+$/,"");
document.getElementById('caption'+nIdx).innerHTML = imgSet[nIdx][imgIndex[nIdx]].replace(/^.+\|/,"");
}

function shuffle(nSet){

for (r=0; r<nSet.length; r++)
{
var tmp1 = parseInt(Math.random()*nSet.length);
var tmp2 = parseInt(Math.random()*nSet.length);
var tmp3 = nSet[tmp1];
nSet[tmp1] = nSet[tmp2];
nSet[tmp2] = tmp3;
}
}

function init(){

for (i=1; i<imgSet.length; i++)
{
shuffle(imgSet[i]); // randomizes the images, delete or comment out if not desired;
imgIndex[i] = 0;
playIndex[i] = 0;
groupIndex[i] = i;
intervalIndex[i] = "";
document.getElementById('pagingImg'+i).src = imgPath + imgSet[i][0].replace(/\|.+$/,"");
document.getElementById('caption'+i).innerHTML = imgSet[i][0].replace(/^.+\|/,"");
}
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

body {background-color: #f5f5f5; margin-top: 50px;}
form {width: 250px; margin-right: auto; margin-left: auto; padding-left: 15px;}
.pagingBtn {background-color: #87ceeb; font-size: 10pt; font-family: arial; font-weight: bold;
padding-left: 3px; padding-right: 3px; border: 1px solid black; margin-right: 15px;}
.imgContainer {width: 150px; margin-top: 20px; margin-left: auto; margin-right: auto;}
.imgContainer img {width: 150px; height: 135px;}
.captions {background-color: #ffffe0; width: 152px; text-align: center; font-size: 10pt;
font-family: tahoma; font-weight: bold; margin-bottom: 10px; margin-top: -3px; margin-left: auto;
margin-right: auto; }

</style>
</head>
<body>
<div class="imgContainer">
<img src="null" id="pagingImg1">
</div>

<div id="caption1" class="captions"></div>

<form action="">
<!-- direction, image set number -->
<input type="button" value="<<" class="pagingBtn" onclick="turnPage('first',1,this)">
<input type="button" value="<" class="pagingBtn" onclick="turnPage('prev',1,this)">
<input type="button" value="Start" class="pagingBtn" onclick="autoTurn(this,1)">
<input type="button" value=">" class="pagingBtn" onclick="turnPage('next',1,this)">
<input type="button" value=">>" class="pagingBtn" onclick="turnPage('last',1,this)">

</form>

<div class="imgContainer">
<img src="null" id="pagingImg2">
</div>

<div id="caption2" class="captions"></div>

<form action="">
<!-- direction, image set number -->
<input type="button" value="<<" class="pagingBtn" onclick="turnPage('first',2,this)">
<input type="button" value="<" class="pagingBtn" onclick="turnPage('prev',2,this)">
<input type="button" value="Start" class="pagingBtn" onclick="autoTurn(this,2)">
<input type="button" value=">" class="pagingBtn" onclick="turnPage('next',2,this)">
<input type="button" value=">>" class="pagingBtn" onclick="turnPage('last',2,this)">

</form>

</body>
</html>