Div + Diaporama Javascript

Question

jack59000

15 Apr 2005 à 14:17

Salut voila j'ai une petit probleme j'ai recupere un code sur dhteumeuleu.com qui foonctionne tres bien sur tout les navigateurs sauf que lorsque je l'utilise a ma sauce le diaporama ne s'affiche que sur IE Opera mais pas sur FF Mozilla NetS. Est ce que quelqu'un aurait une solution? car je galere bien.
Mon code est ci-dessous:

<html>
<head>
<title></title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.conteneur
{
position:absolute;
left: 50%;
top: 50%;
width: 794px;

height: 567px;
margin-top: -283.5px;
margin-left: -397px;
border: 1px solid #000;

}
.haut {
height:85px;
width: 100%;
}
.bas {
width: auto;
height: 95px;
}
.frame {
height: 393px;
width: 794px;
overflow:hidden;
}

</style>

<script type="text/javascript">
window.onerror = new Function("return true");
screen.bufferDepth = 16;
document.onselectstart = function () { return false; }

////////////////////////////
var NX = 3;
var NY = 3;
var SP = 20;
var DELAY = 100;
////////////////////////////

var object = new Array();
var nI = 0;
var run = false;
var xrun = 0;
var dR = 1;
var iW = 0;
var iH = 0;
var oH = 0;
var oW = 0;

function CObj(N,y,x)
{
//alert('fonction Cobj');
this.obj = document.createElement("span");
this.obj.onclick = new Function("object["+N+"].GE1()");
this.obj.onmousedown = new Function("return false;");
this.obj.style.cursor = "pointer";
this.obj.style.position = "absolute";
this.img = document.createElement("img");
this.img.style.position = "absolute";
this.img.src = IMGSRC[N%nI].src;
this.obj.appendChild(this.img);
IMGBOX.appendChild(this.obj);

this.object = new Array();
this.x = x;
this.y = y;
this.N = N;
this.W = 0;
this.H = 0;
this.L = 0;
this.T = 0;

function CImg(Parent,y,x)
{
//alert('fonction CImg');
this.Parent = Parent;

this.obj = document.createElement("span");
this.obj.style.position="absolute";
this.obj.style.overflow="hidden";
this.obj.style.cursor = "pointer";
this.img = document.createElement("img");
this.img.style.position = "absolute";
this.img.src = IMGSRC[N%nI].src;
this.obj.appendChild(this.img);
this.Parent.obj.appendChild(this.obj);

this.N = Parent.N;
this.x = x;
this.y = y;
this.W = 0;
this.H = 0;
this.L = 0;
this.T = 0;
this.dx = 0;
this.dy = 0;
this.px = 0;
this.py = 0;
this.dw = 0;
this.dh = 0;
this.pw = 0;
this.ph = 0;
this.ipx = 0;
this.ipy = 0;
this.idx = 0;
this.idy = 0;

this.GE2 = function ()
{
//alert('GE2');
with(this)
{
px -= dx * dR;
py -= dy * dR;
pw += dw * dR;
ph += dh * dR;
ipx -= idx * dR;
ipy -= idy * dR;

with(obj.style)
{
//alert('obj.style');
left = Math.round(px);
top = Math.round(py);
width = Math.round(pw)+1;
height = Math.round(ph)+1;
if(dR==-1)if(pw<=W+1)obj.style.visibility="hidden";
}

with(img.style)
{
//alert('img.style');
left = Math.round(ipx-oW);
top = Math.round(ipy-oH);
}

if(++xrun>=NX*NY*SP)
{
xrun=0;
run=false;
if(dR==-1)Parent.obj.style.zIndex = 0;
dR = -dR;
}
}
}

this.GE1 = function (N1,N2)
{
//alert('GE1');
with(this)
{
if(dR==1)
{
px = L;
py = T;
dx = ((Parent.L + L) - (x * Parent.W)) / SP;
dy = ((Parent.T + T) - (y * Parent.H)) / SP;
pw = W;
ph = H;
dw = (Parent.W - W) / SP;
dh = (Parent.H - H) / SP;
ipx = -L;
ipy = -T;
idx = ((x * Parent.W) - L) / SP;
idy = ((y * Parent.H) - T) / SP;
}
obj.style.visibility="visible";
if(img.height>document.body.offsetHeight)oH=(img.height-document.body.offsetHeight)/2; else oH = 0;
if(img.width>document.body.offsetWidth/2)oW=(img.width-(document.body.offsetWidth/2))/2; else oW = 0;
for(i=0;i<SP;i++) setTimeout("object["+N1+"].object["+N2+"].GE2()",16*i);
}
}

this.DOOT = function ()
{
//alert('DOOT');
with(this)
{
W = Parent.W / NX;
H = Parent.H / NY;
L = x * W;
T = y * H;
}
}
}

var k = 0;
for(var i=0;i<NY;i++)
for(var j=0;j<NX;j++)
this.object[k++] = new CImg(this,i,j);

this.GE1 = function ()
{
with(this)
{
if(!run)
{
TXTBOX.innerHTML = "<div style='margin:2%'>"+TXTSRC[N%nI].innerHTML+"</div>";
run = true;
obj.style.zIndex = 1;
for(var i=0;i<NX*NY;i++) setTimeout("object["+N+"].object["+i+"].GE1("+N+","+i+")",i*DELAY);
}
}
}

this.DOOT = function ()
{
with(this)
{
if(img.width<iW)iW=img.width;
if(img.height<iH)iH=img.height;
with(obj.style)
{
W = width = iW / NX;
H = height = iH / NY;
L = left = x * W;
T = top = y * H;
}
with(img.style)
{
width = W;
height = H;
}
for(var i in object) object.DOOT();
}
}
}

onload = function()
{

IMGSRC = document.getElementById("imgsrc").getElementsByTagName("img");
TXTSRC = document.getElementById("txtsrc").getElementsByTagName("div");
IMGBOX = document.getElementById("imgbox");
TXTBOX = document.getElementById("txtbox");
CENTER = document.getElementById("center");
iH = document.body.offsetHeight;
iW = document.body.offsetWidth/2;
nI = IMGSRC.length;
var k = 0;
for(var i=0;i<NY;i++)
{
for(var j=0;j<NX;j++)
{
object[k] = new CObj(k,i,j);
object[k++].DOOT();
}
}
IMGBOX.style.width = iW;
IMGBOX.style.height = iH;
TXTBOX.style.width = iW;
TXTBOX.style.height = iH;
TXTBOX.style.left = iW;
TXTBOX.style.visibility="visible";
CENTER.style.left = -iW;
CENTER.style.top = -iH/2;
}
//-->
</script>
</head>

<body>
<div class="conteneur">

<div class="frame" >
<div id="center" style="position:absolute;">
<div id="imgbox" style="position:absolute;left:0;top:0;overflow:hidden;">
</div>
<div id="txtbox" style="position:absolute;visibility:visible;overflow:hidden;background-color:#333;color:#FFF;font-family:verdana;font-size:0.8em;">
<div style="margin:2%">

</div>
</div>

</div></div>

<div id="imgsrc" style="visibility:hidden; position:absolute">
<img alt="" src="BS9097.jpg">
<img alt="" src="BS9092.jpg">
<img alt="" src="BS9084.jpg">
<img alt="" src="BS9064.jpg">
<img alt="" src="BS9050.jpg">
<img alt="" src="BS9070.jpg">
<img alt="" src="BS9079.jpg">
<img alt="" src="BS9068.jpg">
<img alt="" src="BS9039.jpg">

</div>

<div id="txtsrc" style="visibility:hidden">
<div>
<h2>the river</h2><br>Awaken from my nap by the river
</div>
<div>
<h2>transparency</h2><br>Its transparency was hypnotizing.
</div>
<div>
<h2>cold</h2><br>Currents of cold water played with light.
</div>
<div>
<h2>sank in</h2><br>I threw a few nuts into the river. They floated for a while, then sank in.
</div>
<div>
<h2>masked</h2><br>A wide stepping stone masked the water's depth.
</div>
<div>
<h2>a glimpse</h2><br>Later on, I had a glimpse of the river's bed.
</div>
<div>
<h2>forgotten</h2><br>The wheelchair made a noise. Again, I had forgotten about my legs.
</div>
<div>
<h2>floated</h2><br>Still, I floated in oblivion of things too real.
</div>
<div>
<h2>for me</h2><br>I stared fixedly at the water's open arms. The stream was singing for me.
</div>
</div>


<span id="LB0" style="position:absolute;left:50%;top:50%;">
<span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50;top:-18">Loading...</span>
<span style="position:absolute;left:-50;top:-5;font-size:1px;width:100;height:10px;background:#333">
<span id="LB1" style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;background:#FFFFFF"></span>
</span>
</span>

<script type="text/javascript">
m00=document.getElementById("imgsrc").getElementsByTagName("img");
m01=m00.length;

function images_loading_bar()
{

m02=0;
for(i=0;i<m01;i++)
m02+=(m00[i].complete)?1:0;

document.getElementById("LB1").style.width=Math.round(m02/m01*100);
if(m02==m01)
setTimeout("document.getElementById('LB0').style.display='none'",128);
else setTimeout("images_loading_bar()", 64);
};
images_loading_bar();
</script>



</div>
</body>
</html>[/i]

Raphael

Administrateur

15 Apr 2005 à 14:22

Salut, très rapidement, voici ce que tu as dû lire en parcourant les Règles du forum :

Règles du forum a écrit :

13- Mise en forme générale des messages

Merci de bien vouloir prendre le temps de présenter correctement vos messages, surtout si ces messages doivent inciter les autres membres à vous dépanner sur un problème. Des boutons de mise en forme sont prévus pour cela (gras, italique, etc.). Merci de systématiquement baliser vos codes HTML ou CSS avec le bouton CODE approprié (éviter également, pour des questions de lisibilité, de présenter des codes HTML et PHP imbriqués). Enfin, n'hésitez pas à toujours fournir une image explicative et une url où les membres auront un aperçu de votre problème.

Modifié par Raphael (15 Apr 2005 - 14:23)

Igor

15 Apr 2005 à 14:23

Bonjour et bienvenue sur Alsacréations jack59000,

Merci d'utiliser le bouton code ([ code][ /code] sans les espaces) de la zone d'édition pour présenter du code dans les messages comme indiqué dans les Règles et d'éditer ton message pour le corriger Smiley cligne

.

édit:grillé Smiley lol

Modifié par Igor (15 Apr 2005 - 14:23)

jack59000

15 Apr 2005 à 14:45

ok excusé moi j'ai pas fé attention:
Le probleme se situe au niveau des divs je pense!!
donc ce code marche nikel sur IE mais pas sur FF
et si j'enleve les divs ca marche sous FF, mais comme j'utilise l'inclusion de fichier avec php je dois garder ce systeme de div
merci


<html>
<head>
<title>whirlpool - Interactive DHTML art-demos</title>
<meta name="Author" content="Gerard Ferrandez at  http://www.dhteumeuleu.com">
 
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
.conteneur {
	 position:absolute;
	 left: 50%; 
	 top: 50%;
	 width: 794px;
	 
	 height: 567px;
	 margin-top: -283.5px;
	 margin-left: -397px;
	 border: 1px solid #000;
	
	 
	}
	.haut {
	
	height:85px;
	width: 100%;
	
	}
	.frame {
	height: 393px;
	width: 794px;
	overflow:hidden;
	background-color:#FFFFFF;
	
	
	}
	
	.bas {
	width: auto;
	height: 95px;
	}
	
	
</style>

<script type="text/javascript">
window.onerror = new Function("return true");
screen.bufferDepth = 16;
document.onselectstart = function () { return false; }

////////////////////////////
var NX     = 3;
var NY     = 3;
var SP     = 20;
var DELAY  = 96;
////////////////////////////

var object = new Array();
var nI     = 0;
var run    = false;
var xrun   = 0;
var dR     = 1;
var iW     = 0;
var iH     = 0;
var oH     = 0;
var oW     = 0;

