so i am making a page that uses a random image fade in/out every 5 seconds BUT no image shows at all
... here's my javascript code:- Code: Select all
var inum = 12;
imageHold = new Image();
desc = new Array
desc[0] = "Full Spread Magazine Layout. InDesign";
desc[1] = "Song Poster Project. Photoshop";
desc[2] = "Dan Pelonis Art Website 'paintings' Proof. HTML";
desc[3] = "Currents Art Competition Flyer. Photoshop";
desc[4] = "James River Architects Website Front Page. Flash";
desc[5] = "Krios Beach Camping Brochure Parokia Greece. InDesign";
desc[6] = "Mandala Lotus Logo Proof Sheet. Illustrator";
desc[7] = "Kialoa Cafe-Bar Website Concept Parokia Greece. Flash";
desc[8] = "Krios Beach Camping Poster Parokia Greece. Photoshop";
desc[9] = "Alphabet Book Project: Q. Illustrator";
desc[10] = "Alphabet Book Project: V. Illustrator";
desc[11] = "Alphabet Book Project: Y. Photoshop";
images = new Array
images[0] = "images2/1.jpg"
images[1] = "images2/2.jpg"
images[2] = "images2/3.jpg"
images[3] = "images2/4.jpg"
images[4] = "images2/5.jpg"
images[5] = "images2/6.gif"
images[6] = "images2/7.jpg"
images[7] = "images2/8.jpg"
images[8] = "images2/9.jpg"
images[9] = "images2/10.jpg"
images[10] = "images2/11.jpg"
images[11] = "images2/12.jpg"
var d=new Date();
var month=new Array(12);
month[0]="Jan";
month[1]="Feb";
month[2]="Mar";
month[3]="Apr";
month[4]="May";
month[5]="Jun";
month[6]="Jul";
month[7]="Aug";
month[8]="Sep";
month[9]="Oct";
month[10]="Nov";
month[11]="Dec";
function IMGpreload()
{
for(i=0; i<=12; i++)
{
imageHold.src=images[i];
}
}
var Alph = 0;
var speed = 10;
function fadeOut() {
var contI = doccument.images.main;
var contT = doccument.getElementById("desc");
if(Alph <= 0) {
Switch();
return;
}else{
contI.style.opacity = Alph/100;
contI.style.filter = 'alpha(opacity = ' + Alph + ')';
contT.style.opacity = Alph/100;
contT.style.filter = 'alpha(opacity = ' + Alph + ')';
Alph = Alph - speed;
setTimeOut("fadeOut()", 50);
}
}
function fadeIn() {
var contI = doccument.images.main;
var contT = doccument.getElementById("desc");
if (Alph >=100) {
setTimeOut("fadeOut()", 5000);
return;
}else{
contI.style.opacity = Alph/100;
contI.style.filter = 'alpha(opacity = ' + Alph + ')';
contT.style.opacity = Alph/100;
contT.style.filter = 'alpha(opacity = ' + Alph + ')';
Alph = Alph + speed;
setTimeOut("fadeIn()", 50);
}
}
function Switch() {
var randnum = Math.random();
var rando = Math.round(randnum * (inum-1)) + 1;
doccument.images.main.src = images[rando];
doccument.getElementById("desc").innerHTML = desc[rando];
fadeIn();
}
trying to populate
- Code: Select all
<body bgcolor="#000000" onload="IMGpreload(); Switch();">
<div id="center">
<div id="main">
<center> !!HERE!! --> <img src="images2/1.jpg" id="main" style="position:relative;"></center>
</DIV>
</div>
<div id="leftwelcome">
<div class="style1" id="main">
</div>
</div>
<div id="leftemail">
<div id="main">
<div id="desc">
!!HERE!!
</div>
</div>
</div>
the page is here http://www.goldenepic.com/test/indexnew2.html
i'm sure its a silly problem, i just didn't want to keep looking at it and none of my friends are good with javaScript. thanks all!
