salut a tous ...
j'ai un petit souçis avec IE, j'ai créer une méthode qui permet d'afficher une image après son chargement dans le cache du navigateur, mais sous ie , l'image ne s'affiche que lors du 2 eme click
sous firefox aucun souçis ...
url de démo : http://easynews.free.fr/easy_finalv2/
choisissez la 1ere galerie par exemple et clicker sur l'oeil.
le script qui s'occupe de charger l'image
merci a tous
j'ai un petit souçis avec IE, j'ai créer une méthode qui permet d'afficher une image après son chargement dans le cache du navigateur, mais sous ie , l'image ne s'affiche que lors du 2 eme click
sous firefox aucun souçis ...url de démo : http://easynews.free.fr/easy_finalv2/
choisissez la 1ere galerie par exemple et clicker sur l'oeil.
le script qui s'occupe de charger l'image
var coeff=4;//Coefficient de reduction
var chang=null;
var style="width:120px; border:3px solid #666666;position:absolute;left: 50%;top: 50%;margin-left:-60px; text-align:center";
//var styleImg="display:none;";
function initialiser(source){
navigateur = cherche_navigateur_simple();
coeff = 4;
if(document.getElementById("madiv")){
//on supprime la précédente image
var divaSupp = document.getElementById("madiv");
var imgaSupp = document.getElementById("monimg");
divaSupp.removeChild(imgaSupp);
document.body.removeChild(divaSupp);
}
if (navigateur == "ie") {
//on créer un nouvel élément html de type div
var newdiv = document.createElement('div');
//On affecte un attribut de type id, avec l'id précédement créé
newdiv.setAttribute("id","madiv");
//on affecte le style a la div
newdiv.style.setAttribute("cssText",style);
//on créer la div dans le body
document.body.appendChild(newdiv);
//on créer un nouvel élément html de type image
var newImg = document.createElement('img');
//on affecte la source a l'image qui viens d'etre créé
newImg.setAttribute("src",source);
//affectation d'un id a l'image
newImg.setAttribute("id","monimg");
//On assigne les variable de hauteur et largeur AVANT d'appliquer la propriété display:none
var largeur = newImg.getAttribute("width");
var hauteur = newImg.getAttribute("height");
//on affecte un style a l'image
newImg.style.setAttribute("cssText","display:none;");
//affectation du onclick
newImg.onclick =masqueAgrandissement;
//on crée l'image dans la div
newdiv.appendChild(newImg);
//newImg.style.setAttribute("cssText",styleImg);
//création d'une image our faire patienter pendant le chargement
var newImgTemp = document.createElement('img');
//on affecte la source a l'image qui viens d'etre créé
newImgTemp.setAttribute("src","images/chargement-en-cours.gif");
//affectation d'un id a l'image
newImgTemp.setAttribute("id","imgTemp");
//on ajoute l'image dans la div [smile]<br />
newdiv.appendChild(newImgTemp);
}
else {
//on créer un nouvel élément html de type div
var newdiv = document.createElement('div');
//On affecte un attribut de type id, avec l'id précédement créé
newdiv.setAttribute("id","madiv");
//on affecte le style a la div
newdiv.setAttribute("style",style);
//on créer la div dans le body
document.body.appendChild(newdiv);
//on créer un nouvel élément html de type image
var newImg = document.createElement('img');
//on affecte la source a l'image qui viens d'etre créé
newImg.setAttribute("src",source);
//affectation d'un id a l'image
newImg.setAttribute("id","monimg");
//affectation du onclick
newImg.setAttribute("onclick","masqueAgrandissement();");
newImg.setAttribute("style","display:none;");
//on crée l'image dans la div
newdiv.appendChild(newImg);
//création d'une image our faire patienter pendant le chargement
var newImgTemp = document.createElement('img');
//on affecte la source a l'image qui viens d'etre créé
newImgTemp.setAttribute("src","images/chargement-en-cours.gif");
//affectation d'un id a l'image
newImgTemp.setAttribute("id","imgTemp");
//on assigne le style display:none a l'image pour eviter un bug sous firefox;
//newImg.setAttribute("style",styleImg);
//on ajoute l'image dans la div [smile]<br />
newdiv.appendChild(newImgTemp);
}
//on définit le timer et on appel la fonction qui va controler si l'image est charger
actif=setTimeout('controleChargement(\''+hauteur+'\',\''+largeur+'\')',300);
}
function changer(largeur,hauteur){
if ( parseInt(document.getElementById("madiv").style.width) != largeur ) {
document.getElementById("monimg").style.display = "block";
document.getElementById("monimg").style.display = "block";
document.getElementById("madiv").style.visibility = "visible";
coeff = coeff-0.2;
document.getElementById("madiv").style.width = Math.round(largeur/coeff)+"px";
document.getElementById("madiv").style.height = Math.round(hauteur/coeff)+"px";
document.getElementById("monimg").style.width = document.getElementById("madiv").style.width
document.getElementById("monimg").style.height = document.getElementById("madiv").style.height
document.getElementById("madiv").style.marginLeft = -(parseInt(document.getElementById("madiv").style.width) /2)+"px";
document.getElementById("madiv").style.marginTop = -(parseInt(document.getElementById("madiv").style.height) /2)+"px";
chang=window.setTimeout('changer("'+largeur+'","'+hauteur+'");',60);//vitesse de l'effet
}
else {
window.clearTimeout(chang);
}
}
function masqueAgrandissement(){
var divaSupp = document.getElementById("madiv");
var imgaSupp = document.getElementById("monimg");
divaSupp.removeChild(imgaSupp);
document.body.removeChild(divaSupp);
}
function cherche_navigateur_simple() {
// on crée la variable qui accueillera le message relatif au navigateur
var navigateur = "";
// Attention, l'ordre de recherche est important !! Parce que IE reprend la mention 'Mozilla' et Opera reprend la mention 'MSIE' !!
// on teste si on trouve la mention 'Opera...' dans le nom du navigateur
if ( navigator.userAgent.indexOf('Opera 5') != -1 ) { navigateur = 'Vous utilisez un navigateur alternatif'; }
// on teste si on trouve la mention 'MSIE' dans le nom du navigateur
else if ( navigator.userAgent.indexOf('MSIE') != -1 ) { navigateur = 'ie'; }
else if ( navigator.userAgent.indexOf('Mozilla') != -1 ) { navigateur = 'gecko'; }
// si rien n'a été reconnu...
else { navigateur = 'Vous utilisez un navigateur alternatif'; }
// on affecte la variable 'navigateur' au formulaire
return navigateur;
}
function controleChargement(hauteur,largeur){
window.clearTimeout(actif);
if(document.getElementById("monimg").complete){ // image complètement chargée
//alors on supprime l'image temporaire
var divaSupp = document.getElementById("madiv");
var imgaSupp = document.getElementById("imgTemp");
divaSupp.removeChild(imgaSupp);
if(navigateur == "ie"){
//document.getElementById("monimg").style.display = "block";
document.getElementById("madiv").style.display = "block";
document.getElementById("madiv").style.visibility = "hidden";
}
else{
//sous firefox on récupère les propriétés après le chargement de l'image
var largeur = document.getElementById("monimg").width
var hauteur = document.getElementById("monimg").height
}
//alert(document.getElementById("monimg").width);
if(largeur > 800 || hauteur > 600){
var infoImg = redimImage(largeur, hauteur,800,600);
largeur = infoImg[0];
hauteur = infoImg[1];
}
changer(largeur,hauteur);
}
else {
actif=setTimeout('controleChargement(\''+hauteur+'\',\''+largeur+'\')',1000)
}
}merci a tous