JavaScript - Why Same Image Menu Has Different Transitions In Different Sites Using Firefox

I've added a Vertical Sliding Menu to my website that only seems to work in Internet Explorer. I have no idea what to do to get it to work in other browsers. If I could at least get it work in Firefox that would be great, but as I said, I'm a bit lost on how to do that. If anyone could help me I would gladly send them a box of chocolates.

The menu is made up of images that are partially recessed into the left of the page, except for a small section which remains visible. When that section is clicked the image slides all the way into view revealing more options. The links are all done with image maps, if that helps.

Here is the entire Javascript code that goes into the head tag:
Code:

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -


var Abouttop=124
var Newstop=195
var Profilestop=258
var Issuestop=351
var Extrastop=423
var Linkstop=499
var Forumtop=571
var menuleft=-118

var pace=14

var step
var direction
var pause=25

var thismenu
var vorzeichen=1
var vorzeiAbout=-1
var vorzeiNews=-1
var vorzeiProfiles=-1
var vorzeiIssues=-1
var vorzeiExtras=-1
var vorzeiLinks=-1
var vorzeiForum=-1

var menuismoving="no"

function gotourl(thisurl) {
    alert("\n\nThis is onlay a demonstration.\nYou will not be linked to "+thisurl+".html.")
}

function inite() {
	if (document.layers) {
        document.About.left=menuleft
        document.News.left=menuleft
        document.Profiles.left=menuleft 
        document.Issues.left=menuleft
        document.Extras.left=menuleft
        document.Links.left=menuleft
        document.Forum.left=menuleft
        document.About.top=Abouttop
        document.News.top=Newstop
        document.Profiles.top=Profilestop
        document.Issues.top=Issuestop
        document.Extras.top=Extrastop
        document.Links.top=Linkstop
        document.Forum.top=Forumtop
	}	
	if (document.all) {
        document.all.About.style.posLeft=menuleft
        document.all.News.style.posLeft=menuleft
        document.all.Profiles.style.posLeft=menuleft
        document.all.Issues.style.posLeft=menuleft
        document.all.Extras.style.posLeft=menuleft
        document.all.Links.style.posLeft=menuleft
        document.all.Forum.style.posLeft=menuleft
        document.all.About.style.posTop=Abouttop
        document.all.News.style.posTop=Newstop
        document.all.Profiles.style.posTop=Profilestop
        document.all.Issues.style.posTop=Issuestop
        document.all.Extras.style.posTop=Extrastop
        document.all.Links.style.posTop=Linkstop
        document.all.Forum.style.posTop=Forumtop
	}
}

function getmenuname(clickedmenu) {
    if (menuismoving=="no") {
	    if (document.layers) {
            thismenu=eval("document."+clickedmenu)
	    }	
	    if (document.all) {
            thismenu=eval("document.all."+clickedmenu+".style")
	    }
        step=pace
        checkdirection()
	    movemenu()
    }
}

function checkdirection() {
	if (document.layers) {    
        if (thismenu==document.About){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout}
        if (thismenu==document.News){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews}
        if (thismenu==document.Profiles){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles}
        if (thismenu==document.Issues){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues}
        if (thismenu==document.Extras){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras}
        if (thismenu==document.Links){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks}
        if (thismenu==document.Forum){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum}     
	}	
	if (document.all) {
        if (thismenu==document.all.About.style){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout}
        if (thismenu==document.all.News.style){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews}
        if (thismenu==document.all.Profiles.style){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles}
        if (thismenu==document.all.Issues.style){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues}
        if (thismenu==document.all.Extras.style){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras}
        if (thismenu==document.all.Links.style){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks}
        if (thismenu==document.all.Forum.style){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum}   
	}
    menuismoving="yes"
}

function movemenu() {
	if (document.layers) {
        if (step>=0) {
            thismenu.left+=step*vorzeichen
            step--
            var movetimer=setTimeout("movemenu()",pause)  
	    }
        else {
            menuismoving="no"
            clearTimeout(movetimer)
        }
	}	   
	if (document.all) {
        if (step>=0) {
            thismenu.posLeft+=step*vorzeichen
            step--
            var movetimer=setTimeout("movemenu()",pause)  
	    }
        else {
            menuismoving="no"
            clearTimeout(movetimer)
        }
    }
}
// - End of JavaScript - -->
</SCRIPT>

Code:

This is the CSS code that also goes into the head tag:

