11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,
J'ai trouvé un code javascript qui crée un CSS pour fonctionner, je souhaiterai qu'il ne le fasse pas mais qu'il est plutôt un lien vers une feuille de style.http://forum.alsacreations.com/smilies/prie.gif

<!--
// Vous pouvez changer la vitesse (speed) (1 == tres rapide)
// Vous pouvez changer la qualité de la transition (1 == best)
// Plus la transition est de qualité, plus la rapidité ralenti et doit être augmenté
var speed = 10; 
var transition = 10;

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

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:white;";
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(); }
//-->
Smiley prie Smiley prie
Modifié par okwan (03 Jul 2008 - 04:02)
Bonjour,

Eh bien c'est assez simple. Tu vires les parties «GÉNÉRER LE CSS POUR LE PRELOADER» et «ÉCRITURE DES CSS» du script JavaScript, et tu places les styles créés (dans «GÉNÉRER LE CSS POUR LE PRELOADER») dans ta feuille de styles, au début ou à la fin ou au milieu, peu importe.
heu oui ça marche si je garde la feuille de style dans ma page index or mes feuilles de styles se trouvent dans un dossier CSS c'est pour cela que je souhaiterai faire un lien vers ma feuille de style dans le fichier js.
est-il possible aussi de faire un liens vers l'image upload/16478-loading.gif
dans le js pour qui fasse son rôle au lieu de l'avoir comme import dans ma page index?


<!--
// Vous pouvez changer la vitesse (speed) (1 == tres rapide)
// Vous pouvez changer la qualité de la transition (1 == best)
// Plus la transition est de qualité, plus la rapidité ralenti et doit être augmenté
var speed = 10; 
var transition = 10;

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

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);
          } 
     }
}

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

window.document.write("<style type=\"text/css\">#preloader { display: block !important; }</style>");
Houlà, tu as l'air de pédaler dans la semoule... je me trompe?

okwan a écrit :
heu oui ça marche si je garde la feuille de style dans ma page index or mes feuilles de styles se trouvent dans un dossier CSS

Heu... ben ça change absolument rien, ça.

okwan a écrit :
c'est pour cela que je souhaiterai faire un lien vers ma feuille de style dans le fichier js.

Ce qui serait totalement idiot vu que tu peux faire ton lien directement en HTML. Smiley rolleyes

okwan a écrit :
est-il possible aussi de faire un liens vers l'image upload/16478-loading.gif
dans le js pour qui fasse son rôle au lieu de l'avoir comme import dans ma page index?

Un lien vers une image pour qu'elle joue son rôle au lieu de l'avoir comme import? Tu mélanges quelques notions, là, ça ne veut strictement rien dire cette phrase. Smiley cligne
Oui effectivement, je me suis emmêlé les pédales Smiley sweatdrop
maintenant que j'ai compris tout marche nickel!! Smiley lol
Pour l'image loading.gif je souhaiterai faire appel à elle via le js, est-ce possible?
(car là je suis obligé de faire un lien via mon fichier xhtml or je souhaiterai le faire dans le fichier js Smiley murf )