I am trying to display images with DIV tags. I can get this to work in IE but have run into difficulties with Netscape (4.08).
Heres what Ive got so far:
<head>
<title>HTML document</title>
</head>
<style type='text/css'>
<!--
.SlideGroup
{
position:absolute;
top:100;
left:400;
visibility:hidden;
}
-->
</style>
<html>
<body onLoad="body_OnLoad()" >
<SCRIPT LANGUAGE="javascript">
var divArray = new Array();
var divLength;
var nCurrentSlide=0;
function body_OnLoad()
{
//
// this code is dynamically produced by the presentation server
//
divArray[0]='Div00';
divArray[1]='Div01';
divArray[2]='Div02';
divArray[3]='Div03';
divArray[4]='Div04';
divLength=divArray.length;
DivMakeVisible('Div00');
}
function onClick_cmdNextSlide()
{
if (nCurrentSlide < divLength - 1)
{
nCurrentSlide++;
}
DivMakeVisible(divArray[nC
urrentSlid
e]);
// alert(divArray[nCurrentSli
de]);
}
function onClick_cmdPreviousSlide()
{
if (nCurrentSlide > 0)
{
nCurrentSlide--;
}
DivMakeVisible(divArray[nC
urrentSlid
e]);
//alert(divArray[nCurrentS
lide]);
}
function Divinvis(divId)
{
for(i=0;i<divLength;i++)
{
if(divArray[i].indexOf(div
Id)==0)
{
if(is.ie )
{
eval('document.all.'+divId
+'.style.v
isibility=
hide');
}
if(is.nav )
{
document.eval(divId).visib
ility=hide
;
}
divArray[i]=divId;
break;
}
}
}
function DivHideAll()
{
for(i=0;i<divLength;i++)
{
if(divArray[i].indexOf("+1
")>0)
{
divId=divArray[i].substr(0
,divArray[
i].length-
2)
if(is.ie )
{
eval('document.all.'+divId
+'.style.v
isibility=
hide');
}
if(is.nav )
{
document.eval(divId).visib
ility=hide
;
}
divArray[i]=divId;
}
}
}
function DivMakeVisible(me)
{
DivHideAll();
DivVis(me);
}
function DivVis(divId)
{
for(i=0;i<divLength;i++)
{
if(divArray[i].indexOf(div
Id)==0)
{
if(is.ie )
{
eval('document.all.'+divId
+'.style.v
isibility=
show');
}
if(is.nav )
{
document.eval(divId).visib
ility=show
;
}
divArray[i]=divId+"+1";
break;
}
}
}
var hide="hidden";
var show="visible";
var m_VideoType=0;
function Is ()
{ // convert all characters to lowercase to simplify testing
var agt=navigator.userAgent.to
LowerCase(
)
// *** BROWSER VERSION ***
this.major = parseInt(navigator.appVers
ion)
this.minor = parseFloat(navigator.appVe
rsion)
this.nav = ((agt.indexOf('mozilla')!=
-1) && ((agt.indexOf('spoofer')==
-1)
&& (agt.indexOf('compatible')
== -1)))
this.nav2 = (this.nav && (this.major == 2))
this.nav3 = (this.nav && (this.major == 3))
this.nav4 = (this.nav && (this.major == 4))
this.nav4up = this.nav && (this.major >= 4)
this.navonly = (this.nav && (agt.indexOf(";nav") != -1))
this.ie = (agt.indexOf("msie") != -1)
this.ie3 = (this.ie && (this.major == 2))
this.ie4 = (this.ie && (this.major == 4))
this.ie4up = this.ie && (this.major >= 4)
if(this.ie)
{
hide="hidden";
show="visible";
}
if(this.nav)
{
hide="hide";
show="show";
}
}
var is = new Is();
</SCRIPT>
<div id="Div00" class="SlideGroup">
<img src="VodiumMain.gif" name="slide" border="0" align="center"></img>
</div>
<!--
embedded pages cause great problems with Netscape. Divs become visibile here
-->
<div id="Div01" class="SlideGroup">
<img SRC="slide10.gif" WIDTH="600" HEIGHT="400" ></img>
</div>
<div id="Div02" class="SlideGroup">
<EMBED SRC="CTSL413m.pdf" WIDTH="600" HEIGHT="400"></EMBED>
</div>
<div id="Div03" class="SlideGroup">
<layer SRC="
http://www.yahoo.com"
WIDTH="600" HEIGHT="400" >
</layer>
<iframe SRC="
http://www.yahoo.com"
WIDTH="600" HEIGHT="400" >
</iframe>
</div>
<div id="Div04" class="SlideGroup">
<img SRC="slide10.gif" Width="600" Height="400"></img>
</div>
<div id="Navigation01" class="NavigationGroup" >
<form method="post" width = "200" name="frmNavigation">
<table border="0" width="200" cellspacing="0" cellpadding="0">
<!--
third row is for presentation navigation and Table of Contents
-->
<tr valign="top" >
<td align="middle" height="120">
<P>navigation and Table of Contents </P>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<td align="middle" width="50%">
<INPUT id="cmdPreviousSlide" name="cmdPreviousSlide" onclick = "onClick_cmdPreviousSlide(
)" type="button" value="Previous Slide"></INPUT>
</td>
<td align="middle" width="50%">
<INPUT id="cmdNextSlide" name="cmdNextSlide" onclick = "onClick_cmdNextSlide()" type="button" value="Next Slide"></INPUT>
</td>
</TR>
</table>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
The problem that I experience is that in Netscape the Images are displayed all over the page, but in IE it places them all in a specific location (all in the same spot, one visible at a time). If anyone knows how to get around this. Please Help.
Thanks,
Mr. WhiteFolks,
Pimp a da year
