18041 sujets

Questions générales et questions de débutants

Bug entre 2scripts [résolu en remplacen un des deux scripts]

Bonjour je suis bien plus que débutant en ce qui concerne le javascript "copier coller pas plus" (pas de soucis pour le html css).

Voila je me retrouve confronté à une incompabilité entre 2 scripts javascript.

Le premier permet de fair un préload de la page. Le deuxième permet d'afficher une image quelque part dans la page au passage de la souris.
(lorsque le deuxième script est présent sur la page le préload reste bloqué "j ai esseyer d'afficher les images en dehor de la zone de vision de la page pour peutaitre règlet le soucis du préload qui ce bloque, ceci n'arrange rien").

le lien vous montrera ce que sa donne avec le bug
http://www.jonathanm-photographie.com/galerie22.html


voici la page avec les deux script


=============
index.html
-----------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="1.css" media="screen" />
<script type="text/javascript" src="js/preload.js"></script>
<script>
<!--

var content=new Array()
//change the array below to the text associated with your links Expand or contract the array, depending on how many links you have
content[0]='<img width="1px" height="1px" border="0px" src="images/t1.gif" />'
content[1]='<img width="288px" height="383px" border="0px" src="images/photo_1.jpg" />'
content[2]='<img width="288px" height="383px" border="0px" src="images/photo_2.jpg" />'
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
appear()
setTimeout("window.onresize=regenerate",450)
}
}

function changetext(whichcontent){

if (document.all||document.getElementById){
cross_el=document.getElementById? document.getElementById("descriptions"):document.all.descriptions
cross_el.innerHTML='<font face="Verdana"><small>'+whichcontent+'<font></small>'
}
else if (document.layers){
document.d1.document.d2.document.write('<font face="Verdana"><small>'+whichcontent+'</small></font>')
document.d1.document.d2.document.close()
}

}

function appear(){
document.d1.visibility='show'
}

window.onload=regenerate2

//-->
</script>
</head>
<body><div id="preloadIMG"><img src="images/load.gif" width="30px" height="30px" alt="" /></div><br /><br /><br />
<div id="global2b">
	<ul id="photo1"><li id="photo2">
	<ilayer id="d1" width="200px" height="200px" visibility="hide">
	<layer id="d2" width="200px" height="200px">
	<div id="descriptions" align="center">
	<!--Change below to default content of your own-->
	<!--Stop editting-->
	</div>
	</layer>
	</ilayer></li></ul>

	<ul id="load1"><li id="load2">
		<img src="images/photo_1.jpg" width="1px" height="1px" border="0px" />
		<img src="images/photo_2.jpg" width="1px" height="1px" border="0px" />
	</li></ul>

	<div id="contenu2">
		<a href="galerie_1.html" target="_top" onMouseover="changetext(content[1])" onmouseout="changetext(content[0])">Galerie 1</a><br />
		<a href="galerie_2.html" target="_top" onMouseover="changetext(content[2])" onmouseout="changetext(content[0])">Galerie 2</a><br />
	</div>

</div>

</body>
</html>



=============
1.css
-----------------

#preloader {
	position:absolute; 
	background-color: #0c1508; 
	height:100%; 
	width:100%;
	display:none;
	z-index:100; /* Mettez le z-index au-dessus des autres */
}
#preloadIMG {
	position:absolute;
	left:50%;
	width:100px;
	margin-left:-10px;
	height:100px;
	top:150px;
}
#global2 {
	position: relative;
	margin: 0 auto;
	padding-top: 0px;
	width: 850px;
	height: 533px;
	background: url(images/fond02.jpg);
}
#contenu2 {
	padding: 0 5px;
	position: absolute;
	top: 86px;
	left: 660px;
	width: 140px;
	height: 399px;
	overflow: auto;
	margin: 0 auto;
}
#photo1 {
	margin: 0;
	padding: 0;
	list-style: none;
}
#photo1 li {
	position: absolute;

}
#photo2 {
	top: 94px;
	left: 364px;
}
#load1 {
	margin: 0;
	padding: 0;
	list-style: none;
}
#load1 li {
	position: absolute;

}
#load2 {
	top: 50px;
	left: -9000px;
}



=============
js/preload.js
-----------------

var speed = 10;
var transition = 10;

// Dimensions du preloader en GIF animé
var GIFpreloadLargeur = 10;
var GIFpreloadHauteur = 10;

var timer= 0;
var opaciT = 100;

function opacity()
{
    opaciT = opaciT - transition;

    var object = document.getElementById('preloader').style;
    object.opacity = (opaciT / 100);
    object.MozOpacity = (opaciT / 100);
    object.KhtmlOpacity = (opaciT / 100);
    object.filter = "alpha(opacity=" + opaciT + ")";
       
        if (opaciT <= 0)
        {
                document.getElementById('preloader').style.visibility='hidden';
                clearInterval(timer);
        }

}
 
function preload()
{
        if (document.getElementById)
        {
                document.getElementById('preloadIMG').style.visibility='hidden';
                timer = setInterval("opacity()",speed);
        }
       
        else
        {
                if (document.layers)
                {       
                        document.preloadIMG.visibility = 'hidden';
                        timer = setInterval("opacity()",speed);
            }
                else
                {
                        document.all.preloadIMG.style.visibility = 'hidden';
                        timer = setInterval("opacity()",speed);
                }
        }
}

// GÉNÉRER LE CSS POUR LE PRELOADER
var myCSS;
myCSS = "<style type=\"text/css\">";

myCSS += "html, body { height:auto; margin:0px; padding:0px;}";

myCSS += "#preloader {";
myCSS += "position:fixed;";
myCSS += "background-color: #0c1508;";
myCSS += "width:100%;";
myCSS += "height:100%; ";
myCSS += "display:block;";
myCSS += "z-index:100000;";
myCSS += "}";

myCSS += "#preloadIMG {";
myCSS += "position:absolute;";
myCSS += "left:50%;";
myCSS += "width:" + GIFpreloadLargeur + "px;";
myCSS += "height:" + GIFpreloadHauteur + "px;";
myCSS += "margin-left:-" + (GIFpreloadLargeur / 2) + "px;";
myCSS += "top:150px;";
myCSS += "}";

myCSS += "</style>";

// ÉCRITURE DES CSS
window.document.write(myCSS);

// ÉXÉCUTION
window.onload = function() { preload(); }




Je poste aujourd'hui en espérant comprendre pourquoi ceci ne fonctionne pas corectement, et pour je l'espère trouver une solution.

Les divers solutions que j ai eu sans pouvoir les mettre réelement en pratique ou qui n'ont pas fonctionner :
-Ne plus préload la page mais laisser néamoins le fondu sur la page que la fin du script génère (pour ne pas casser la navigation du site avec une intro brute uniquement sur une page)
-scripter l'affichage d'image en css (ce que j ai fait sans soucis majeur, seul problème le menu pilote ce trouve dans une fenaitre en overflow, et je n'est pas trouvé le moyen pour afficher les images en dehors de cette fenaitre).


Merci d'avance pour vos réponces conceilles et aides.

Joe
Modifié par joejoe (20 Aug 2007 - 09:15)
Sujet clos
Aller à