Info Box

[JZSquared]

angelblood said:

It worked! Thanks a lot! ;D

No problem.

[wreakage]

Hey,

One of my sites has a picture changer thing that i want but they wont give me the code i want to know how to change the pics when you refresh the page

E.G.



Once Refreshed Changes To



Telling Me This Code will be the best coder ever!

[JZSquared]

wreakage said:

Hey,

One of my sites has a picture changer thing that i want but they wont give me the code i want to know how to change the pics when you refresh the page

E.G.



Once Refreshed Changes To



Telling Me This Code will be the best coder ever!

<script language="JavaScript">
<!--
// ==============================================
// Copyright 2003 by jsCode.com
// Source: jsCode.com
// Author: etLux
// Free for all; but please leave in the header.
// ==============================================

// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array. Rememeber
// to increment the theImages[x] index!

theImages[0] = '100.jpg'
theImages[1] = '200.jpg'
theImages[2] = '300.jpg'
theImages[3] = '400.jpg'
theImages[4] = '500.jpg'

// ======================================
// do not change anything below this line
// ======================================

var j = 0
var p = theImages.length;

var preBuffer = new Array()
for (i = 0; i < p; i++){
  preBuffer[i] = new Image()
  preBuffer[i].src = theImages[i]
}

var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

//-->
</script>

Main Header

<script language="JavaScript">
<!--
// ==============================================
// Copyright 2003 by jsCode.com
// Source: jsCode.com
// Author: etLux
// Free for all; but please leave in the header.
// ==============================================
showImage();
//-->
</script>

Inside the portion of the table you want your random images.

Code Provided By: jsCode.com

Input the image URLs where it states: "100.jpg" "200.jpg" and so on. If you want more images, simply add more to the array. Copy the line of code:

theImages[0] = '100.jpg'

Put it below the last line:

theImages[4] = '400.jpg'
theImages[5] = '500.jpg'

Add the next number in the sequence within the [brackets]. So the next number would be [5]. And put in the next image URL into the 'quotes'.

Please note that these images will be completely random. If you would like them to appear in sequential order then please take a look at the code provided below:

Random Scripts.com

I hope this helps, let us know if you need anything else.

[wreakage]

Do we stick that inside the Info Box or just as a totally new code?

[JZSquared]

wreakage said:

Do we stick that inside the Info Box or just as a totally new code?

Which part? The head part goes in the main header, the body part goes into the table, or "Info Box".

[wreakage]

Where you put the GFXes. Does it go somewhere inside the table code os just a totally new code?

EDIT: Can you just tell me the full code please?

[JZSquared]

wreakage said:

Where you put the GFXes. Does it go somewhere inside the table code os just a totally new code?

EDIT: Can you just tell me the full code please?

That is the full code, the last link I gave you. Do you mean tell you where it goes?

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--

var secs = 5;

img1 = new Image();
img1.src = "1.jpg";
img2 = new Image();
img2.src = "2.jpg";
img3 = new Image();
img3.src = "3.jpg";
img4 = new Image();
img4.src = "4.jpg";
img5 = new Image();
img5.src = "5.jpg";
img6 = new Image();
img6.src = "6.jpg";


var pics = new Array(6);
pics[0] = img1.src;
pics[1] = img2.src;
pics[2] = img3.src;
pics[3] = img4.src;
pics[4] = img5.src;
pics[5] = img6.src;

var thisPic = 0;

var placeCt = 7;

function nextPic(){

if (document.images){

thisPic++

if (thisPic == placeCt){thisPic = 0}

document.ranpic.src = pics[thisPic];

setTimeout("nextPic()",secs * 1000)
}
}
//-->
</SCRIPT>

^^ This goes into your main header. Change the "5" to either increase or decrease the time between image changes. Put in the URLs of the images in where it has "1.jpg" "2.jpg" and so on. To add more images, add another line of code to the list like this:
img6 = new Image();
img6.src = "6.jpg";
img7 = new Image();
img7.src = "7.jpg";
After that be sure to change the number "6" in the next piece of code to the total number of images you want to have. The same for decreasing the number of images you have, just in reverse.
var pics = new Array(6);


This goes into the table where you usually put the image code:
<BODY onload="nextPic()"><img src="1.jpg" border="0" name="ranpic">

