T
here are five images that will be chosen at random and displayed each time by the script*. Remember this is a random choice, so it's possible for the same image to appear a number of times in succession. The more images you use, the less possibility of repetition there is.
W
e have tested the code in IE5.5, IE6.0, Firefox0.8, Opera7.23 and Netscape7.02. This script worked well in all platforms
with no variations observed.
* Each time the page opens (loads) a different image will appear.
D
epending on your knowledge of HTML and java scripts, this is an easy, three part copy and paste.
-
Part one is to upload your images into your editor so they can be seen.
Part two will get pasted into the <HEAD> section of your document. This part is where you configure the path to your images to be called.
Part three will get pasted anywhere into the <BODY> section you want this effect to appear.
Head Section Configurations
// 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] = 'Full Path To Uploaded Image'
theImages[1] = 'Full Path To Uploaded Image'
theImages[2] = 'Full Path To Uploaded Image'
theImages[3] = 'Full Path To Uploaded Image'
theImages[4] = 'Full Path To Uploaded Image'
// ======================================
// do not change anything below this line
// ======================================
T
o add more than the default number [5] of images, just follow the above numerical format. In other words the next image added would look something like the below.
theImages[0] = 'Full Path To Uploaded Image'
theImages[1] = 'Full Path To Uploaded Image'
theImages[2] = 'Full Path To Uploaded Image'
theImages[3] = 'Full Path To Uploaded Image'
theImages[4] = 'Full Path To Uploaded Image'
theImages[5] = 'Full Path To Uploaded Image'
// ======================================
// do not change anything below this line
// ======================================
N
otice in the above section of code the use of the single quote ( ' ) or apostrophe. If by chance you remove one or maore and replace them with the double quote ( " ), it will not matter. The code will work with either of the two characters.
T
he last part of the code will be pasted anywhere in the <BODY> section of your document you want this effect to appear. If you take notice, we have a "Border" around the random images. This is not part of the code. We added this to cosmetically inhance the effect. To add the surrounding border <table>, see
below.
<!-------- Start Top Of Table Code --------->
<p><table bgcolor="#ba55dc" border="1" height="200" width="200"
cellpadding="4" cellspacing="3">
<tr>
<td bgcolor="#ffffff" align="center" colspan="3">
<!-------- End Top Of Table Code --------->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: jsCode.com -->
<!-- Web Site: http://jscode.com -->
<script language="JavaScript">
<!--
showImage();
//-->
</script>
<!-------- Start Bottom Of Table Code --------->
</tr></td></table></p>
<!-------- End Bottom Of Table Code --------->
L
ets define all the attributes associated
with the above <table>. that you need to be aware of.
- table bgcolor="#ba55dc" This denotes the border
color to define the border.
- border="1" This denotes
how wide or thick the border will be. The higher the number, the wider the border.
Zero [0] denote no border.
height="200" width="200" This defines the height and width of the table. The reason we defined the table in this manner is for the size of the images going inside. All our images are 200 X 200. Rule of thumb to follow if possible. Make all your images the same size for a more professional appearance.
td bgcolor="#ffffff"
This color defines what color will be inside the border (table).
- align="center" This denotes the position of anything inside the table. In this case it will be the images aligned in the center.
Note! This does not align the table on the page. you do this with <div align> tags.
O
ther than the table we placed around the effect, there are no reconfigurations in this section of code.
I
f you would like to add this effect into your pages, grab the below link and you are there. If you have any problems with this, feel free to contact us.
[
Get Code Here ]
