I am now coding a website, and have found a slight problem in doing so. the url for the site is www.grantglendinning.co.uk/CGC/acatalog/index.html - as you can guess this isn't the URL for which the site will be installed at - I am merely at the testing stage.
If you load the site in IE, you will see several images scroll across above the 'EntrancePic', which indicates the ranges of products. In Firefox and Netscape however, this doesn't work - in fact, not even any error output is given so I have no idea how to solve it? Can anyone help on that front?
<script LANGUAGE="JavaScript"> //slider's width var swidth=300 //slider's height var sheight=90 //slider's speed; var sspeed=20 var imagef='' //images: var leftimage=new Array(); leftimage[0]='<a href="http://www.cupargardencentre.co.uk/acatalog/index.html"><img src="images/cupar.gif" width="145" height="90" border="0" alt="Cupar Garden Centre Logo"></a>' leftimage[1]='<a href="www.google.co.uk"><img src="images/Pud_apex1.jpg" width="100" height="90" border="0" alt="Pudsey Apex Garage"</a>' leftimage[2]='<a href="http://www.cupargardencentre.co.uk/acatalog/BBQ_Range.html"><img src="images/bbq.jpg" width="100" height="90" border="0" alt="Weber BBQ"></a>' leftimage[3]='<a href="http://www.cupargardencentre.co.uk/acatalog/Building_and_Greenhouse.html"><img src="images/building.jpg" width="100" height="90" border="0" alt="Malvern MPB Garden Summerhouse"></a>' leftimage[4]='<a href="http://www.cupargardencentre.co.uk/acatalog/copy_of_HTA_Garden_Gift_Vouchers.html"><img src="images/buy.gif" width="100" height="90" border="0" alt="HTA Gift Vouchers"></a>' leftimage[5]='<a href="http://www.cupargardencentre.co.uk/acatalog/Garden_Furniture.html"><img src="images/canterbury.jpg" width="100" height="90" border="0" alt="MGM Canterbury Cane Furniture"></a>' leftimage[6]='<a href="http://www.cupargardencentre.co.uk/acatalog/Pets.html"><img src="images/dog.jpg" width="100" height="90" border="0" alt="Oxford Dog Bed"></a>' leftimage[7]='<a href="http://www.cupargardencentre.co.uk/acatalog/Aquatics.html"><img src="images/fish.jpg" width="100" height="90" border="0" alt="Tropical Fish"></a>' leftimage[8]='<a href="http://www.cupargardencentre.co.uk/acatalog/Pine_Furniture.html"><img src="images/furniture.jpg" width="100" height="90" border="0" alt="Santa Fe Cabinet"></a>' leftimage[9]='<a href="http://www.cupargardencentre.co.uk/acatalog/Garden_and_Patio_Furniture.html"><img src="images/outdoorfurniture.jpg" width="100" height="90" border="0" alt="Alexander Rose Regency Mahogany"></a>' leftimage[10]='<a href="http://www.cupargardencentre.co.uk/acatalog/Walton_Buildings.html"><img src="images/playhouse.jpg" width="100" height="90" border="0" alt="Honeysuckle Playhouse by Honeypot"></a>' leftimage[11]='<a href="http://www.cupargardencentre.co.uk/acatalog/Sports_and_Leisure.html"><img src="images/pool.jpg" width="100" height="90" border="0" alt="Plum Pool Table"></a>' leftimage[12]='<a href="http://www.cupargardencentre.co.uk/acatalog/Gardenwares.html"><img src="images/reel.gif" width="100" height="90" border="0" alt="Gardena Hose Reel"></a>' leftimage[13]='<a href="http://www.cupargardencentre.co.uk/acatalog/Garden_Products_from_Plum.html"><img src="images/sunory.jpg" width="100" height="90" border="0" alt="Sunory Pressure Treated Pagoda by Plum"></a>' leftimage[14]='<a href="http://www.cupargardencentre.co.uk/acatalog/Walton_Buildings.html"><img src="images/walton.jpg" width="100" height="90" border="0" alt="Hallmark Walton Buttermere Georgian Summerhouse"></a>' leftimage[15]='<a href="http://www.cupargardencentre.co.uk/acatalog/Giftware_2007_-_Free_Delivery_.html"><img src="images/willow.jpg" width="100" height="90" border="0" alt="Willow Tree by Demdaco Giftware"></a>' for (mi=0;mi<leftimage.length;mi++) imagef=imagef+leftimage[mi] function start(){ if (document.all) return if (document.getElementById){ document.getElementById("slider").style.visibility="show" initial6(document.getElementById('slider')) } else if(document.layers){ document.slider1.visibility="show" intialslide() } } function intialslide(){ document.slider1.document.slider2.document.write('<nobr>'+imagef+'</nobr>') document.slider1.document.slider2.document.close() thel=document.slider1.document.slider2.document.width document.slider1.document.slider2.left-=thel sslide() } function sslide(){ if (document.slider1.document.slider2.left>=thel*(-1)){ document.slider1.document.slider2.left-=sspeed setTimeout("sslide()",100) } else{ document.slider1.document.slider2.left=swidth sslide() } } function initial6(whichdiv){ tdiv6=eval(whichdiv) tdiv6.innerHTML=('<nobr>'+imagef+'</nobr>') tdiv6.style.left=swidth thel=swidth*leftimage.length scroll6() } function scroll6(){ if (parseInt(tdiv6.style.left)>=thel*(-1)){ tdiv6.style.left=parseInt(tdiv6.style.left)-sspeed setTimeout("scroll6()",0) } else{ tdiv6.style.left=swidth scroll6() } } </SCRIPT> <body onload="start()"> <script LANGUAGE="JavaScript"> if (document.all){ document.write('<marquee id="slidere" scrollAmount=8 style="width:1000;height:90;">'+imagef+'</marquee>') slidere.onmouseover=new Function("slidere.scrollAmount=0") slidere.onmouseout=new Function("if (document.readyState=='complete') slidere.scrollAmount=8") } if (document.layers){ document.write('<ilayer width=102 height=82 name="slider1" bgcolor="white" visibility=hide>') document.write('<layer name="slider2" onMouseover="sspeed=0;" onMouseout="sspeed=20">') document.write('</layer>') document.write('</ilayer>') } if (document.getElementById&&!document.all){ document.write('<div style="position:absolute;width:102;height:82;clip:rect(0 102 82 0);">') document.write('<div id="slider" style="position:relative;width:&{swidth};" onMouseover="sspeed=0;" onMouseout="sspeed=10">') document.write('</div></div>') } </script>
Finally, one other very small minor imperfection. I have produced the below code, but cannot get the drop down menu to stay default to 'Conservatory 1' - it automatically says 'Conservatory 7' - can anyone help me with that? I'm sure it's just a very minor fault but cannot pinpoint it myself.
<script language="javascript"> var x = 0; function rotate(num){ x=num%document.slideForm.slide.length; if(x<0){x=document.slideForm.slide.length-1}; document.images.show.src=document.slideForm.slide.options[x].value; document.slideForm.slide.selectedIndex=x;} function apRotate() { if(document.slideForm.slidebutton.value == "Stop"){ rotate(++x);window.setTimeout("apRotate()", 5000);}} //end --></script> <form name="slideForm"> <table cellspacing=1 cellpadding=4 style="border:1px black solid; border-collapse:collapse"> <tr><td align=center> <b></b> </td></tr> <tr><td align=center width=390 height=330> <img src="images/Conservatory1.jpg" name="show"> </td></tr> <tr><td align=center style="border:1px black solid;"> <select name="slide" onChange="rotate(this.selectedIndex);"> <option value="images/Conservatory1.jpg" selected>Conservatory 1 <option value="images/Conservatory2.jpg">Conservatory 2 <option value="images/Conservatory3.jpg" selected>Conservatory 3 <option value="images/Conservatory4.jpg"> Conservatory 4 <option value="images/Conservatory5.jpg" selected>Conservatory 5 <option value="images/Conservatory6.jpg">Conservatory 6 <option value="images/Conservatory7.jpg" selected>Conservatory 7 </select> </td></tr> <tr><td align=center style="border:1px black solid;"> <input type=button onclick="rotate(0);" value="ll<<" title="Jump to beginning" style="border:1px black solid;"> <input type=button onclick="rotate(x-1);" value="<<" title="Last Picture" style="border:1px black solid;"> <input type=button name="slidebutton" onClick="this.value=((this.value=='Stop')?'Start':'Stop');apRotate();" value="Start" title="Autoplay" style="width:75px; border:1px black solid;"> <input type=button onclick="rotate(x+1);" value=">>" title="Next Picture" style="border:1px black solid;"> <input type=button onclick="rotate(this.form.slide.length-1);" value=">>ll" title="Jump to end" style="border:1px black solid;"> </td></tr></table></form>
Thank you to anyone and everyone who can help me out!