Need Help with Java Script

[goatboynsac]

I cant seem to get this code to work in Firefox. Any Ideas?

It basicly takes 7 pictures and fades them in and out using some transparent pictures.

<SCRIPT type="text/javascript">

// file-names of your slideshow's images.
var imgsname=new Array()
imgsname[0]="images/slide1.jpg"
imgsname[1]="images/slide2.jpg"
imgsname[2]="images/slide3.jpg"
imgsname[3]="images/slide4.jpg"
imgsname[4]="images/slide5.jpg"
imgsname[5]="images/slide6.jpg"
imgsname[6]="images/slide7.jpg"

// links for each image. You MUST add a link for each image
var imgslink=new Array()
imgslink[0]="http://www.Vinreg.com/htm/ordernow.htm"
imgslink[1]="http://www.Vinreg.com/htm/ordernow.htm"
imgslink[2]="http://www.Vinreg.com/htm/ordernow.htm"
imgslink[3]="http://www.Vinreg.com/htm/ordernow.htm"
imgslink[4]="http://www.Vinreg.com/htm/ordernow.htm"
imgslink[5]="http://www.Vinreg.com/htm/ordernow.htm"
imgslink[6]="http://www.Vinreg.com/htm/ordernow.htm"

// vertical position of the slideshow (distance to the top margin of the webpage, pixels)
var imgstop=150

// horizontal position of the slideshow (distance to the left margin of the webpage, pixels)
var imgsleft=60

// speed of the transition effect. Less means faster
var pause=30

// standstill-time of the images (seconds)
var standstill=2

// - End of JavaScript - -->
</SCRIPT>
<SCRIPT type="text/javascript" SRC="htm/imgtransliner.js"></SCRIPT>
<DIV ID="imgs" style="position:absolute"> </DIV>
<DIV ID="cover" style="position:absolute"> </DIV>

[Bernard Marx]

imgtransliner.js <--?

[goatboynsac]

Its a java script file

[Rambo Tribble]

What you have provided does not include the code that actually swaps the images, just the setup.

[goatboynsac]

do you want me to post the .js file?

[goatboynsac]

var imgpreload=new Array()
for (i=0;i<=imgsname.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgsname[i]
}
var coverimage = new Array()
coverimage[0]="../images/stripes0.gif"
coverimage[1]="../imagesstripes1.gif"
coverimage[2]="../images/stripes2.gif"
coverimage[3]="../images/stripes3.gif"
coverimage[4]="../images/stripes4.gif"
coverimage[5]="../images/stripes5.gif"
coverimage[6]="../images/stripes6.gif"
coverimage[7]="../images/stripes7.gif"

var covimgpreload=new Array()
for (i=0;i<=coverimage.length-1;i++) {
covimgpreload[i]=new Image()
covimgpreload[i].src=coverimage[i]
}
var i_imgs=0
var i_loop=0
var thisurl=0
var timer
var coverwidth
var coverheight
standstill=standstill*1000

function init() {
if (document.all) {
document.all.imgs.style.posTop=imgstop
document.all.imgs.style.posLeft=imgsleft
document.all.cover.style.posTop=imgstop
document.all.cover.style.posLeft=imgsleft
imgs.innerHTML="<img name='imgsback' src='"+imgsname[i_loop]+"' border=0>"
coverwidth=imgs.offsetWidth
coverheight=imgs.offsetHeight
cover.innerHTML="<a href='javascript:gotourl()'><img width="+coverwidth+" height="+coverheight+" name='imgcover' src='"+coverimage[i_loop]+"' border=0></a>"

enlargehearts()
}

if (document.layers) {
document.imgs.top=imgstop
document.imgs.left=imgsleft
document.cover.top=imgstop
document.cover.left=imgsleft
document.imgs.document.write("<img name='imgsback' src='"+imgsname[i_loop]+"' border=0>")
document.imgs.document.close()
coverwidth=document.imgs.document.width
coverheight=document.imgs.document.height
document.cover.document.write("<a href='javascript:gotourl()'><img width="+coverwidth+" height="+coverheight+" name='imgcover' src='"+coverimage[i_loop]+"' border=0></a>")
document.cover.document.close()

enlargehearts()
}
}

function enlargehearts() {
if (i_loop<=coverimage.length-1) {
if (document.all) {
imgcover.src=coverimage[i_loop]
}
if (document.layers) {
document.cover.document.imgcover.src=coverimage[i_loop]
}
i_loop++
timer= setTimeout("enlargehearts()",pause)
}
else {
clearTimeout(timer)
i_loop--
timer= setTimeout("shrinkhearts()",standstill)
}
}

function shrinkhearts() {
if (i_loop>=0) {
if (document.all) {
imgcover.src=coverimage[i_loop]
}
if (document.layers) {
document.cover.document.imgcover.src=coverimage[i_loop]
}
i_loop--
timer= setTimeout("shrinkhearts()",pause)
}
else {
clearTimeout(timer)
i_loop=0
i_imgs++

if (i_imgs>=imgsname.length) {i_imgs=0}
if (document.all) {
imgsback.src=imgsname[i_imgs]
}
if (document.layers) {
document.imgs.document.imgsback.src=imgsname[i_imgs]
}
timer= setTimeout("enlargehearts()",(4*pause))
}
}

function gotourl() {
document.location.href=imgslink[i_imgs]
}
window.onload=init

[Bernard Marx]

This script is very old. It's the usual story with these scripts. There are 2 branches. One is executed if the browser has document.all (IE), the other if document.layers (NS4) is present. Mozilla browsers match neither of the profiles, and get ignored.

This needs rewriting / replacing.

[goatboynsac]

I appreciate the help. Once i saw that there was code in the .JS file, i knew i had to change to elementbyid(). But now i need a little help. Apparently its viewed differently in IE then it is in Firefox. In firefox, the image covers up some of the text, while it looks perfect in IE. What am i missing. Link is below:

www.vinreg.com/index.htm

[habbahabba]

Hi!
I saw that you had a bunch of questions regarding firefox and javascript. The thing is that you have very old code in your scripts and instead of looking through every problem you have I suggest you study the W3C DOM instead on IE because W3C is a STANDARD.

Good resources are ofcourse w3c.org but there is also an excelent page [quirksmode.org...] that goes through how you should write good JS code. It also sortes out differences between browsers.

I also would like to point out that now a days you always have to specify the unit of measurement. Like PX. Donät write just top: 30. You have to write top: 30px;

And also learn to terminate all JS rows with semicolon ; It is good pratice.

/Henke