11548 sujets

JavaScript, DOM et API Web HTML5

Alors je vous explique mon probleme , j'utilise ce code pour mon menu

window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
window.onload=ctnoecl;
var ct1=new Image();
ct1.src="contact.png";
var ct2=new Image();
ct2.src="contacth.png";

function ctecl(){
  document.images.ct.src=ct2.src;
  
}

function ctnoecl(){
  document.images.ct.src=ct1.src;

}
window.onload=frnoecl;
var fr1=new Image();
fr1.src="formation.png";
var fr2=new Image();
fr2.src="formationh.png";

function frecl(){
  document.images.fr.src=fr2.src;
}

function frnoecl(){
  document.images.fr.src=fr1.src;
}
window.onload=prnoecl;
var pr1=new Image();
pr1.src="present.png";
var pr2=new Image();
pr2.src="presenth.png";

function precl(){
  document.images.pr.src=pr2.src;
}

function prnoecl(){
  document.images.pr.src=pr1.src;
}
window.onload=lknoecl;
var lk1=new Image();
lk1.src="liens.png";
var lk2=new Image();
lk2.src="liensh.png";

function lkecl(){
  document.images.lk.src=lk2.src;
}

function lknoecl(){
  document.images.lk.src=lk1.src;
}


Ensuite pour afficher mes png 24 sous IE j'utilise sa:
/**********************************************************
Sleight Simple
  (c) 2001, Aaron Boodman
   http://www.youngpup.net
 

Sleight Background
  (c) 2001, Aaron Boodman
  (c) 2003, Drew McLellan
   http://www.allinthehead.com
 
**********************************************************/
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
        window.attachEvent("onload", alphaBackgrounds);
       
        document.writeln('<style type="text/css">img { visibility:hidden; } </style>');
        window.attachEvent("onload", fnLoadPngs);
}
// Sleight Background
function alphaBackgrounds(){
        var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
        var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
        for (i=0; i<document.all.length; i++){
                var bg = document.all[i].currentStyle.backgroundImage;
                if (itsAllGood && bg){
                        if (bg.match(/\.png/i) != null){
                                var mypng = bg.substring(5,bg.length-2);
                                document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
                                document.all[i].style.backgroundImage = "url('/assets/images/x.gif')";
                        }
                }
        }
}
// Sleight Simple
function fnLoadPngs()
{
        var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
        var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);

        for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--)
        {
                if (itsAllGood && img.src.match(/\.png$/i) != null)
                {
                        var src = img.src;
                        var div = document.createElement("DIV");
                        div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizing='scale')"
                        div.style.width = img.width + "px";
                        div.style.height = img.height + "px";
                        img.replaceNode(div);
                }
                img.style.visibility = "visible";
        }
}


Alors niveau png sa marche mai quand j'ai rejouter ce correctif png sa m'a flinguer mon menu "interractif" , les png sont afficher nikel mais il ne change plus comme il devrait(ceux du menu hein).
Si vous avez une idée j'avou que je suis perdu la Smiley bawling [/i][/i][/i][/i]
Modifié par 0zef (04 Aug 2007 - 21:17)
Le gros problème de ce script qui est sensé arrangé le png 24, c'est qu'il remplace les balises <img /> par des <div>.
Le problème vient surement de là, surtout si tu as des règles CSS importante style xxx img {} pour ton menu...
Oui j'ai remarquer sa en fait du coup j'ai abandonner je refait tt le site ^^
Et cette fois si j'evite les png , c'est un peu genant mai on fait avec Smiley biggrin
Il y' a d'autres solutions pour le png et la transparence.
Déjà tout dépend de ce qu'il y 'a derrière le PNG.

- Si ton PNG est sur un fond unicolore, voici une solution sympathique qui permet de définir une couleur d'arrière plan en remplacement de la transparence (couleur que seul IE6 et < utilise ) : http://entropymine.com/jason/tweakpng/

- Perso pour un site, j'ai utilisé une autre technique simple mais pas forcément marrante à mettre en place : une feuille de style avec png, et une autre de secours (pour IE6 et <) avec du gif...
Ca marche bien si tu n'as que des images décoratives (donc à placer dans une css)