And that's it, I've already tested it on my boards and it works. This code provided by Random Scripts.com

[wreakage]

Yes BUT i want the picsutures changing on the middle box of my info box. Do i put that whole code inside the middle content?

[JZSquared]

wreakage said:

Yes BUT i want the picsutures changing on the middle box of my info box. Do i put that whole code inside the middle content?

jzsquared said:

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--

var secs = 5;

img1 = new Image();
img1.src = "1.jpg";
img2 = new Image();
img2.src = "2.jpg";
img3 = new Image();
img3.src = "3.jpg";
img4 = new Image();
img4.src = "4.jpg";
img5 = new Image();
img5.src = "5.jpg";
img6 = new Image();
img6.src = "6.jpg";


var pics = new Array(6);
pics[0] = img1.src;
pics[1] = img2.src;
pics[2] = img3.src;
pics[3] = img4.src;
pics[4] = img5.src;
pics[5] = img6.src;

var thisPic = 0;

var placeCt = 7;

function nextPic(){

if (document.images){

thisPic++

if (thisPic == placeCt){thisPic = 0}

document.ranpic.src = pics[thisPic];

setTimeout("nextPic()",secs * 1000)
}
}
//-->
</SCRIPT>

^^ This goes into your main header.

jzsquared said:

This goes into the table where you usually put the image code:
<BODY onload="nextPic()"><img src="1.jpg" border="0" name="ranpic">

[potathetoe]

I have a question. My info box works great, i used the one provided here. Although the words and letters in it are smaller than i want them to be. How would I make the words inside the information box bigger?

[wreakage]

jzsquared said:

This goes into the table where you usually put the image code:
<BODY onload="nextPic()"><img src="1.jpg" border="0" name="ranpic">

Where do i normally put the image code?

EDIT: Can you just join my fed ill make you a header and footer guy, you do the code then you can delete yourself.

heres the website

fullpw.proboards61.com/

Here's the images i want

i112.photobucket.com/albums/n180/sickboy1994/mrbloodopens.png
i112.photobucket.com/albums/n180/sickboy1994/bloodannouncespartner.png
i112.photobucket.com/albums/n180/sickboy1994/hunterjoins.png

please do them in order. Just add my MSN so we can talk

[e-mail]

[JZSquared]

potathetoe said:

I have a question. My info box works great, i used the one provided here. Although the words and letters in it are smaller than i want them to be. How would I make the words inside the information box bigger?

<table align="center" border="0" width="92%" cellspacing="0" cellpadding="0" class="bordercolor">
<tr>
<td>
<table cellpadding="4" cellspacing="1" border="0" width="100%">
<tr>
<td class="titlebg" align="center" colspan="3">
<font color="000000" size="2">
<b>Title</b>
</font>
</td>
</tr>
<tr>
<td width="20%" valign="top" class="windowbg">
<font size="2">
content of left box
</td>
<td width="60%" class="windowbg2" valign="top">
content of main center box
</td>
<td width="20%" valign="top" class="windowbg">
content of right box
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>

Use this updated code, and change the numbers in red. Increase the amount to enlarge, and decrease the amount to shrink the text.

wreakage said:

jzsquared said:

This goes into the table where you usually put the image code:
<BODY onload="nextPic()"><img src="1.jpg" border="0" name="ranpic">

Where do i normally put the image code?

EDIT: Can you just join my fed ill make you a header and footer guy, you do the code then you can delete yourself.

heres the website

fullpw.proboards61.com/

Here's the images i want

i112.photobucket.com/albums/n180/sickboy1994/mrbloodopens.png
i112.photobucket.com/albums/n180/sickboy1994/bloodannouncespartner.png
i112.photobucket.com/albums/n180/sickboy1994/hunterjoins.png

please do them in order. Just add my MSN so we can talk

[e-mail]

How much HTML do you know? Do you know about tags? The middle content box needs to have the smaller code. Right where it says: "content of main center box" have that code and nothing else. Put the code below into your main header, doesn't matter where, as long as it's before your info box code:

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--

var secs = 5;