<style type="text/css">
	#About {position:absolute;left:-1000px;}
    #News {position:absolute;left:-1000px;}
    #Profiles {position:absolute;left:-1000px;}
    #Issues {position:absolute;left:-1000px;}
    #Extras {position:absolute;left:-1000px;}
    #Links {position:absolute;left:-1000px;}
    #Forum {position:absolute;left:-1000px;}
	.baseline {
		position:absolute;
		left:250px;
		top:100px;
    	font-family:Arial;
    	font-size:9pt;
		color:000000;
	}
</STYLE>

And I'm not sure if this is needed or not, but just in case, here is everything between the body tags
Code:

<body onLoad="inite()" topmargin="0" leftmargin="0"> 

<DIV ID="About">
<IMG SRC="images/main/menu_tab_about2.gif" USEMAP="#Aboutdec99.gif" WIDTH=150 HEIGHT=71 BORDER=0>
<MAP NAME="Aboutdec99.gif">
<AREA SHAPE=RECT COORDS="128,3,143,67" HREF="javascript:getmenuname('About')">
<AREA SHAPE=RECT COORDS="30,4,113,20" HREF="about_nw.asp">
<AREA SHAPE=RECT COORDS="88,21,113,34" HREF="siteinfo.asp">
<AREA SHAPE=RECT COORDS="35,35,113,51" HREF="contributions.asp">
<AREA SHAPE=RECT COORDS="65,52,113,66" HREF="contact.asp">
</MAP></DIV>

<DIV ID="News"><IMG SRC="images/main/menu_tab_news2.gif" USEMAP="#Newsdec99.gif" WIDTH=150 HEIGHT=63 BORDER=0>
<MAP NAME="Newsdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,58" HREF="javascript:getmenuname('News')">
<AREA SHAPE=RECT COORDS="30,14,113,31" HREF="news.asp">
<AREA SHAPE=RECT COORDS="30,33,113,48" HREF="news_archive.asp">
</MAP></DIV>

<DIV ID="Profiles"><IMG SRC="images/main/menu_tab_profiles2.gif" USEMAP="#Profilesdec99.gif" WIDTH=150 HEIGHT=93 BORDER=0>
<MAP NAME="Profilesdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,89" HREF="javascript:getmenuname('Profiles')">
<AREA SHAPE=RECT COORDS="26,11,113,26" HREF="char_current.asp">
<AREA SHAPE=RECT COORDS="66,30,113,46" HREF="char_inactive.asp">
<AREA SHAPE=RECT COORDS="65,48,113,66" HREF="char_villains.asp">
<AREA SHAPE=RECT COORDS="90,68,113,82" HREF="char_all.asp">
</MAP></DIV>

<DIV ID="Issues"><IMG SRC="images/main/menu_tab_issues2.gif" USEMAP="#Issuesdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0>
<MAP NAME="Issuesdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,67" HREF="javascript:getmenuname('Issues')">
<AREA SHAPE=RECT COORDS="53,9,113,25" HREF="issues_uc.asp">
<AREA SHAPE=RECT COORDS="30,28,113,43" HREF="issues.asp">
<AREA SHAPE=RECT COORDS="52,48,113,63" HREF="issues_past.asp">
</MAP></DIV>

<DIV ID="Extras"><IMG SRC="images/main/menu_tab_extra2.gif" USEMAP="#Extrasdec99.gif" WIDTH=150 HEIGHT=76 BORDER=0>
<MAP NAME="Extrasdec99.gif">
<AREA SHAPE=RECT COORDS="128,6,143,71" HREF="javascript:getmenuname('Extras')">
<AREA SHAPE=RECT COORDS="47,10,113,27" HREF="wallpapers.asp">
<AREA SHAPE=RECT COORDS="65,29,113,45" HREF="avatars.asp">
<AREA SHAPE=RECT COORDS="36,48,113,64" HREF="merch.asp">
</MAP></DIV>

<DIV ID="Links"><IMG SRC="images/main/menu_tab_links2.gif" USEMAP="#Linksdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0>
<MAP NAME="Linksdec99.gif">
<AREA SHAPE=RECT COORDS="128,10,143,64" HREF="javascript:getmenuname('Links')">
<AREA SHAPE=RECT COORDS="13,5,113,19" HREF="http://www.newwarriors.com">
<AREA SHAPE=RECT COORDS="74,21,113,34" HREF="http://newwarriors.wordpress.com" alt="New Warriors Continuity Conundrum">
<AREA SHAPE=RECT COORDS="32,37,113,51" HREF="http://infinitytitans.anycities.com/warriorsmix.html">
<AREA SHAPE=RECT COORDS="19,53,113,67" HREF="http://www.novaprimepage.com">
</MAP></DIV>