function CObj(N,y,x){

	this.obj = document.createElement("span");
	this.obj.onclick = new Function("object["+N+"].GE1()");
	this.obj.onmousedown = new Function("return false;");
	this.obj.style.cursor = "pointer";
	this.obj.style.position = "absolute";
	this.img = document.createElement("img");
	this.img.style.position = "absolute";
	this.img.src = IMGSRC[N%nI].src;
	this.obj.appendChild(this.img);
	IMGBOX.appendChild(this.obj);

	this.object = new Array();
	this.x      = x;
	this.y      = y;
	this.N      = N;
	this.W      = 0;
	this.H      = 0;
	this.L      = 0;
	this.T      = 0;

	function CImg(Parent,y,x)
        {
		this.Parent = Parent;

		this.obj = document.createElement("span");
		this.obj.style.position="absolute";
		this.obj.style.overflow="hidden";
		this.obj.style.cursor = "pointer";
		this.img = document.createElement("img");
		this.img.style.position = "absolute";
		this.img.src = IMGSRC[N%nI].src;
		this.obj.appendChild(this.img);
		this.Parent.obj.appendChild(this.obj);

		this.N   = Parent.N;
		this.x   = x;
		this.y   = y;
		this.W   = 0;
		this.H   = 0;
		this.L   = 0;
		this.T   = 0;
		this.dx  = 0;
		this.dy  = 0;
		this.px  = 0;
		this.py  = 0;
		this.dw  = 0;
		this.dh  = 0;
		this.pw  = 0;
		this.ph  = 0;
		this.ipx = 0;
		this.ipy = 0;
		this.idx = 0;
		this.idy = 0;

		this.GE2 = function ()
                {
		        with(this){
			px -= dx * dR;
			py -= dy * dR;
			pw += dw * dR;
			ph += dh * dR;
			ipx -= idx * dR;
			ipy -= idy * dR;

			with(obj.style)
                        {
				left   = Math.round(px);
				top    = Math.round(py);
				width  = Math.round(pw)+1;
				height = Math.round(ph)+1;
				if(dR==-1)if(pw<=W+1)obj.style.visibility="hidden";
			}

			with(img.style)
                        {
				left   = Math.round(ipx-oW);
				top    = Math.round(ipy-oH);
			}

			if(++xrun>=NX*NY*SP)
                        {
				xrun=0;
				run=false;
				
                                if(dR==-1)Parent.obj.style.zIndex = 0;
					dR = -dR;
			}
		}
	}

		this.GE1 = function (N1,N2){
			with(this){
				if(dR==1){
					px  = L;
					py  = T;
					dx  = ((Parent.L + L) - (x * Parent.W)) / SP;
					dy  = ((Parent.T + T) - (y * Parent.H)) / SP;
					pw  = W;
					ph  = H;
					dw  = (Parent.W - W) / SP;
					dh  = (Parent.H - H) / SP;
					ipx = -L;
					ipy = -T;
					idx = ((x * Parent.W) - L) / SP;
					idy = ((y * Parent.H) - T) / SP;
				}
				obj.style.visibility="visible";
				if(img.height>document.body.offsetHeight)oH=(img.height-document.body.offsetHeight)/2; else oH = 0;
				if(img.width>document.body.offsetWidth/2)oW=(img.width-(document.body.offsetWidth/2))/2; else oW = 0;
				for(i=0;i<SP;i++) setTimeout("object["+N1+"].object["+N2+"].GE2()",16*i);
			}
		}

		this.DOOT = function (){
			with(this){
				W =  Parent.W  / NX;
				H =  Parent.H / NY;
				L =  x * W;
				T =  y * H;
			}
		}
	}

	var  k = 0;
	for(var i=0;i<NY;i++)
		for(var j=0;j<NX;j++)
			this.object[k++] = new CImg(this,i,j);

	this.GE1  = function (){
		with(this){
			if(!run){
				TXTBOX.innerHTML = "<div style='margin:2%'>"+TXTSRC[N%nI].innerHTML+"</div>";
				run = true;
				obj.style.zIndex = 1;
				for(var i=0;i<NX*NY;i++) setTimeout("object["+N+"].object["+i+"].GE1("+N+","+i+")",i*DELAY);
			}
		}
	}

	this.DOOT = function (){
		with(this){
			if(img.width<iW)iW=img.width;
			if(img.height<iH)iH=img.height;
			with(obj.style){
				W = width  = iW  / NX;
				H = height = iH / NY;
				L = left   = x * W;
				T = top    = y * H;
			}
			with(img.style){
				width  = W;
				height = H;
			}
			for(var i in object) object[i].DOOT();
		}
	}
}


onload = function() {
	IMGSRC = document.getElementById("imgsrc").getElementsByTagName("img");
	TXTSRC = document.getElementById("txtsrc").getElementsByTagName("div");
	IMGBOX = document.getElementById("imgbox");
	TXTBOX = document.getElementById("txtbox");
	CENTER = document.getElementById("center");
	iH = document.body.offsetHeight;
	iW = document.body.offsetWidth/2;
	nI = IMGSRC.length;
	var k = 0;
	for(var i=0;i<NY;i++){
		for(var j=0;j<NX;j++){
			object[k] = new CObj(k,i,j);
			object[k++].DOOT();
		}
	}
	IMGBOX.style.width  = iW;
	IMGBOX.style.height = iH;
	TXTBOX.style.width  = iW;
	TXTBOX.style.height = iH;
	TXTBOX.style.left   = iW;
	TXTBOX.style.visibility="visible";
	CENTER.style.left   = -iW;
	CENTER.style.top    = -iH/2;
}
//-->
</script>

</head>

<body>
	
<div class="conteneur">
		<div class="haut">
		 
		</div>
		<div class="frame">
		
				
				<div style="position:absolute;left:50%;top:50%;">
					<div id="center" style="position:absolute;">
						<div id="imgbox" style="position:absolute;left:0;top:0;overflow:hidden;"></div>
							<div id="txtbox" style="position:absolute;visibility:hidden;overflow:hidden;background:#333;color:#FFF;font-family:verdana;font-size:0.8em;">
							<div style="margin:2%">
								Click the thumbnails on the left for a larger image. The description connected to the clicked image is displayed here.<br>
							</div>
						</div>
					</div>
				</div>
		
				<div id="imgsrc" style="visibility:hidden; position:absolute">
					<img src="BS9097.jpg">
					<img src="BS9092.jpg">
					<img src="BS9084.jpg">
					<img src="BS9064.jpg">
					<img src="BS9050.jpg">
					<img src="BS9070.jpg">
					<img src="BS9079.jpg">
					<img src="BS9068.jpg">
					<img src="BS9039.jpg">
				</div>
		
				<div id="txtsrc" style="visibility:hidden">
					<div>
						<h2>the river</h2><br>Awaken from my nap by the river
					</div>
					<div>
						<h2>transparency</h2><br>Its transparency was hypnotizing.
					</div>
					<div>
						<h2>cold</h2><br>Currents of cold water played with light.
					</div>
					<div>
						<h2>sank in</h2><br>I threw a few nuts into the river. They floated for a while, then sank in.
					</div>
					<div>
						<h2>masked</h2><br>A wide stepping stone masked the water's depth.
					</div>
					<div>
						<h2>a glimpse</h2><br>Later on, I had a glimpse of the river's bed.
					</div>
					<div>
						<h2>forgotten</h2><br>The wheelchair made a noise. Again, I had forgotten about my legs.
					</div>
					<div>
						<h2>floated</h2><br>Still, I floated in oblivion of things too real.
					</div>
					<div>
						<h2>for me</h2><br>I stared fixedly at the water's open arms. The stream was singing for me.
					</div>
				</div>
				<!-- crossbrowser images_loading_bar - Gerard Ferrandez -  www.dhteumeuleu.com  - Feb 2005 -->
				<span id="LB0" style="position:absolute;left:50%;top:50%;">
					<span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50;top:-18">Loading...</span>
					<span style="position:absolute;left:-50;top:-5;font-size:1px;width:100;height:10px;background:#333">
						<span id=LB1 style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;background:#FFFFFF"></span>
					</span>
				</span>
				<script>
					m00=document.getElementById("imgsrc").getElementsByTagName("img");
					m01=m00.length;
					function images_loading_bar()
					{
					m02=0;
					for(i=0;i<m01;i++)
					m02+=(m00[i].complete)?1:0;
					
					document.getElementById("LB1").style.width=Math.round(m02/m01*100);
					if(m02==m01)
					setTimeout("document.getElementById('LB0').style.display='none'",128); 
					else 
					setTimeout("images_loading_bar()", 64);
					};
					images_loading_bar();
				</script>
				<!-- end of images_loading_bar code -->
				
		</div>

		
		<div class="bas">
		  
		</div>
</div>		
</body>
</html>

[/i][/i]

Sujet clos