Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

adding image switcher function to bg images 1

Status
Not open for further replies.

sophielois

Technical User
Sep 8, 2005
66
GB
Hi guys,

Could someone give me some advice how to use the following script so that it will randomly change a background image.

this is the script im using that randomly changes the image being displayed when the page ios loaded.

Code:
<SCRIPT LANGUAGE="VBScript">
<!--
Sub Window_OnLoad
   Dim arrPic, intPic
   Randomize
   intPic = Fix(Rnd * 5)
   arrPic = Array("img1", "img2", "img3", "img4", "img5")
   Show.src = "newimages/" & arrPic(intPic) & ".jpg"
End Sub
-->
</SCRIPT>

In the body of the page i do this

Code:
<IMG NAME="Show" border=0 alt="show this one">

Is it possible to apply it to the background image of a table, something like this:

Code:
<table width="718" height="282" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#6699FF" background="Show">

This does not work, but im sure it is possible but i really dont know how to do it.

I've still very much got my L-plates on when it comes to javascript.

really appreaciate any help offered.

Thanks

Soph
 
A few things:

1. Your code you have posted is VBScript (which only works in IE), are you sure this is the forum you wanted to post your question?

2. I would use css classes to keep track of the background images for the table.

3. Use a javascript function to change the classes for the table (thus changing the background image)

Here's an example (you can change the names of the jpg files to see the example on your pc)
Code:
<html>
<head>
<style type="text/css">

.tableBack1 {
   background:url(p1.jpg);
}

.tableBack2 {
   background:url(p2.jpg);
}

</style>

<script type="text/javascript">

function changeBack(str) {
   document.getElementById("myTable").className = str
}

</script>
</head>

<body>
<table id="myTable">
   <tr>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
   </tr>
   <tr>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
   </tr>
   <tr>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
   </tr>
   <tr>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
   </tr>
</table>
<input type="button" value="background 1" onclick="changeBack('tableBack1')" />
<input type="button" value="background 2" onclick="changeBack('tableBack2')" />
</body>
</html>

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Hi Kaht, thanks for the advice and the code.

Unfortunatley i need something that doesn't use buttons to display the bg images, I need somethings that randomaly chooses a different image to display every time the page loads.

Thanks

Soph

 
the buttons were just there to show how you can test the function to see that it works....

you can just as easily call the function with the onload handler of the body tag - all you have to do is just program it to pick a random className from what you define. That's easily done with Math.random - a quick google search on it should give you all the info you need

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
ok looked into math.random

So the math:random function returns a random number from 0 to 1.

I'm still unclear how i would
Code:
call the function with the onload handler of the body tag

and then

Code:
program it to pick a random className from what you define

really appreciate any help

Soph
 
First off, don't confuse math.random with [!]M[/!]ath.random - javascript is case sensitive and math.random won't work.

Second, here's an example to demonstrate exactly what you're asking for. I'd suggest doing a little bit of research on javascript and html if you'll be working with it a lot. The onload handler is a pretty common tool used in javascript, so there's probably a few important things you're missing out on. is a pretty nice site for learning javascript syntax, and google is always a good option. Anyway, the example:
Code:
<html>
<head>
<style type="text/css">

.tableBack1 {
   background:url(p1.jpg);
}

.tableBack2 {
   background:url(p2.jpg);
}

</style>

<script type="text/javascript">

function changeBack() {
   [i][COLOR=grey]//this generates an [b]integer[/b] between 0 and 1[/color][/i]
   [!]var rnd = Math.round(Math.random());[/!]
   if (rnd == 0) {
      [i][COLOR=grey]//if rnd is 0 set the table background to p1.jpg[/color][/i]
      document.getElementById("myTable").className = "tableBack1";
   }
   if (rnd == 1) {
      [i][COLOR=grey]//if rnd is 1 set the table background to p2.jpg[/color][/i]
      document.getElementById("myTable").className = "tableBack2";
   }
}

</script>
</head>

<body [!]onload="changeBack()"[/!]>
<table id="myTable">
   <tr>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
   </tr>
   <tr>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
   </tr>
   <tr>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
   </tr>
   <tr>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
   </tr>
</table>
</body>
</html>

If you have more than 2 backgrounds for your table that you want to generate then you will have to expand the number range that Math.random generates. That is covered fairly well by this link:


-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Thanks Kaht, thats really helpful.

From what i can tell the following should work, but unfortunately it doesn't.

Can you help

Code:
<html>
<head>
<style type="text/css">

.tableBack1 {
   background:url(newimages/newfront/img1.jpg);
}

.tableBack2 {
   background:url(newimages/newfront/img2.jpg);
}
.tableBack3 {
   background:url(newimages/newfront/img3.jpg);
}

.tableBack4 {
   background:url(newimages/newfront/img4.jpg);
}
.tableBack5 {
   background:url(newimages/newfront/img4.jpg);
}

</style>

<script type="text/javascript">

function changeBack() {

   var rnd = Math.round(Math.random()*5);
   if (rnd == 0) {
      //if rnd is 0 set the table background to img1.jpg
      document.getElementById("myTable").className = "tableBack1";
   }
   if (rnd == 1) {
      document.getElementById("myTable").className = "tableBack2";
   }
      if (rnd == 2) {
      document.getElementById("myTable").className = "tableBack3";
   }
      if (rnd == 3) {
      document.getElementById("myTable").className = "tableBack4";
   }
      }
      if (rnd == 4) {
      document.getElementById("myTable").className = "tableBack5";
   }
}

</script>
</head>

<body onload="changeBack()">
<table id="myTable">
   <tr>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
   </tr>
   <tr>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
   </tr>
   <tr>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
   </tr>
   <tr>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
      <td>test table</td>
   </tr>
</table>
</body>
</html>

Thanks for all the help

Soph
 
Looks like you have an extra tag in there:
Code:
   }
      if (rnd == 3) {
      document.getElementById("myTable").className = "tableBack4";
   }
      [attn]}[/attn]
      if (rnd == 4) {
      document.getElementById("myTable").className = "tableBack5";
   }


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top