img1 = new Image();
img1.src = "http://i112.photobucket.com/albums/n180/sickboy1994/mrbloodopens.png";
img2 = new Image();
img2.src = "http://i112.photobucket.com/albums/n180/sickboy1994/bloodannouncespartner.png";
img3 = new Image();
img3.src = "http://i112.photobucket.com/albums/n180/sickboy1994/hunterjoins.png";


var pics = new Array(3);
pics[0] = img1.src;
pics[1] = img2.src;
pics[2] = img3.src;

var thisPic = 0;

var placeCt = 3;

function nextPic(){

if (document.images){

thisPic++

if (thisPic == placeCt){thisPic = 0}

document.ranpic.src = pics[thisPic];

setTimeout("nextPic()",secs * 1000)
}
}
//-->
</SCRIPT>

I can't make it any simpler than that. And I don't join forums to code for them, I'll help you out, but it's better if you do this on your own. I'm a volunteer, this is not my job, I do not get paid to do this. Also I use MSN for friends, not to be bombarded with questions and requests for support. Now, it's a good idea before even thinking about designing your own boards, or at least designing them to the extent that Proboards allows, to have a good knowledge of HTML and even some Java. I suggest that everyone new to coding boards have this knowledge to better understand how to implement and change codes when needed. Plus it's just always good to know. There's a site I'll link to below for all those interested in learning more:

W3 Schools

Hope that helps, I can't make it any simpler than that. Good luck.

[wreakage]

RIGHT ITS NOT WORKING!!! THIS IS WHAT I PUT IN MY MAIN HEADERS!

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--

var secs = 5;

img1 = new Image();
img1.src = "http://i112.photobucket.com/albums/n180/sickboy1994/mrbloodopens.png";
img2 = new Image();
img2.src = "http://i112.photobucket.com/albums/n180/sickboy1994/bloodannouncespartner.png";
img3 = new Image();
img3.src = "http://i112.photobucket.com/albums/n180/sickboy1994/hunterjoins.png";


var pics = new Array(3);
pics[0] = img1.src;
pics[1] = img2.src;
pics[2] = img3.src;

var thisPic = 0;

var placeCt = 3;

function nextPic(){

if (document.images){

thisPic++

if (thisPic == placeCt){thisPic = 0}

document.ranpic.src = pics[thisPic];

setTimeout("nextPic()",secs * 1000)
}
}
//-->
</SCRIPT>
<table align="center" border="0" width="92%" cellspacing="0" cellpadding="0" class="bordercolor">
<tr>
<td>
<table cellpadding="4" cellspacing="1" border="0" width="100%">
<tr>
<td class="titlebg" align="center" colspan="3">
<font color="000000" size="2">
<b>Title</b>
</font>
</td>
</tr>
<tr>
<td width="20%" valign="top" class="windowbg">
FPW CONTENDERS
<b>World Heavyweight Championship</b><br><br>
Vacant<br><br>
<B>International Championship<br><Br></B>
Vacant<br><br>
<B>TV Championship<br></B><BR>
Vacant<br><br>
<B>Tag Team Championship<br><BR></B>
</td>
<td width="60%" class="windowbg2" valign="top">
</td>
<td width="20%" valign="top" class="windowbg">
FPW CHAMPIONS
<b>World Heavyweight Championship</b><br><br>
Vacant<br><br>
<B>International Championship<br><Br></B>
Vacant<br><br>
<B>TV Championship<br></B><BR>
Vacant<br><br>
<B>Tag Team Championship<br><BR></B>
</td>
</tr>
</table>
</td>
</tr>
</table>

And its comes out like this



NOTHING SHOWS!!

[potathetoe]

thank you!

[JZSquared]

wreakage said:

RIGHT ITS NOT WORKING!!! THIS IS WHAT I PUT IN MY MAIN HEADERS!

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--

var secs = 5;

img1 = new Image();
img1.src = "http://i112.photobucket.com/albums/n180/sickboy1994/mrbloodopens.png";
img2 = new Image();
img2.src = "http://i112.photobucket.com/albums/n180/sickboy1994/bloodannouncespartner.png";
img3 = new Image();
img3.src = "http://i112.photobucket.com/albums/n180/sickboy1994/hunterjoins.png";


var pics = new Array(3);
pics[0] = img1.src;
pics[1] = img2.src;
pics[2] = img3.src;

var thisPic = 0;

var placeCt = 3;

