<div id="trans"><img id=ibom src="<%= Pic1 %>" width=791 height=410 > <img onclick=gotoshow(); id=itop src="<%= Pic2 %>" width=791 height=410 > </div> <script>/* <![CDATA[ */// it seems best if this Javascript is Below the HTML for the Imagesvar see = 100, tImg = false, iBom=false, tID=0;// I use the iNum (image number) for Array count// because This has Two Images already in the Box to start, The iNum need to start at 2var tRapid = 50, iNum = 2, slidespeed=5000;var slidelinks = ["<%= URL1 %>","<%= URL2 %>","<%= URL3 %>","<%= URL4 %>","<%= URL5 %>"];var slideimages = ["<%= Pic1 %>","<%= Pic2 %>","<%= Pic3 %>","<%= Pic4 %>","<%= Pic5 %>"];// BELOW is a method for PRE-LOADING the Transition images// there may be an Unwanted Initial Delay if you do Not Pre-Load the Imagesvar preImg = [];for (var i = 0; i < slideimages.length; i++) { preImg[i] = new Image; preImg[i].src = slideimages[i]; }tImg= document.getElementById("itop");iBom= document.getElementById("ibom");var useO = 'opacity' in document.documentElement.style;function dofade(){see -= 6;if (see < 10) { see = 100; tImg.src = iBom.src; if(useO) tImg.style.opacity = 1.0; else tImg.style.filter='alpha(opacity='+ 100 +')'; iBom.src = slideimages[iNum]; iNum++; if (iNum >= slideimages.length) { iNum = 0; }tID=setTimeout("dofade();",slidespeed);return;}tID=setTimeout("dofade();", tRapid);if(useO) tImg.style.opacity = see/100; else tImg.style.filter='alpha(opacity='+ see +')';}tID=setTimeout("dofade();", slidespeed);// starts the slides with page loadfunction gotoshow(){var cur = iNum-2; // has to go back by Twoif (cur == -1) cur = slidelinks.length-1;if (cur == -2) cur = slidelinks.length-2;window.location = slidelinks[cur];}/* ]]> */</script>
The problem is you need to position your images absolutely in the trans div However your use of tables for this page is not ideal.
Using tables for layout is a bad idea - and for your website not at all necessary.
Changing at this point though I suspect is not on your todo list - but you may need to change the markup of the cells that contain the image
Remove the <td> elements around the cell with the images.
Make the <td> parent for the table vertical align top (use style="vertical-align: top" rather than the deprecated attribute valiagn). You will need to give #trans a width and a height and the row containing trans a height of 410px as well as a vertical-align top.
I managed to get this to work making modifications in firebug code attached if you can use it.
In future don't use ImageReady to slice your page - rather code it yourself properly - will save many hours of frustration trying to get layout issues sorted out.
Unfortunately, it did not work, still getting doubling of images in IE but, with that changes, now also getting them in Chrome, in which it worked before
Thanks for the attempt
0
JChrisMcNeilAuthor Commented:
julianH,
Got it working with some tweaks, thanks
C
0
JChrisMcNeilAuthor Commented:
Well, I spoke to soon. . . works in IE, Chrome, and Safari but still getting doubling of images in Firefox.
Using tables for layout is a bad idea - and for your website not at all necessary.
Changing at this point though I suspect is not on your todo list - but you may need to change the markup of the cells that contain the image
Remove the <td> elements around the cell with the images.
Make the <td> parent for the table vertical align top (use style="vertical-align: top" rather than the deprecated attribute valiagn). You will need to give #trans a width and a height and the row containing trans a height of 410px as well as a vertical-align top.
I managed to get this to work making modifications in firebug code attached if you can use it.
In future don't use ImageReady to slice your page - rather code it yourself properly - will save many hours of frustration trying to get layout issues sorted out.
Open in new window
charleston-partial.html