<DIV ID="Forum"><IMG SRC="images/main/menu_tab_forum2.gif" usemap="#menu_tab_test.jpg" width="150" height="69" border=0>
<map name="menu_tab_test.jpg"> 
<AREA shape=rect COORDS="128,5,143,66" HREF="http://www.newwarriors.net/forum">
</map></DIV>
</body>

And in case anyone wants to see what I'm talking about, here is the link to the page so that you can see the menu bar and how it functions. Make sure you are viewing it in IE though. lol.
http://www.newwarriors.net

I hope that's all of the information that is needed. I just don't have a clue what to do. I really like the menu and want to keep it. Thanks so much!

Hello, Firefox issue with Javascript or CSS here.

My sorority website was written several years ago (therefore I'm not thoroughly familiar with the foundations), and upon building a new page, I'd like to add it to the menu in my php header. So I did, however the formatting looks terrible in Firefox! The menu seems like it's not "wide" enough. Here's what it looks like:

(called in by http://skmit.com/header.incnew.php )


I added the officers link right between the social and nationals pages. Here's what it looked like befo

(called in by http://skmit.com/header.inc.php )


and here's what it SHOULD look like:

this screenshot was taken in safari, where it works beautifully!


I've searched through the CSS ( http://www.skmit.com/c/master.css ) and found no clues as to why this is going wrong, so I feel like it may be the javascript...however, my Javascript experience is limited and I don't know what I'm looking for or if even relates to the header! Here's the javascript that the header calls in:

http://skmit.com/c/nav.js
http://skmit.com/c/prototype.js

I'm not really sure what the issue is. I'm using Firefox 3.5 on Mac OS X. Safari shows it fine, I'm running it on browsershots.org right now to see which browsers have issues.

If you could offer me any advice, I'd be very grateful! Thanks so much!

Hi All,

I'm sure I'm not the only one who has had this problem... In internet explorer I have no problems. I literally just taught myself flash so I am hoping there is an easy fix that I am not finding. I did not design or create the template for the original site, I am just upgrading and adding features to improve what was already there. I am trying to fix this as soon as possible so any help anyone could offer would be greatly appreciated!!

Here is the code for the flash banner:
Code:

    <td><div style="height:230px"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1090" height="230">
       <param name="movie" value="images/home/homeheader1.swf" />
       <param name="quality" value="high" />
       <embed src="images/home/homeheader1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1090" height="230"></embed>
     </object></div></td>
   </tr>

Here is the code for the nav bar:

Code:

<script type="text/javascript" src="/HerndonRecognition/navigation/navigation_m1_scr.js"></script>

<table id="m1mainSXMenu2" cellspacing="1" cellpadding="10"  style=";width:790px">
<tr style="text-align:center">
<td onmouseover="chgBg(m1,'m1tlm0',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm0',0,1)" id="m1tlm0" onmousedown="f58('m1tlm0a')" class="m1mit" ><a id="m1tlm0a" onmouseover="window.status='Home page';return true" onmouseout="window.status='';return true" class="m1CL0" href="home.php" target="_parent">Home</a></td>
<td onmouseover="chgBg(m1,'m1tlm1',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm1',0,1)" id="m1tlm1" onmousedown="f58('m1tlm1a')" class="m1mit" ><a id="m1tlm1a" onmouseover="window.status='About Us';return true" onmouseout="window.status='';return true" class="m1CL0" href="aboutus.php" target="_parent">About Us</a></td>
<td onmouseover="chgBg(m1,'m1tlm2',3);exM(m1,'m1mn1','m1tlm2',event)" onmouseout="chgBg(m1,'m1tlm2',0);coM(m1,'m1mn1')" id="m1tlm2" class="m1mit" ><a id="m1tlm2a" class="m1CL0" href="javascript:void(0);" >Programs</a></td>
<td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm3',0,1)" id="m1tlm3" onmousedown="f58('m1tlm3a')" class="m1mit" ><a id="m1tlm3a" onmouseover="window.status='Getting Started';return true" onmouseout="window.status='';return true" class="m1CL0" href="contactus.php" target="_parent">Getting Started</a></td>

</tr>
</table>

In your opinion, How the google puts its ads on the other sites? Do you think the google creates a new 'iframe' tag and puts Ads on it ? Or the google uses another ways to puts ads on sites?
Please help me.
With Regards.Mojtaba

I'm making 2 sites and need a visitor who lands on the home page of either site to first be shown a page that shows a company introduction and 2 links at the bottom so they can choose which division of the site (which website) they want to go to.

Does anyone know of any pre-made java or other code that would allow for this? So that a visitor doesn't get stuck in a cycle of being taken from one home page to the other and having the pop-up every time, I'm thinking it will likely need to write a cookie saying they've seen the pop up, then it won't appear again.
Each site would then have to check for a cookie from either site.

Does anyone have any ideas on how to make this work? I'm open to anything and have to have it done by friday

Please, I need a code that is capable of preventing SEOQuake from loading on my websites, even if a user has installed the plug-in.

For example, Google, Yahoo and Bing implements such feature. I just don't want it to load whenever anybody visits my sites.

Here is my issue: I am opening a popup from the main browser window, where the use logs in to a 3rd party site. After logging in, the popup window is being redirected to our site, where I have to send back a message to the original window.

I am using window.opener for sending the message. Everything works fine in IE*/Firefox/etc, but if the 3rd party site is added to the trusted sites in IE, the window.opener won't work anymore.

Why does this happen? How could this be resolved?

Thanks in advance,
norbip

Visitors enter information in textarea's and form fields and I wish to allow them to have this spell checked before submitting.

What methods are open to me to do this.

I was wondering if there are any sites dedicated to ending javascript objects using the prototype property to give them features like trimming string, removing elements of arrays by name, removing duplicates in arrays, etc. Granted I have functions to do this but there's probably a ton of other good ones out there. Most things I've seen are frameworks like JQuery (which is awesome) but it doesn't extend these objects.

We are building an opera extension in which we are trying to use the document object property (document.body.innerHTML) in order to obtain the source of the main page of a site. In most cases it provides us with the correct page source but for certain sites (ones that have multiple document layers), it doesn't return the top most document.

For instance, for the site (https://www.pcisecuritystandards.org/) we would like to source for the main page that is displayed but
once the entire page is loaded, the document property would display the source for another layer (https://s7.addthis.com/static/r07/sh...rev=86981&xd=1)

This perhaps has to do with how opera loads the document layers in a page. We did not face any issue with any other browser

How can we obtain the source of the main page (https://www.pcisecuritystandards.org/) using the document object in Opera ?

Hi CF,

I'm a graphic/designer and occasional Actionscript developer making what's turning out to be a rather clumsy transition into Javascript. Be gentle.

I'm trying to create a script that will load an external image and test whether it's in my document's "tall" or "wide" formats before placing it in the page.

This is easy in IE just using imageObject.width, but Firefox seems to always return a value of 0, no matter what I do (this includes using imageObject.naturalWidth).

Refreshing the page suddenly causes the wide mode to activate, but any time before the image is actually placed in the document, FF just won't read the width.

I've tried maybe a dozen different scripts, but here's my most recent:
Code:

function testImage(){
	if (defaultImage.naturalWidth > 320){
		wideMode = true;
	} 
	placeImage();
}

function loadFirstImage(){
	defaultImage.src = "images/myGIF.gif";
	defaultImage.onLoad = testImage();
}

Any ideas on how to accurately get an image object's width after loading, but before placing it on the page?

Any help is much appreciated.

Thanks,
~gyz

Hello all!

I am fairly experienced in HTML but javascript I am useless with.

My website can be found here;
http://mgwalker.site90.com/index.html

If you would be as kind as to load it in Chrome and in firefox, in firefox the changing image pops up on the top right of the screen.

In Chrome it is centered in the div, as it should be...

Please help I have no idea why this would happen!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#imgSlides {
    display: none;
    width: 500px;
    height: 500px;
	}
</style>
<script type="text/javascript">
		
var img = [];
	img[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png", 
			  cap: "", 
			  url: "", 
			  des: ""
			  };
	img[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png", 
			  cap: "", 
			  url: "", 
			  des: ""
			  };
	img[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg", 
			  cap: "", 
			  url: "", 
			  des: ""
			  };
	img[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg", 
			  cap: "", 
			  url: "", 
			  des: ""
			  };

for (var imgs=[], i=0; i<img.length; i++){
	imgs[i] = new Image();
	imgs[i].src = img[i].src;
		}
		
			
var curPic = 0;
var fadeTimer;
var speed = 50;
var opacStep = 0.5;
var dirn = -1;
var curOpac = 10;


function fade(){
	if(fadeTimer){clearInterval(fadeTimer);}
	fadeTimer = setInterval(setOpacity,speed);
		}

function setOpacity() {
	curOpac += opacStep * dirn;

	if (curOpac < 0){
		swapImage();
		curOpac = 0;
		
		document.getElementById("autoPic").onclick = function(){
			dirn = (dirn==1) ? 0 : 1 ;
			}
		
		dirn = 1;
		fade();
		return;
			}
   
	if (curOpac > 10){
		curOpac = 10;
		clearInterval(fadeTimer);
		
		document.getElementById("autoPic").onclick = function(){
			dirn = (dirn==-1) ? 0 : -1 ;
			}
		
		dirn = -1;
		setTimeout(fade,1000);
		return;
			}


	if (imgSlider.style.opacity=="string"){
		imgSlider.style.opacity = curOpac/10;
			}
	else {
		imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
		imgSlider.style.MozOpacity = curOpac/10;
			}
		
		}


function swapImage(){
	curPic = (++curPic > img.length-1) ? 0 : curPic;
	imgSlider.src = img[curPic].src;
		}


 function prevImage(){
	
	document.getElementById("prevImage").onclick = function fade(){
		if(fadeTimer){clearInterval(fadeTimer);}
		fadeTimer = setInterval(setOpacity,speed);
			}

	function setOpacity() {
		curOpac += opacStep * dirn;
	
		if (curOpac < 0){
			swapImage();
			curOpac = 0;
			dirn = 1;
			fade();
			return;
				}
   
		if (curOpac > 10){
			curOpac = 10;
			clearInterval(fadeTimer);
			dirn = -1;
			document.getElementById("prevImage").onclick = function(){setTimeout(fade,1000);}
			return;
				}
	
	
		if (imgSlider.style.opacity=="string"){
			imgSlider.style.opacity = curOpac/10;
				}
		else {
			imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
			imgSlider.style.MozOpacity = curOpac/10;
				}
			
			}


function swapImage(){
	curPic = (--curPic < 0)? img.length-1 : curPic;
	imgSlider.src = img[curPic].src;
		}

	
	}

 

window.onload = function(){
	imgSlider = document.getElementById('imgSlides');
	imgSlider.src = img[curPic].src;
	imgSlider.style.display = 'inline';
	document.getElementById("autoPic").onclick = fade;
	 prevImage(); 

		}

</script>
</head>
<body>

<img id="imgSlides" src="" alt="" />
<br />
 <a id="prevImage" href="#">PREV</a> 
<a id="autoPic" href="#" title="Play / Pause">AUTO</a>

</body>
</html>

I've taken reference of this code from this forum and altered it a bit to achieve the effect that an image will be changed once the prev button is pressed.

Image by image fading works well in IE8 (press the button once, the image is changed once; when pressed again, it changes again; step by step)

But in Firefox 4, it just auto fades into another image. I tried to debug it in the Firefox console but due to my lack of knowledge in JS, I could not find the root of the problem.

Can anyone explain a bit why it works in IE but not in Firefox?

I'm searching for a (customizable) script which allows me to make a simple drop-down menu. It might not look like a whole lot, but there's more to it than it seems.
With any menu builder one can make such a menu BUT since I am restricted to a non html regular font I have to use (small) images with white on black text in that specific font, in order to show always this font to a visitor. Since the page background will also be black, the menu just looks like simple text.

any help, advice or directions are highly appreciated.

Hello and thanks for the help.

I'm no expert by any means, and I have no idea what the problem could be.

Internet Explorer crops my images on my image fade, but Chrome and Safari view it just fine.

the website is www.pisanchynproductions.com

If you open it in IE and Chrome you can see Chrome shows image fadeshow fine, and IE crops the images.
For the record, I don't want the images cropped.

The problem must be in here somewhere.

Code:

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images/SSPP1.JPG", "", ""] //plain image syntax
fadeimages[1]=["images/SSPP2.JPG", "", ""] //plain image syntax
fadeimages[2]=["images/SSPP3.JPG", "", ""] //plain image syntax
fadeimages[3]=["images/SSPP4.JPG", "", ""] //plain image syntax
fadeimages[4]=["images/SSPP5.JPG", "", ""] //plain image syntax
fadeimages[5]=["images/SSPP6.JPG", "", ""] //plain image syntax
fadeimages[6]=["images/SSPP7.JPG", "", ""] //plain image syntax
fadeimages[7]=["images/SSPP11.JPG", "", ""] //plain image syntax
fadeimages[8]=["images/SSPP12.JPG", "", ""] //plain image syntax
fadeimages[9]=["images/SSPP13.JPG", "", ""] //plain image syntax
fadeimages[10]=["images/SSPP14.JPG", "", ""] //plain image syntax


 
var fadebgcolor="white"
 
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();})
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (var p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
 
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try{
@end @*/
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
}
catch(e){}
@end @*/
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="gallery") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" rel="nofollow" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="gallery") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
if(document.getElementById('content'))
document.getElementById('content').style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try{
@end @*/
if (crossobj.filters&&crossobj.filters[0]){
 
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
}catch(e){}
@end @*/
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

I wish i knew more so I could realized how dumb this question was.