function nextPic(){

if (document.images){

thisPic++

if (thisPic == placeCt){thisPic = 0}

document.ranpic.src = pics[thisPic];

setTimeout("nextPic()",secs * 1000)
}
}
//-->
</SCRIPT>
<table align="center" border="0" width="92%" cellspacing="0" cellpadding="0" class="bordercolor">
<tr>
<td>
<table cellpadding="4" cellspacing="1" border="0" width="100%">
<tr>
<td class="titlebg" align="center" colspan="3">
<font color="000000" size="2">
<b>Title</b>
</font>
</td>
</tr>
<tr>
<td width="20%" valign="top" class="windowbg">
FPW CONTENDERS
<b>World Heavyweight Championship</b><br><br>
Vacant<br><br>
<B>International Championship<br><Br></B>
Vacant<br><br>
<B>TV Championship<br></B><BR>
Vacant<br><br>
<B>Tag Team Championship<br><BR></B>
</td>
<td width="60%" class="windowbg2" valign="top">
</td>
<td width="20%" valign="top" class="windowbg">
FPW CHAMPIONS
<b>World Heavyweight Championship</b><br><br>
Vacant<br><br>
<B>International Championship<br><Br></B>
Vacant<br><br>
<B>TV Championship<br></B><BR>
Vacant<br><br>
<B>Tag Team Championship<br><BR></B>
</td>
</tr>
</table>
</td>
</tr>
</table>

And its comes out like this



NOTHING SHOWS!!

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--

var secs = 5;

img1 = new Image();
img1.src = "http://i112.photobucket.com/albums/n180/sickboy1994/mrbloodopens.png";
img2 = new Image();
img2.src = "http://i112.photobucket.com/albums/n180/sickboy1994/bloodannouncespartner.png";
img3 = new Image();
img3.src = "http://i112.photobucket.com/albums/n180/sickboy1994/hunterjoins.png";


var pics = new Array(3);
pics[0] = img1.src;
pics[1] = img2.src;
pics[2] = img3.src;

var thisPic = 0;

var placeCt = 3;

function nextPic(){

if (document.images){

thisPic++

if (thisPic == placeCt){thisPic = 0}

document.ranpic.src = pics[thisPic];

setTimeout("nextPic()",secs * 1000)
}
}
//-->
</SCRIPT>
<table align="center" border="0" width="92%" cellspacing="0" cellpadding="0" class="bordercolor">
<tr>
<td>
<table cellpadding="4" cellspacing="1" border="0" width="100%">
<tr>
<td class="titlebg" align="center" colspan="3">
<font color="000000" size="2">
<b>Title</b>
</font>
</td>
</tr>
<tr>
<td width="20%" valign="top" class="windowbg">
FPW CONTENDERS
<b>World Heavyweight Championship</b><br><br>
Vacant<br><br>
<B>International Championship<br><Br></B>
Vacant<br><br>
<B>TV Championship<br></B><BR>
Vacant<br><br>
<B>Tag Team Championship<br><BR></B>
</td>
<td width="60%" class="windowbg2" valign="top">
<center>
<BODY onload="nextPic()"><img src="1.jpg" border="0" name="ranpic">
</center>
</td>
<td width="20%" valign="top" class="windowbg">
FPW CHAMPIONS
<b>World Heavyweight Championship</b><br><br>
Vacant<br><br>
<B>International Championship<br><Br></B>
Vacant<br><br>
<B>TV Championship<br></B><BR>
Vacant<br><br>
<B>Tag Team Championship<br><BR></B>
</td>
</tr>
</table>
</td>
</tr>
</table>

Use that code, and I would appreciate if you didn't scream at me. All capitals is screaming. I'm helping you, and I don't have to. I gave you extremely simple instructions that you did not follow. Did you even read what I wrote? I will not be doing this again for you. I will not hold your hand and do the work for you. Learn how to code before using codes, it's as simple as that. You did not even place the second code in the middle content box like I had told you several times before, you simply left it blank, so of course it's going to be blank. And don't even come back and say that it doesn't work again because I've already tested it. I don't know about you, but I would feel pretty embarrassed if I couldn't follow simple instructions.

potathetoe said:

thank you!

You're welcome, let us know if there's anything else we can help you with.