IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Deux scripts innovants en conflit


Sujet :

JavaScript

  1. #1
    Membre éprouvé Avatar de speedev
    Profil pro
    Développeur Web
    Inscrit en
    Mai 2006
    Messages
    1 051
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 051
    Par défaut Deux scripts innovants en conflit
    Bonjour,

    J'utilise deux scripts sur un projet de développement au boulot qui s'entrechoquent.
    J'utilise "pngfix.js" permettant l'activation de la transparence partielle des image png sur tous navigateurs (IE en l'occurence...), ainsi que "swfobject.js", script relativement récent qui pare la mise à jour d'IE (de ces derniers mois) destinée à bloquer les animations flash et composants activeX (voir solution : http://blog.deconcept.com/flashobject/).
    Le soucis est que swfobject.js annule pngfix.js, en gros la transparence partielle de mes images png n'est plus là et c'est moche!

    Pas question de passer au gif bien entendu.
    Pas question non plus de subir la mise à jour Microsoft qui bloque toutes les animations flash. (discussion à ce propos: http://www.webrankinfo.com/forums/viewtopic_47313.htm)

    Ce problème relève du développement javascript et je n'ai personnellement pas pu le soulever!

    Bon il y a de fortes chances que je sois le premier à avoir ce soucis en manipulant ces deux scripts mais quitte à faire plancher tout le monde dès maintenant...

    On en entendra parler ^^

    a+

  2. #2
    Membre éprouvé Avatar de speedev
    Profil pro
    Développeur Web
    Inscrit en
    Mai 2006
    Messages
    1 051
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 051
    Par défaut Une piste
    Alors après deux minutes de déboggage j'ai une petite piste ou plutot la solution ou plutot non j'ai trouvé ce qui déconne.
    - Pngfix.js créer un <span> pour l'image PNG et lui applique la propriété css de transparence "filter: progid: DXImageTransform...." ...
    - La propriété utilisant un composant DirectX (DX)...
    - La mise à jour IE bloquant ces composants...

    ...de fil en aiguille...et paf!
    Ca s'entrechoque! SwfObject.js ne déboggue pas tous les composants DX apparement.

    Donc merci de me le redévelopper ...

    Non ça ira merci je vais le faire lol.

    a+

  3. #3
    Membre éprouvé Avatar de speedev
    Profil pro
    Développeur Web
    Inscrit en
    Mai 2006
    Messages
    1 051
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 051
    Par défaut Erreur
    Bon bon j'ai revu tout ça et je vais reformuler ma question car je suis pas très explicite là.

    - la récente mise à jour IE bloque les anim swf et qlq composants DX
    - j'utilise pngfix.js pour activer la transparence partielle des images png dans IE
    - pngfix.js applique un composant DX sous-forme de propriété CSS (progid) pour mettre de l'alpha ^^.
    - swfobject.js permet de ne pas passer par les balises <object> et <embed> (reconnu maintenant par IE comme nocives et auto-bloquées...) et de mettre l'animation flash dans un div tel que, dans notre page web, pour une animation flash, il suffit de mettre un div + un petit script:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div id="anim1">L'animation flash sera placée ici après interpretation du   code</div>
     
    <script type="text/javascript">
    var so = new SWFObject("animationflash.swf", "mymovie", "109", "25", "7");
    so.write("anim1");
    </script>
    Qd je retire swfobject.js, pngfix.js fonctionne (transparence de toutes les images ok).
    Qd je réinsère swfobject.js, pngfix.js ne fonctionne plus.

    En aucun cas swfobject n'a de rapport avec l'activeX seulement je suis sûr qu'il bloque quelque chose!!! Et je ne vois pas quoi...

    Une peluche pour le gagnant qui connait la solution.

    kenav'

  4. #4
    Membre éprouvé Avatar de speedev
    Profil pro
    Développeur Web
    Inscrit en
    Mai 2006
    Messages
    1 051
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 051
    Par défaut Toujours bloqué
    Et bien re-bonjour, me revoilà à replancher sur ce mm soucis et je m'en sors pas! Je vais vous filer les codes qd mm au cas où ça vous parle!

    pngfix.js (gère la transparence partielle des images png)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
     
    var arVersion = navigator.appVersion.split("MSIE")
    var version = parseFloat(arVersion[1])
     
    if ((version >= 5.5) && (document.body.filters)) 
    {
       for(var i=0; i<document.images.length; i++)
       {
          var img = document.images[i]
          var imgName = img.src.toUpperCase()
          if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
          {
             var imgID = (img.id) ? "id='" + img.id + "' " : ""
             var imgClass = (img.className) ? "class='" + img.className + "' " : ""
             var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
             var imgStyle = "display:inline-block;" + img.style.cssText 
             if (img.align == "left") imgStyle = "float:left;" + imgStyle
             if (img.align == "right") imgStyle = "float:right;" + imgStyle
             if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
             var strNewHTML = "<span " + imgID + imgClass + imgTitle
             + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
             + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
             + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
             img.outerHTML = strNewHTML
             i = i-1
          }
       }
    }
    Et voici swfobject.js (pour l'affichage des anim flash dans des divs afin de ne pas subir la sécurité imposé par internet explorer à savoir un clic sur l'anim pour l'activer)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
     
    if(typeof deconcept == "undefined") var deconcept = new Object();
    if(typeof deconcept.util == "undefined") deconcept.util = new Object();
    if(typeof deconcept.SWFObjectUtil == "undefined") deconcept.SWFObjectUtil = new Object();
    deconcept.SWFObject = function(swf, id, w, h, ver, c, useExpressInstall, quality, xiRedirectUrl, redirectUrl, detectKey){
    	if (!document.createElement || !document.getElementById) { return; }
    	this.DETECT_KEY = detectKey ? detectKey : 'detectflash';
    	this.skipDetect = deconcept.util.getRequestParameter(this.DETECT_KEY);
    	this.params = new Object();
    	this.variables = new Object();
    	this.attributes = new Array();
    	if(swf) { this.setAttribute('swf', swf); }
    	if(id) { this.setAttribute('id', id); }
    	if(w) { this.setAttribute('width', w); }
    	if(h) { this.setAttribute('height', h); }
    	if(ver) { this.setAttribute('version', new deconcept.PlayerVersion(ver.toString().split("."))); }
    	this.installedVer = deconcept.SWFObjectUtil.getPlayerVersion(this.getAttribute('version'), useExpressInstall);
    	if(c) { this.addParam('bgcolor', c); }
    	var q = quality ? quality : 'high';
    	this.addParam('quality', q);
    	this.setAttribute('useExpressInstall', useExpressInstall);
    	this.setAttribute('doExpressInstall', false);
    	var xir = (xiRedirectUrl) ? xiRedirectUrl : window.location;
    	this.setAttribute('xiRedirectUrl', xir);
    	this.setAttribute('redirectUrl', '');
    	if(redirectUrl) { this.setAttribute('redirectUrl', redirectUrl); }
    }
    deconcept.SWFObject.prototype = {
    	setAttribute: function(name, value){
    		this.attributes[name] = value;
    	},
    	getAttribute: function(name){
    		return this.attributes[name];
    	},
    	addParam: function(name, value){
    		this.params[name] = value;
    	},
    	getParams: function(){
    		return this.params;
    	},
    	addVariable: function(name, value){
    		this.variables[name] = value;
    	},
    	getVariable: function(name){
    		return this.variables[name];
    	},
    	getVariables: function(){
    		return this.variables;
    	},
    	getVariablePairs: function(){
    		var variablePairs = new Array();
    		var key;
    		var variables = this.getVariables();
    		for(key in variables){
    			variablePairs.push(key +"="+ variables[key]);
    		}
    		return variablePairs;
    	},
    	getSWFHTML: function() {
    		var swfNode = "";
    		if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) { // netscape plugin architecture
    			if (this.getAttribute("doExpressInstall")) this.addVariable("MMplayerType", "PlugIn");
    			swfNode = '<embed type="application/x-shockwave-flash" src="'+ this.getAttribute('swf') +'" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'"';
    			swfNode += ' id="'+ this.getAttribute('id') +'" name="'+ this.getAttribute('id') +'" ';
    			var params = this.getParams();
    			 for(var key in params){ swfNode += [key] +'="'+ params[key] +'" '; }
    			var pairs = this.getVariablePairs().join("&");
    			 if (pairs.length > 0){ swfNode += 'flashvars="'+ pairs +'"'; }
    			swfNode += '/>';
    		} else { // PC IE
    			if (this.getAttribute("doExpressInstall")) this.addVariable("MMplayerType", "ActiveX");
    			swfNode = '<object id="'+ this.getAttribute('id') +'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'">';
    			swfNode += '<param name="movie" value="'+ this.getAttribute('swf') +'" />';
    			var params = this.getParams();
    			for(var key in params) {
    			 swfNode += '<param name="'+ key +'" value="'+ params[key] +'" />';
    			}
    			var pairs = this.getVariablePairs().join("&");
    			if(pairs.length > 0) {swfNode += '<param name="flashvars" value="'+ pairs +'" />';}
    			swfNode += "</object>";
    		}
    		return swfNode;
    	},
    	write: function(elementId){
    		if(this.getAttribute('useExpressInstall')) {
    			// check to see if we need to do an express install
    			var expressInstallReqVer = new deconcept.PlayerVersion([6,0,65]);
    			if (this.installedVer.versionIsValid(expressInstallReqVer) && !this.installedVer.versionIsValid(this.getAttribute('version'))) {
    				this.setAttribute('doExpressInstall', true);
    				this.addVariable("MMredirectURL", escape(this.getAttribute('xiRedirectUrl')));
    				document.title = document.title.slice(0, 47) + " - Flash Player Installation";
    				this.addVariable("MMdoctitle", document.title);
    			}
    		}
    		if(this.skipDetect || this.getAttribute('doExpressInstall') || this.installedVer.versionIsValid(this.getAttribute('version'))){
    			var n = (typeof elementId == 'string') ? document.getElementById(elementId) : elementId;
    			n.innerHTML = this.getSWFHTML();
    			return true;
    		}else{
    			if(this.getAttribute('redirectUrl') != "") {
    				document.location.replace(this.getAttribute('redirectUrl'));
    			}
    		}
    		return false;
    	}
    }
     
    /* ---- detection functions ---- */
    deconcept.SWFObjectUtil.getPlayerVersion = function(reqVer, xiInstall){
    	var PlayerVersion = new deconcept.PlayerVersion([0,0,0]);
    	if(navigator.plugins && navigator.mimeTypes.length){
    		var x = navigator.plugins["Shockwave Flash"];
    		if(x && x.description) {
    			PlayerVersion = new deconcept.PlayerVersion(x.description.replace(/([a-z]|[A-Z]|\s)+/, "").replace(/(\s+r|\s+b[0-9]+)/, ".").split("."));
    		}
    	}else{
    		try{
    			var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
    			for (var i=3; axo!=null; i++) {
    				axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+i);
    				PlayerVersion = new deconcept.PlayerVersion([i,0,0]);
    			}
    		}catch(e){}
    		if (reqVer && PlayerVersion.major > reqVer.major) return PlayerVersion; // version is ok, skip minor detection
    		// this only does the minor rev lookup if the user's major version 
    		// is not 6 or we are checking for a specific minor or revision number
    		// see http://blog.deconcept.com/2006/01/11/getvariable-setvariable-crash-internet-explorer-flash-6/
    		if (!reqVer || ((reqVer.minor != 0 || reqVer.rev != 0) && PlayerVersion.major == reqVer.major) || PlayerVersion.major != 6 || xiInstall) {
    			try{
    				PlayerVersion = new deconcept.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));
    			}catch(e){}
    		}
    	}
    	return PlayerVersion;
    }
    deconcept.PlayerVersion = function(arrVersion){
    	this.major = parseInt(arrVersion[0]) != null ? parseInt(arrVersion[0]) : 0;
    	this.minor = parseInt(arrVersion[1]) || 0;
    	this.rev = parseInt(arrVersion[2]) || 0;
    }
    deconcept.PlayerVersion.prototype.versionIsValid = function(fv){
    	if(this.major < fv.major) return false;
    	if(this.major > fv.major) return true;
    	if(this.minor < fv.minor) return false;
    	if(this.minor > fv.minor) return true;
    	if(this.rev < fv.rev) return false;
    	return true;
    }
    /* ---- get value of query string param ---- */
    deconcept.util = {
    	getRequestParameter: function(param){
    		var q = document.location.search || document.location.hash;
    		if(q){
    			var startIndex = q.indexOf(param +"=");
    			var endIndex = (q.indexOf("&", startIndex) > -1) ? q.indexOf("&", startIndex) : q.length;
    			if (q.length > 1 && startIndex > -1) {
    				return q.substring(q.indexOf("=", startIndex)+1, endIndex);
    			}
    		}
    		return "";
    	}
    }
     
    /* add Array.push if needed (ie5) */
    if (Array.prototype.push == null) { Array.prototype.push = function(item) { this[this.length] = item; return this.length; }}
     
    /* add some aliases for ease of use/backwards compatibility */
    var getQueryParamValue = deconcept.util.getRequestParameter;
    var FlashObject = deconcept.SWFObject; // for legacy support
    var SWFObject = deconcept.SWFObject;
    Ces deux scripts ne sont pas de moi mais ils sont faciles à comprendre.
    Reste à savoir pourquoi swfobject.js annule pngfix.js??????? je ne vois pas où ça coince!!

  5. #5
    Membre éprouvé Avatar de speedev
    Profil pro
    Développeur Web
    Inscrit en
    Mai 2006
    Messages
    1 051
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 051
    Par défaut Solution trouvee
    Bon après qlq heures...j'ai trouvé! Ouf!
    On devrait me dédier cette page tient! lol

    J'ai trouvé un deuxième script gérant la transparence partielle des images PNG sans être compromis par le fameux swfobject.js qui est, je le reconnais, fort génial, je l'ai utilisé partout!

    Bientôt tout le monde devra l'utiliser sauf si Microsoft s'écroule (espoir...).

    voici le pngfix.js adapté au swfobject.js:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    function correctPNG()
       {
       for(var i=0; i<document.images.length; i++)
          {
    	  var img = document.images[i]
    	  var imgName = img.src.toUpperCase()
    	  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
    	     {
    		 var imgID = (img.id) ? "id='" + img.id + "' " : ""
    		 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
    		 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
    		 var imgStyle = "display:inline-block;" + img.style.cssText 
    		 var imgAttribs = img.attributes;
    		 for (var j=0; j<imgAttribs.length; j++)
    			{
    			var imgAttrib = imgAttribs[j];
    			if (imgAttrib.nodeName == "align")
    			   {		  
    			   if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle
    			   if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle
    			   break
    			   }
                }
    		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
    		 strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
    	     strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
    		 strNewHTML += "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
    		 img.outerHTML = strNewHTML
    		 i = i-1
    	     }
          }
       }
    window.attachEvent("onload", correctPNG);
    Et voilà le travaiiiil!

    kenav'

  6. #6
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    euh... ??

  7. #7
    Expert confirmé

    Avatar de denisC
    Profil pro
    Développeur Java
    Inscrit en
    Février 2005
    Messages
    4 050
    Détails du profil
    Informations personnelles :
    Âge : 45
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Service public

    Informations forums :
    Inscription : Février 2005
    Messages : 4 050
    Par défaut
    Citation Envoyé par speedev
    Et voilà le travaiiiil!

    kenav'
    Beau monologue

    De toute façon, avec IE7, il faudra changer tous ces scripts

  8. #8
    Membre expérimenté Avatar de fred777888999
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    250
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2005
    Messages : 250
    Par défaut
    En primes si je me souviens bien le rendu des couleurs transparentes en pgn avec ce type de script est loin d'etre precis et on constate souvent meme a l'oeil nu des differences de tons.
    Cette quantite d'effort pour ne pas utiliser de gif merite l'admiration et me ferait penser a qq qui s'obstinerai a courrir le 100m a cloche pied plutot que d'utiliser ses deux jambes, mais comme disait cyrano, c'est encore plus beau quand c'est inutile....
    ++
    Fred.

  9. #9
    Membre éprouvé Avatar de speedev
    Profil pro
    Développeur Web
    Inscrit en
    Mai 2006
    Messages
    1 051
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 051
    Par défaut Hohoho
    La différence de ton des couleurs transparentes sur les images PNG (et il n'y en a qu'une pour ma part...) c'est pour les pô bien doués en graphisme .
    Mais quitte à ce que ça serve à quelqu'un qui fait des gifs po très beaux-->.pour un rendu parfait il faut utiliser un brossage des bords de l'image png avec une rigidité à 80% (environ hein...), vue sous photoshop, paint shop pro, zbrush2 etc...etc...partout quoi seulement faut le savoir!
    Les images GIF utilisent 256 couleurs...nettement inférieurs au nombre de couleurs que je peux me permettre sur mes PNGs. Je ne dispose d'aucun aliasing et c'est beau...très beau et je suis content!

    J'éviterai les monologues la prochaine fois... c'est que je m'attendais à un peu plus de réactivité mais c'est pô grave, ça marche!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Conflit entre deux script
    Par spacees dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 04/09/2011, 00h39
  2. [MooTools] Conflit entre deux scripts utilisant du Mootools
    Par kurkaine dans le forum Bibliothèques & Frameworks
    Réponses: 6
    Dernier message: 24/02/2011, 19h59
  3. Conflit entre deux scripts jquery imbriqués
    Par silgan dans le forum jQuery
    Réponses: 2
    Dernier message: 17/12/2010, 10h41
  4. conflit entre deux scripts
    Par nebil dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 19/08/2010, 13h56
  5. Conflit entre deux script javascript
    Par Tyrael62 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 18/06/2008, 09h39

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo