begin process at 2012 05 28 13:29:04
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR)

DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR)


 Information sur la source

Note :
Aucune note
Catégorie :Effets Classé sous :DHTML, Javascript, IE, Filtre, DOM Niveau :Initié Date de création :13/03/2011 Vu :2 229
Auteur : internetdev

Ecrire un message privé
Commentaire sur cette source (2)
Ajouter un commentaire et/ou une note

 Description

- Outils de développement pour les mise en forme sous IE.
Utilise le composant microsoft IE filtre DXImageTransform.Microsoft.Gradient pour definir une couleur dégradée sur une base de 2 couleurs et génère le code à utiliser pour informer le CSS "IE" d'un élément HTML!

- Copier et adapté à partir d'un expemple Microsoft DHTML DOM.(faut pas éxagérer)

Source

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  • <HTML>
  • <HEAD>
  • <title>Developpement - Outils - DHTML - Filtre(gradient): Applique le filtre gradient et verifie la synthaxe</title>
  • <STYLE>
  • Body { color:#445767;
  • font-family: Arial, Helvetica, sans-serif;
  • font-size:20px;
  • font-weight:15;
  • border-style:none;
  • border-width:0px; margin: 0 0 0 0;
  • }
  • td{ font-family: Arial, Helvetica, sans-serif;
  • font-size:18px;
  • font-weight:20;
  • }
  • input{ font-family:Arial, Helvetica, sans-serif;
  • font-size:14px;
  • font-weight:20;
  • border-style:solid; border-size:5;
  • filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#b99090', startColorstr='#553623', gradientType='1');
  • }
  • textarea{ font-family: Arial, Helvetica, sans-serif;
  • font-size:15px;
  • font-weight:20;
  • }
  • .drag { CURSOR: hand; POSITION: relative;
  • border-color:#CCCC66;
  • border-style:solid;
  • border-width:2px;
  • color:#FFFFFF;
  • filter:progid:DXImageTransform.Microsoft.Alpha(opacity=35);
  • HEIGHT: 16px; LEFT: 2px; TOP: 2px; WIDTH: 20px; Z-INDEX: 3;font-size:12px;font-weight:bold;text-align:center
  • }
  • .barLyr{ HEIGHT: 110px; LEFT: 8px; POSITION: absolute; TOP: 4px; WIDTH: 4px; Z-INDEX: 1}
  • .outerLyr{HEIGHT: 120px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 24px; Z-INDEX: 1}
  • .innerLyr{HEIGHT: 117px; LEFT: 2px; POSITION: absolute; TOP: 2px; WIDTH: 20px; Z-INDEX: 2}
  • .Submit { background-color:#CC6666; color:#FFFFCC; font:Verdana, Arial, Helvetica, sans-serif}
  • .Submit:hover { background-color:#6666CC; color:#FFFFCC; font:Verdana, Arial, Helvetica, sans-serif}
  • /* .drag {
  • CURSOR: hand; POSITION: relative;
  • border-color:#CCCC66;
  • border-style:solid;
  • border-width:2px;
  • color:#FFFFFF;
  • }
  • */ .barLyrR{BACKGROUND-COLOR:#664433;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#209100', gradientType='0')}
  • .barLyrG{BACKGROUND-COLOR:#446633;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#334477', startColorstr='#99AACC', gradientType='0')}}
  • .barLyrB{BACKGROUND-COLOR:#334466;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#912000', gradientType='0')}
  • .outerLyrR{BACKGROUND-COLOR:#664433;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#870043', startColorstr='#440000', gradientType='1')}
  • .outerLyrG{BACKGROUND-COLOR:#559955;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#438862', startColorstr='#88bb99', gradientType='1')}
  • .outerLyrB{BACKGROUND-COLOR:#334466;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#666299', startColorstr='#663562', gradientType='1')}
  • .innerLyrR{BACKGROUND-COLOR:#886655;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#663333', startColorstr='#875533', gradientType='1')}
  • .innerLyrG{BACKGROUND-COLOR:#698869;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#88bb99', startColorstr='#438862', gradientType='1')}
  • .innerLyrB{BACKGROUND-COLOR:#556688;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#433562', startColorstr='#436299', gradientType='1')}
  • /* .innerLyrB{BACKGROUND-COLOR:#556688;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#000000', startColorstr='#433562', gradientType='1')}
  • */
  • </STYLE>
  • <SCRIPT language="javascript">
  • // - Script by Ronald H. Jankowsky (http://rj-edv-beratung.de)
  • var sPosition;
  • var showPerc=100;
  • document.onmousedown=dragLayer;
  • document.onmouseup=new Function("dragMe=false");
  • // - var rVal, bVal, gVal;
  • var Color= new Array();
  • Color[0] = "0";Color[1] = "1";Color[2] = "2";Color[3] = "3";Color[4] = "4";Color[5] = "5";Color[6] = "6";Color[7] = "7";Color[8] = "8";Color[9] = "9";Color[10] = "a";Color[11] = "b";Color[12] = "c";Color[13] = "d";Color[14] = "e";Color[15] = "f";
  • rVal = rVal1 = gVal = gVal1 = bVal = bVal1 = 0;
  • rVal2 = rVal21 = gVal2 = gVal21 = bVal2 = bVal21 = 0;
  • // - Demofunction to change bg-color by moving slider
  • var cCol = "#000000";
  • var cCol2 = "#000000";
  • var gradPart1 = "#000000";
  • var gradPart2 = "#000000";
  • function chgBg() {
  • // cCol = document.bgColor;
  • // cCol = cCol.value;
  • rVal=cCol.substr(1,1); gVal=cCol.substr(3,1); bVal=cCol.substr(5,1);
  • rVal1=cCol.substr(2,1); gVal1=cCol.substr(4,1); bVal1=cCol.substr(6,1);
  • ind = Math.round(showPerc/16); if (ind < 0) ind = 0; if (ind > 15) ind=15;
  • // - If more sliders are used, each of them has to be handled separately
  • if (kObj.id =="knobImga"){
  • cCol="#"+Color[ind]+rVal1+gVal+gVal1+bVal+bVal1;
  • knobImga.style.backgroundColor = "#"+Color[ind]+rVal1+ "0000";
  • knobImga0.style.backgroundColor = "#"+Color[ind]+rVal1+"0000";
  • }
  • else if (kObj.id =="knobImga0"){
  • cCol="#"+rVal+Color[ind]+gVal+gVal1+bVal+bVal1;
  • knobImga.style.backgroundColor = "#"+rVal+Color[ind]+"0000";
  • knobImga0.style.backgroundColor = "#"+rVal+Color[ind]+"0000";
  • }
  • else if (kObj.id =="knobImga1"){
  • cCol="#"+rVal+rVal1+Color[ind]+gVal1+bVal+bVal1;
  • knobImga1.style.backgroundColor = "#00"+Color[ind]+gVal1+"00";
  • knobImga10.style.backgroundColor = "#00"+Color[ind]+gVal1+"00";
  • }
  • else if (kObj.id =="knobImga10"){
  • cCol="#"+rVal+rVal1+gVal+Color[ind]+bVal+bVal1;
  • knobImga1.style.backgroundColor = "#00"+gVal+Color[ind]+"00";
  • knobImga10.style.backgroundColor = "#00"+gVal+Color[ind]+"00";
  • }
  • else if (kObj.id =="knobImga2"){
  • cCol="#"+rVal+rVal1+gVal+gVal1+Color[ind]+bVal1;
  • knobImga2.style.backgroundColor = "#0000"+bVal+Color[ind];
  • knobImga20.style.backgroundColor = "#0000"+bVal+Color[ind];
  • }
  • else if (kObj.id =="knobImga20"){
  • cCol="#"+rVal+rVal1+gVal+gVal1+bVal+Color[ind];
  • knobImga2.style.backgroundColor = "#0000"+bVal+Color[ind];
  • knobImga20.style.backgroundColor = "#0000"+bVal+Color[ind];
  • }
  • valeur.value = cCol;
  • gradPart1 = cCol;
  • rVal2=cCol2.substr(1,1); gVal2=cCol2.substr(3,1); bVal2=cCol2.substr(5,1);
  • rVal21=cCol2.substr(2,1); gVal21=cCol2.substr(4,1); bVal21=cCol2.substr(6,1);
  • ind = Math.round(showPerc/16); if (ind < 0) ind = 0; if (ind > 15) ind=15;
  • // - If more sliders are used, each of them has to be handled separately
  • if (kObj.id =="knobImgb") {cCol2="#"+Color[ind]+rVal21+gVal2+gVal21+bVal2+bVal21;
  • knobImgb.style.backgroundColor = "#"+Color[ind]+rVal21+ "0000";
  • knobImgb0.style.backgroundColor = "#"+Color[ind]+rVal21+"0000";
  • }
  • else if (kObj.id =="knobImgb0"){
  • cCol2="#"+rVal2+Color[ind]+gVal2+gVal21+bVal2+bVal21;
  • knobImgb.style.backgroundColor = "#"+rVal2+Color[ind]+ "0000";
  • knobImgb0.style.backgroundColor = "#"+rVal2+Color[ind]+ "0000";
  • }
  • else if (kObj.id =="knobImgb2"){
  • cCol2="#"+rVal2+rVal21+gVal2+gVal21+Color[ind]+bVal21;
  • knobImgb2.style.backgroundColor = "#0000"+Color[ind]+bVal21;
  • knobImgb20.style.backgroundColor = "#0000"+Color[ind]+bVal21;
  • }
  • else if (kObj.id =="knobImgb20"){
  • cCol2="#"+rVal2+rVal21+gVal2+gVal21+bVal2+Color[ind];
  • knobImgb20.style.backgroundColor = "#0000"+bVal2+Color[ind];
  • knobImgb2.style.backgroundColor = "#0000"+bVal2+Color[ind];
  • }
  • else if (kObj.id =="knobImgb1"){
  • cCol2="#"+rVal2+rVal21+Color[ind]+gVal21+bVal2+bVal21;
  • knobImgb1.style.backgroundColor = "#00"+Color[ind]+gVal21+"00";
  • knobImgb10.style.backgroundColor = "#00"+Color[ind]+gVal21+"00";
  • }
  • else if (kObj.id =="knobImgb10"){
  • cCol2="#"+rVal2+rVal21+gVal2+Color[ind]+bVal2+bVal21;
  • knobImgb1.style.backgroundColor = "#00"+gVal2+Color[ind]+"00";
  • knobImgb10.style.backgroundColor = "#00"+gVal2+Color[ind]+"00";
  • }
  • // valeur2.value = document.bgColor;
  • valeur2.value = cCol2;
  • gradPart2 = cCol2;
  • test = "body { filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'"+ cCol +"\', startColorstr=\'"+ cCol2 +"\', gradientType=\'1\');}" ;
  • test2 = "filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'"+ cCol +"\', startColorstr=\'"+ cCol2 +"\', gradientType=\'1\')";
  • // PERMET D'APPLIQUER LE FILTRE AU CHANGEMENT DES COULERS
  • unTimeout = setTimeout("changeBody()", 1);
  • // changeBody();
  • /*// alert("style construit = " + test );
  • // ### AUTRE TYPE DE FILTRES ET OPTIONS
  • // ##########################################################################
  • // document.body.filters.item('DXImageTransform.Microsoft.Alpha').finishY= 100;
  • // document.body.filters.item('DXImageTransform.Microsoft.Alpha').startY= 0;
  • // document.body.filters.item('DXImageTransform.Microsoft.Gradient').endColorstr=gradPart1;
  • // document.body.filters.item('DXImageTransform.Microsoft.Gradient').startColorstr=gradPart2;
  • // document.filter=test2 ;
  • // filterDIV.filters.item('DXImageTransform.Microsoft.Alpha').finishY=this.options[this.selectedIndex].value
  • */
  • }
  • // Drag and move engine (original code by DynamicDrive.com), don't change unless explicitely indicated
  • var dragMe=false, kObj, yPos,direction
  • function moveLayer() {
  • if (event.button==1 && dragMe) {
  • oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientY-yPos;
  • // - Limit movement of knob to stay inside layer
  • if (kObj.style.pixelTop > oldY) direction="dn"; else direction="up";
  • if (kObj.style.pixelTop < 2 && direction=="up") {kObj.style.pixelTop=2; direction="dn";}
  • if (kObj.style.pixelTop > 102 && direction=="dn") {kObj.style.pixelTop=102; direction="up";}
  • // - Set working variable 'showPerc' depending on 100 or 250 scaling
  • sPosition=kObj.style.pixelTop; showPerc = (sPosition-2)/2*5;
  • // - The following line should be replaced by the function-call with the actual task to perform
  • /* - Permet une réaction en temps réel
  • */// chgBg(); //pendant le mouvement
  • /* - Permet une réaction en temps réel
  • return false;
  • */ }
  • // - Permet une meilleure fluiditée
  • chgBg(); //après le mouvement
  • // - Permet une meilleure fluiditée
  • }
  • function dragLayer() {
  • if (!document.all) return;
  • if (event.srcElement.className=="drag"){dragMe=true; kObj=event.srcElement; temp2=kObj.style.pixelTop; yPos=event.clientY; formule.onmousemove=moveLayer;formule2.onmousemove=moveLayer; }
  • }
  • function changeBody(){
  • var toto = document.body.style;
  • var titi = document.body;
  • /*// formule.value = 'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
  • // 'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
  • // toto.filter = 'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
  • */ titi.style.filter = 'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
  • document.body.style.filter = 'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
  • resultat.value = 'filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
  • valeur2.style.backgroundColor = valeur2.value;
  • valeur.style.backgroundColor = valeur.value;
  • }
  • // - Idem changeBody() + Vérifie la formule
  • function changeBody2(){
  • var formule = "";
  • var toto = document.body.style;
  • var lit = document.body.style;
  • var temp;
  • var mReg = /filter:progid:DXImageTransform.Microsoft.Gradient\(endColorstr=\'\#(\w{6})\'\,\s*startColorstr=\'\#(\w{6})\'(\,\s*gradientType=\'\d{1}\')*\)/;
  • formule = resultat.value;
  • alert("formule = " + formule);
  • /*// formule = resultat.toString;
  • // formule = formule.split(":");
  • // formule = formule.substring(formule.indexOf("progid:",0) + 1);
  • */
  • // FAUX car \d mais \w
  • // if (temp = formule.match(/filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'*\#\d(6)\'*, startColorstr=\'*\#\d(6)\'*)\, gradientType=\'(\d+)\'/)){
  • // if (formule.match(/filter:progid:DXImageTransform.Microsoft.Gradient\(endColorstr=\'*\#\d(6)\'*\,\s*startColorstr=\'*\#\w(6)\'*)\,\s*gradientType=\'*\w(6)\'*\)/))
  • //OK if (formule.match(/filter:progid:DXImageTransform.Microsoft.Gradient\(endColorstr=\'\#(\w{6})\'\,\s*startColorstr=\'\#(\w{6})\'(\,\s*gradientType=\'\d{1}\')*\)/)){
  • if (formule.match(/filter:progid:DXImageTransform.Microsoft.Gradient\(endColorstr=\'\#(\w{6})\'\,\s*startColorstr=\'\#(\w{6})\'(\,\s*gradientType=\'\d{1}\')*\)/))
  • {
  • mReg.exec(formule);
  • //formule.exec(/filter:progid:DXImageTransform.Microsoft.Gradient\(endColorstr=\'\#(\w{6})\'\,\s*startColorstr=\'\#(\w{6})\'(\,\s*gradientType=\'\d{1}\')*\)/);
  • alert('formule.$1 = ' + RegExp.$1);
  • temp = formule.split(":");
  • toto.filter = temp[1] + ":"+temp[2] ;
  • /* temp = formule.match(//);
  • formule.value = 'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';;
  • 'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
  • formule = 'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
  • alert("formule 1 = " + formule + " temp[2] = " + temp[2] );
  • var resultat =
  • toto.filter = temp[1] + ":"+temp[2] ;
  • */ }
  • else {
  • alert("Erreur dans la formule");
  • }
  • }
  • </SCRIPT>
  • </HEAD>
  • <BODY>
  • <!--
  • - MODE DE POSITIONNEMENT DES DIV EN ABSOLU
  • => Ne pas se fier à l'ordre d'affichage
  • -->
  • <DIV id="Div4" style="LEFT:494px; WIDTH:195px; POSITION:absolute; TOP:15px; HEIGHT:32px">To
  • be continued........
  • </DIV>
  • <DIV id="Titreformule" style="LEFT:40px; WIDTH:245px; POSITION:absolute; TOP:140px; HEIGHT:32px">
  • <nobr>Couleur 1:<INPUT id="valeur" type="text" name="valeur" style="filter:none" ><!--onfocus="javascript:alert('change'); resultat.focus();")>--></nobr>
  • </DIV>
  • <DIV id="Div3" style="LEFT:335px; WIDTH:225px; POSITION:absolute; TOP:140px; HEIGHT:32px">
  • <NOBR>Couleur 2:<INPUT id="valeur2" type="text" name="valeur2" style="filter:none"><!-- onchange="javascript:/*alert('change');*/ resultat.focus();"><!--onfocus="javascript:alert('change'); resultat.focus();"--></NOBR></DIV>
  • <DIV id="formule" style="LEFT:50px; WIDTH:157px; POSITION:absolute; TOP:193px; HEIGHT:79px">
  • <DIV id="outerLyr" class="outerLyr outerLyrR" style="BACKGROUND-COLOR: #664433"><!--
  • --><div class="drag" id="knobImga"
  • >&nbsp;R&nbsp;</div>
  • <DIV id="innerLyr" class="innerLyr innerLyrR">
  • <DIV id="barLyr" class="barLyr barLyrR"></DIV>
  • </DIV>
  • </DIV>
  • <DIV id="outerLyr0" class="outerLyr outerLyrR" style="LEFT: 35px"><!--
  • --><div class="drag" id="knobImga0"
  • >&nbsp;R&nbsp;</div>
  • <DIV id="innerLyr0" class="innerLyr innerLyrR" >
  • <DIV id="barLyr0" class="barLyr barLyrR"></DIV>
  • </DIV>
  • </DIV>
  • <DIV id="outerLyr1" class="outerLyr outerLyrG" style="LEFT: 70px"><!--
  • --><div class="drag" id="knobImga1"
  • >&nbsp;G&nbsp;</div>
  • <DIV id="innerLyr1" class="innerLyr innerLyrG">
  • <DIV id="barLyr1" class="barLyr barLyrG"></DIV>
  • </DIV>
  • </DIV>
  • <DIV id="outerLyr10" class="outerLyr outerLyrG" style="BACKGROUND-COLOR: #559955; LEFT: 105px"><!--
  • --><div class="drag" id="knobImga10"
  • >&nbsp;G&nbsp;</div><!--IMG class="drag" id="knobImg00" src="knob.jpg" style="HEIGHT: 17px; LEFT: 2px; TOP: 0px; WIDTH: 20px; Z-INDEX: 3"-->
  • <DIV id="innerLyr10" class="innerLyr innerLyrG">
  • <DIV id="barLyr10" class="barLyr barLyrG"></DIV>
  • </DIV>
  • </DIV>
  • <DIV id="outerLyr2" class="outerLyr outerLyrB" style="BACKGROUND-COLOR: #334466; LEFT: 140px"><!--
  • --><div class="drag" id="knobImga2" >&nbsp;B&nbsp;</div>
  • <DIV id="innerLyr2" class="innerLyr innerLyrB">
  • <DIV id="barLyr2" class="barLyr barLyrB"></DIV>
  • </DIV>
  • </DIV>
  • <DIV id="outerLyr20" class="outerLyr outerLyrB" style="BACKGROUND-COLOR: #334466; LEFT: 175px"><!--
  • --><div class="drag" id="knobImga20">&nbsp;B&nbsp;</div>
  • <DIV id="innerLyr20" class="innerLyr innerLyrB">
  • <DIV id="barLyr20" class="barLyr barLyrB"></DIV>
  • </DIV>
  • </DIV>
  • </DIV>
  • <!--
  • FORMULE 2
  • -->
  • <DIV id="formule2" style="LEFT:350px; WIDTH:157px; POSITION:absolute; TOP:193px; HEIGHT:79px">
  • <DIV id="outerLyrB" class="outerLyr outerLyrR" style="LEFT: 0px"><!--
  • --><div class="drag" id="knobImgb"
  • >&nbsp;R&nbsp;</div>
  • <DIV id="innerLyrB" class="innerLyr innerLyrR">
  • <DIV id="barLyrB" class="barLyr barLyrR"></DIV>
  • </DIV>
  • </DIV>
  • <DIV id="outerLyrB0" class="outerLyr outerLyrR" style="LEFT: 35px"><!--
  • --><div class="drag" id="knobImgb0"
  • >&nbsp;R&nbsp;</div><!--IMG class="drag" id="knobImg00" src="knob.jpg" style="HEIGHT: 17px; LEFT: 2px; TOP: 0px; WIDTH: 20px; Z-INDEX: 3"
  • --><DIV id="innerLyrB0" class="innerLyr innerLyrR">
  • <DIV id="Div1" class="barLyr barLyrR"></DIV>
  • </div>
  • </DIV>
  • <DIV id="outerLyrB1" class="outerLyr outerLyrG" style="LEFT: 70px"><!--IMG class="drag" id="knobImg1" src="knob.jpg" style="HEIGHT: 17px; LEFT: 2px; TOP: 100px; WIDTH: 20px; Z-INDEX: 3"--><!--
  • --><div class="drag" id="knobImgb1">&nbsp;G&nbsp;</div>
  • <DIV id="innerLyrB1" class="innerLyr innerLyrG">
  • <DIV id="barLyrB1" class="barLyr barLyrG"></DIV>
  • </DIV>
  • </DIV>
  • <DIV id="outerLyrB10" class="outerLyr outerLyrG" style="LEFT: 105px"><!--
  • --><div class="drag" id="knobImgb10"
  • >&nbsp;G&nbsp;</div>
  • <DIV id="innerLyrB10" class="innerLyr innerLyrG">
  • <DIV id="barLyrB10" class="barLyr barLyrG"></DIV>
  • </DIV>
  • </DIV>
  • <DIV id="outerLyrB2" class="outerLyr outerLyrB" style="LEFT: 140px"><!--
  • --><div class="drag" id="knobImgb2"
  • >&nbsp;B&nbsp;</div>
  • <DIV id="innerLyrB2" class="innerLyr innerLyrB">
  • <DIV id="barLyrB2" class="barLyr barLyrB"></DIV>
  • </DIV>
  • </DIV>
  • <DIV id="outerLyrB20" class="outerLyr outerLyrB" style="LEFT: 175px"><!--
  • --><div class="drag" id="knobImgb20"
  • >&nbsp;B&nbsp;</div>
  • <DIV id="innerLyrB20" class="innerLyr innerLyrB">
  • <DIV id="barLyrB21" class="barLyr barLyrB"></DIV>
  • </DIV>
  • </DIV>
  • </DIV>
  • <!--INPUT 1 2 SUBMIT-->
  • <DIV style="LEFT:73px; WIDTH:195px; POSITION:absolute; TOP:418px; HEIGHT:32px">
  • <INPUT id="SubmitFiltre" onclick="changeBody();" type="button" id="Button1" name="Button1" class="Submit" value="Appiquer le filtre" ></DIV>
  • <DIV id="Div2" style="LEFT:647px; WIDTH:195px; POSITION:absolute; TOP:418px; HEIGHT:32px">
  • <INPUT onclick="changeBody2();" class="Submit" type="button" id="Button2" name="Button1" value="Appiquer le filtre texte."></DIV>
  • <!--FIN INPUT-->
  • <!--DIV id="" style="Z-INDEX: 1; LEFT: 0px; WIDTH: 23px; POSITION: absolute; TOP: 0px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG class="drag" id="" style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 0px; HEIGHT: 17px"
  • src="knob.gif" width="18" height="15">
  • <DIV id="innerLyr" style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #995555">
  • <DIV id="barLyr" style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV>
  • </DIV>
  • </DIV-->
  • <!--DIV id="outerLyr0" style="Z-INDEX: 1; LEFT: 35px; WIDTH: 23px; POSITION: absolute; TOP: 0px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG class="drag" id="knobImga0" style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 0px; HEIGHT: 17px"
  • src="knob.gif" width="18" height="15">
  • <DIV id="innerLyr0" style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #995555">
  • <DIV id="barLyr0" style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV>
  • </DIV>
  • </DIV-->
  • <!--DIV id="outerLyr1" style="Z-INDEX: 1; LEFT: 70px; WIDTH: 23px; POSITION: absolute; TOP: 0px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG class="drag" id="knobImga1" style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 0px; HEIGHT: 17px"
  • src="knob.gif" width="18" height="15">
  • <DIV id="innerLyr1" style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #559955">
  • <DIV id="barLyr1" style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV>
  • </DIV>
  • </DIV>
  • <DIV id="outerLyr10" style="Z-INDEX: 1; LEFT: 105px; WIDTH: 23px; POSITION: absolute; TOP: 0px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG class="drag" id="knobImga10" style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 0px; HEIGHT: 17px"
  • src="knob.gif" width="18" height="15">
  • <DIV id="innerLyr10" style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #559955">
  • <DIV id="barLyr10" style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV>
  • </DIV>
  • </DIV-->
  • <!-- <DIV id="outerLyr2" style="Z-INDEX: 1; LEFT: 135px; WIDTH: 23px; POSITION: absolute; TOP: 0px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG class="drag" id="knobImga2" style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 0px; HEIGHT: 17px"
  • src="knob.gif" width="18" height="15">
  • <DIV id="innerLyr2" style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #555599">
  • <DIV id="barLyr2" style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV>
  • </DIV>
  • </DIV>
  • <DIV id="outerLyr20" style="Z-INDEX: 1; LEFT: 170px; WIDTH: 23px; POSITION: absolute; TOP: 0px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG class="drag" id="knobImga20" style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 0px; HEIGHT: 17px"
  • src="knob.gif" width="18" height="15">
  • <DIV id="innerLyr20" style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #555599">
  • <DIV id="barLyr20" style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV>
  • </DIV>
  • </DIV>-->
  • <!--TEXTAREA-->
  • <DIV id="saloprie" style="LEFT:647px; POSITION:absolute; TOP:141px">
  • <table ID="Table1"><tr><td>
  • <TEXTAREA rows="5" cols="70" id="resultat" name="resultat" ></TEXTAREA></td></tr><tr><td>
  • <NOBR><FONT face="Arial"><FONT size="2">Rajouter "<STRONG>filter:</STRONG>" exemple:<br>
  • filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#544690',
  • startColorstr='#000000', gradientType='1');<br>
  • NB: Rajouter une select avec les types de filtre. + les option d'orientations
  • ou dans un autre formulaire.</FONT></FONT> </NOBR></td></tr></table>
  • </DIV>
  • <!--FIN TEXTAREA-->
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • <BR>
  • </BODY>
  • </HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
	<HEAD>
		<title>Developpement - Outils - DHTML - Filtre(gradient): Applique le filtre gradient et verifie la synthaxe</title>
		<STYLE>
			Body {	color:#445767;
					font-family: Arial, Helvetica, sans-serif;
					font-size:20px;
					font-weight:15;
					border-style:none;
					border-width:0px;	margin: 0 0 0 0;
			}
			td{		font-family: Arial, Helvetica, sans-serif;
					font-size:18px;
					font-weight:20;
			}
			input{	font-family:Arial, Helvetica, sans-serif;
					font-size:14px;
					font-weight:20;
					border-style:solid; border-size:5;
					filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#b99090', startColorstr='#553623', gradientType='1');
			}
			textarea{	font-family: Arial, Helvetica, sans-serif;
					font-size:15px;
					font-weight:20;
			}
			.drag {	CURSOR: hand; POSITION: relative; 			
					border-color:#CCCC66;
					border-style:solid;
					border-width:2px;
					color:#FFFFFF;
					filter:progid:DXImageTransform.Microsoft.Alpha(opacity=35);
					HEIGHT: 16px; LEFT: 2px; TOP: 2px; WIDTH: 20px; Z-INDEX: 3;font-size:12px;font-weight:bold;text-align:center
					
			}
			.barLyr{ HEIGHT: 110px; LEFT: 8px; POSITION: absolute; TOP: 4px; WIDTH: 4px; Z-INDEX: 1}
			.outerLyr{HEIGHT: 120px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 24px; Z-INDEX: 1}
			.innerLyr{HEIGHT: 117px; LEFT: 2px; POSITION: absolute; TOP: 2px; WIDTH: 20px; Z-INDEX: 2}

			.Submit { background-color:#CC6666; color:#FFFFCC; font:Verdana, Arial, Helvetica, sans-serif}
			.Submit:hover { background-color:#6666CC; color:#FFFFCC; font:Verdana, Arial, Helvetica, sans-serif}
/*				.drag {
					CURSOR: hand; POSITION: relative; 			
					border-color:#CCCC66;
					border-style:solid;
					border-width:2px;
					color:#FFFFFF;
				}
*/			.barLyrR{BACKGROUND-COLOR:#664433;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#209100', gradientType='0')}
			.barLyrG{BACKGROUND-COLOR:#446633;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#334477', startColorstr='#99AACC', gradientType='0')}}
			.barLyrB{BACKGROUND-COLOR:#334466;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#912000', gradientType='0')}
			.outerLyrR{BACKGROUND-COLOR:#664433;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#870043', startColorstr='#440000', gradientType='1')}
			.outerLyrG{BACKGROUND-COLOR:#559955;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#438862', startColorstr='#88bb99', gradientType='1')}
			.outerLyrB{BACKGROUND-COLOR:#334466;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#666299', startColorstr='#663562', gradientType='1')}
			.innerLyrR{BACKGROUND-COLOR:#886655;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#663333', startColorstr='#875533', gradientType='1')}
			.innerLyrG{BACKGROUND-COLOR:#698869;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#88bb99', startColorstr='#438862', gradientType='1')}
			.innerLyrB{BACKGROUND-COLOR:#556688;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#433562', startColorstr='#436299', gradientType='1')}
/*				.innerLyrB{BACKGROUND-COLOR:#556688;filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#000000', startColorstr='#433562', gradientType='1')}
*/
		</STYLE>
		<SCRIPT language="javascript">
//			- Script by Ronald H. Jankowsky (http://rj-edv-beratung.de)
			var sPosition;
			var showPerc=100;
			document.onmousedown=dragLayer;
			document.onmouseup=new Function("dragMe=false");
//			- var  rVal, bVal, gVal;
			var Color= new Array();
			Color[0] = "0";Color[1] = "1";Color[2] = "2";Color[3] = "3";Color[4] = "4";Color[5] = "5";Color[6] = "6";Color[7] = "7";Color[8] = "8";Color[9] = "9";Color[10] = "a";Color[11] = "b";Color[12] = "c";Color[13] = "d";Color[14] = "e";Color[15] = "f";
			rVal = rVal1 = gVal = gVal1 = bVal = bVal1 = 0;	
			rVal2 = rVal21 = gVal2 = gVal21 = bVal2 = bVal21 = 0;	
//			- Demofunction to change bg-color by moving slider
			var cCol = "#000000";
			var cCol2 = "#000000";
			var gradPart1 = "#000000";
			var gradPart2 = "#000000";

			function chgBg() {
//					cCol = document.bgColor; 
//					cCol = cCol.value;
				rVal=cCol.substr(1,1); gVal=cCol.substr(3,1); bVal=cCol.substr(5,1);
				rVal1=cCol.substr(2,1); gVal1=cCol.substr(4,1); bVal1=cCol.substr(6,1);
				ind = Math.round(showPerc/16); if (ind < 0) ind = 0; if (ind > 15) ind=15;
//				- If more sliders are used, each of them has to be handled separately
				if (kObj.id =="knobImga"){
						cCol="#"+Color[ind]+rVal1+gVal+gVal1+bVal+bVal1;
						knobImga.style.backgroundColor = "#"+Color[ind]+rVal1+ "0000";
						knobImga0.style.backgroundColor = "#"+Color[ind]+rVal1+"0000";
				}
				else if (kObj.id =="knobImga0"){
						cCol="#"+rVal+Color[ind]+gVal+gVal1+bVal+bVal1;	
						knobImga.style.backgroundColor = "#"+rVal+Color[ind]+"0000";
						knobImga0.style.backgroundColor = "#"+rVal+Color[ind]+"0000";
				}
				else if (kObj.id =="knobImga1"){
						cCol="#"+rVal+rVal1+Color[ind]+gVal1+bVal+bVal1;
						knobImga1.style.backgroundColor = "#00"+Color[ind]+gVal1+"00";
						knobImga10.style.backgroundColor = "#00"+Color[ind]+gVal1+"00";
				}
				else if (kObj.id =="knobImga10"){
						cCol="#"+rVal+rVal1+gVal+Color[ind]+bVal+bVal1;
						knobImga1.style.backgroundColor = "#00"+gVal+Color[ind]+"00";
						knobImga10.style.backgroundColor = "#00"+gVal+Color[ind]+"00";
				}
				else if (kObj.id =="knobImga2"){
						cCol="#"+rVal+rVal1+gVal+gVal1+Color[ind]+bVal1;
						knobImga2.style.backgroundColor = "#0000"+bVal+Color[ind];
						knobImga20.style.backgroundColor = "#0000"+bVal+Color[ind];
				}
				else if (kObj.id =="knobImga20"){
						cCol="#"+rVal+rVal1+gVal+gVal1+bVal+Color[ind];	
						knobImga2.style.backgroundColor = "#0000"+bVal+Color[ind];
						knobImga20.style.backgroundColor = "#0000"+bVal+Color[ind];
				}
				valeur.value = cCol;
				gradPart1 =  cCol;

				rVal2=cCol2.substr(1,1); gVal2=cCol2.substr(3,1); bVal2=cCol2.substr(5,1);
				rVal21=cCol2.substr(2,1); gVal21=cCol2.substr(4,1); bVal21=cCol2.substr(6,1);
				ind = Math.round(showPerc/16); if (ind < 0) ind = 0; if (ind > 15) ind=15;
//				- If more sliders are used, each of them has to be handled separately

				if (kObj.id =="knobImgb") {cCol2="#"+Color[ind]+rVal21+gVal2+gVal21+bVal2+bVal21;	
					knobImgb.style.backgroundColor = "#"+Color[ind]+rVal21+ "0000";
					knobImgb0.style.backgroundColor = "#"+Color[ind]+rVal21+"0000";
				}
				else if (kObj.id =="knobImgb0"){
					cCol2="#"+rVal2+Color[ind]+gVal2+gVal21+bVal2+bVal21;	
					knobImgb.style.backgroundColor = "#"+rVal2+Color[ind]+ "0000";
					knobImgb0.style.backgroundColor = "#"+rVal2+Color[ind]+ "0000";
				}
				else if (kObj.id =="knobImgb2"){
					cCol2="#"+rVal2+rVal21+gVal2+gVal21+Color[ind]+bVal21;
					knobImgb2.style.backgroundColor = "#0000"+Color[ind]+bVal21;
					knobImgb20.style.backgroundColor = "#0000"+Color[ind]+bVal21;
				}
				else if (kObj.id =="knobImgb20"){
					cCol2="#"+rVal2+rVal21+gVal2+gVal21+bVal2+Color[ind];	
					knobImgb20.style.backgroundColor = "#0000"+bVal2+Color[ind];
					knobImgb2.style.backgroundColor = "#0000"+bVal2+Color[ind];
				}
				else if (kObj.id =="knobImgb1"){
					cCol2="#"+rVal2+rVal21+Color[ind]+gVal21+bVal2+bVal21;
					knobImgb1.style.backgroundColor = "#00"+Color[ind]+gVal21+"00";
					knobImgb10.style.backgroundColor = "#00"+Color[ind]+gVal21+"00";
				}
				else if (kObj.id =="knobImgb10"){
					cCol2="#"+rVal2+rVal21+gVal2+Color[ind]+bVal2+bVal21;
					knobImgb1.style.backgroundColor = "#00"+gVal2+Color[ind]+"00";
					knobImgb10.style.backgroundColor = "#00"+gVal2+Color[ind]+"00";
				}
//					valeur2.value = document.bgColor;
				valeur2.value = cCol2;
				gradPart2 =  cCol2;
				test = "body { filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'"+ cCol +"\', startColorstr=\'"+ cCol2 +"\', gradientType=\'1\');}" ;
				test2 = "filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'"+ cCol +"\', startColorstr=\'"+ cCol2 +"\', gradientType=\'1\')";

//				PERMET D'APPLIQUER LE FILTRE AU CHANGEMENT DES COULERS
				unTimeout =  setTimeout("changeBody()", 1);
//				changeBody();
/*//					alert("style construit = " + test );	


//					### AUTRE TYPE DE FILTRES ET OPTIONS
//					##########################################################################
//					document.body.filters.item('DXImageTransform.Microsoft.Alpha').finishY= 100;
//					document.body.filters.item('DXImageTransform.Microsoft.Alpha').startY= 0;
//					document.body.filters.item('DXImageTransform.Microsoft.Gradient').endColorstr=gradPart1;
//					document.body.filters.item('DXImageTransform.Microsoft.Gradient').startColorstr=gradPart2;
//					document.filter=test2 ;
//					filterDIV.filters.item('DXImageTransform.Microsoft.Alpha').finishY=this.options[this.selectedIndex].value
*/				
		}

			// Drag and move engine (original code by DynamicDrive.com), don't change unless explicitely indicated
			var dragMe=false, kObj, yPos,direction
			function moveLayer() {
				if (event.button==1 && dragMe) {
					oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientY-yPos; 
//					-	Limit movement of knob to stay inside layer
					if (kObj.style.pixelTop > oldY) direction="dn"; else direction="up";
					if (kObj.style.pixelTop < 2 && direction=="up") {kObj.style.pixelTop=2; direction="dn";}
					if (kObj.style.pixelTop > 102 && direction=="dn") {kObj.style.pixelTop=102; direction="up";}
//					-	Set working variable 'showPerc' depending on 100 or 250 scaling
					sPosition=kObj.style.pixelTop; showPerc = (sPosition-2)/2*5; 
//					-	The following line should be replaced by the function-call with the actual task to perform

/*					-		Permet une réaction en temps réel
*///					chgBg();		//pendant le mouvement
/*					-		Permet une réaction en temps réel
					return false; 
*/				}
//				-	Permet une meilleure fluiditée
				chgBg();		//après le mouvement
//				-	Permet une meilleure fluiditée
			}
			function dragLayer() {
				if (!document.all) return;
				if (event.srcElement.className=="drag"){dragMe=true; kObj=event.srcElement; temp2=kObj.style.pixelTop; yPos=event.clientY; formule.onmousemove=moveLayer;formule2.onmousemove=moveLayer; }
			}
			function changeBody(){
				var toto = document.body.style;
				var titi = document.body;
/*//						formule.value = 'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
//						'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
//						toto.filter  = 'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
*/				titi.style.filter  = 'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
				document.body.style.filter  = 'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
				resultat.value = 'filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
				valeur2.style.backgroundColor = valeur2.value;
				valeur.style.backgroundColor = valeur.value;
			}
//			-	Idem changeBody() + Vérifie la formule
			function changeBody2(){
				var formule = "";
				var toto = document.body.style;
				var lit = document.body.style;
				var temp;
				var mReg = /filter:progid:DXImageTransform.Microsoft.Gradient\(endColorstr=\'\#(\w{6})\'\,\s*startColorstr=\'\#(\w{6})\'(\,\s*gradientType=\'\d{1}\')*\)/;

				formule = resultat.value;
					alert("formule = " + formule);
/*//					formule  = resultat.toString;
//					formule = formule.split(":");
//					formule =  formule.substring(formule.indexOf("progid:",0) + 1);
*/

//			FAUX car \d mais \w
//			if (temp = formule.match(/filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'*\#\d(6)\'*, startColorstr=\'*\#\d(6)\'*)\, gradientType=\'(\d+)\'/)){

//					if (formule.match(/filter:progid:DXImageTransform.Microsoft.Gradient\(endColorstr=\'*\#\d(6)\'*\,\s*startColorstr=\'*\#\w(6)\'*)\,\s*gradientType=\'*\w(6)\'*\)/))
//OK				if (formule.match(/filter:progid:DXImageTransform.Microsoft.Gradient\(endColorstr=\'\#(\w{6})\'\,\s*startColorstr=\'\#(\w{6})\'(\,\s*gradientType=\'\d{1}\')*\)/)){
				if (formule.match(/filter:progid:DXImageTransform.Microsoft.Gradient\(endColorstr=\'\#(\w{6})\'\,\s*startColorstr=\'\#(\w{6})\'(\,\s*gradientType=\'\d{1}\')*\)/))
				{
					mReg.exec(formule);
					//formule.exec(/filter:progid:DXImageTransform.Microsoft.Gradient\(endColorstr=\'\#(\w{6})\'\,\s*startColorstr=\'\#(\w{6})\'(\,\s*gradientType=\'\d{1}\')*\)/);
					alert('formule.$1 = ' + RegExp.$1);
					temp = formule.split(":");
					toto.filter  = temp[1] + ":"+temp[2] ;		
/*						temp = formule.match(//);
						formule.value = 'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';;
						'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
						formule = 'progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'' + valeur2.value + '\', startColorstr=\'' + valeur.value + '\', gradientType=\'1\');';
						alert("formule 1 = " +  formule + " temp[2] = " + temp[2] );
							var resultat = 
						toto.filter  = temp[1] + ":"+temp[2] ;			
*/				}
				else { 
					alert("Erreur dans la formule");
				}
			}
		</SCRIPT>
	</HEAD>
	<BODY>
<!--
		- MODE DE POSITIONNEMENT DES DIV EN ABSOLU
			=> Ne pas se fier à l'ordre d'affichage
-->
		<DIV id="Div4" style="LEFT:494px; WIDTH:195px; POSITION:absolute; TOP:15px; HEIGHT:32px">To 
			be continued........
		</DIV>

		<DIV id="Titreformule" style="LEFT:40px; WIDTH:245px; POSITION:absolute; TOP:140px; HEIGHT:32px">
			<nobr>Couleur 1:<INPUT id="valeur" type="text" name="valeur" style="filter:none" ><!--onfocus="javascript:alert('change'); resultat.focus();")>--></nobr>
		</DIV>
		<DIV id="Div3" style="LEFT:335px; WIDTH:225px; POSITION:absolute; TOP:140px; HEIGHT:32px">
			<NOBR>Couleur 2:<INPUT id="valeur2" type="text" name="valeur2" style="filter:none"><!--  onchange="javascript:/*alert('change');*/ resultat.focus();"><!--onfocus="javascript:alert('change'); resultat.focus();"--></NOBR></DIV>

		<DIV id="formule" style="LEFT:50px; WIDTH:157px; POSITION:absolute; TOP:193px; HEIGHT:79px">
				<DIV id="outerLyr" class="outerLyr outerLyrR" style="BACKGROUND-COLOR: #664433"><!--
						--><div class="drag" id="knobImga"  
							>&nbsp;R&nbsp;</div>
					<DIV id="innerLyr"  class="innerLyr innerLyrR">
						<DIV id="barLyr" class="barLyr barLyrR"></DIV>
					</DIV>
				</DIV>

				<DIV id="outerLyr0"  class="outerLyr outerLyrR" style="LEFT: 35px"><!--
						--><div class="drag" id="knobImga0" 
							>&nbsp;R&nbsp;</div>
					<DIV id="innerLyr0" class="innerLyr innerLyrR" >
						<DIV id="barLyr0" class="barLyr barLyrR"></DIV>
					</DIV>
				</DIV>
				<DIV id="outerLyr1"  class="outerLyr outerLyrG" style="LEFT: 70px"><!--
						--><div class="drag" id="knobImga1" 
							>&nbsp;G&nbsp;</div>
					<DIV id="innerLyr1" class="innerLyr innerLyrG">
						<DIV id="barLyr1" class="barLyr barLyrG"></DIV>
					</DIV>
				</DIV>
				<DIV id="outerLyr10" class="outerLyr outerLyrG" style="BACKGROUND-COLOR: #559955; LEFT: 105px"><!--
						--><div class="drag" id="knobImga10" 
							>&nbsp;G&nbsp;</div><!--IMG class="drag" id="knobImg00" src="knob.jpg" style="HEIGHT: 17px; LEFT: 2px; TOP: 0px; WIDTH: 20px; Z-INDEX: 3"-->
					<DIV id="innerLyr10" class="innerLyr innerLyrG">
						<DIV id="barLyr10" class="barLyr barLyrG"></DIV>
					</DIV>
				</DIV>
				<DIV id="outerLyr2" class="outerLyr outerLyrB" style="BACKGROUND-COLOR: #334466; LEFT: 140px"><!--
					--><div class="drag" id="knobImga2" 		>&nbsp;B&nbsp;</div>
					<DIV id="innerLyr2" class="innerLyr innerLyrB">
						<DIV id="barLyr2" class="barLyr barLyrB"></DIV>
					</DIV>
				</DIV>
				<DIV id="outerLyr20" class="outerLyr outerLyrB" style="BACKGROUND-COLOR: #334466; LEFT: 175px"><!--
					--><div class="drag" id="knobImga20">&nbsp;B&nbsp;</div>
					<DIV id="innerLyr20" class="innerLyr  innerLyrB">
						<DIV id="barLyr20" class="barLyr barLyrB"></DIV>
					</DIV>
				</DIV>
		</DIV>
<!--
			FORMULE 2 
-->
		<DIV id="formule2" style="LEFT:350px; WIDTH:157px; POSITION:absolute; TOP:193px; HEIGHT:79px">
				<DIV id="outerLyrB" class="outerLyr outerLyrR" style="LEFT: 0px"><!--
						--><div class="drag" id="knobImgb" 
							>&nbsp;R&nbsp;</div>
					<DIV id="innerLyrB" class="innerLyr innerLyrR">
						<DIV id="barLyrB" class="barLyr barLyrR"></DIV>
					</DIV>
				</DIV>
				<DIV id="outerLyrB0" class="outerLyr outerLyrR"  style="LEFT: 35px"><!--
						--><div class="drag" id="knobImgb0"
							>&nbsp;R&nbsp;</div><!--IMG class="drag" id="knobImg00" src="knob.jpg" style="HEIGHT: 17px; LEFT: 2px; TOP: 0px; WIDTH: 20px; Z-INDEX: 3"
					--><DIV id="innerLyrB0" class="innerLyr innerLyrR">
						<DIV id="Div1" class="barLyr barLyrR"></DIV>
					</div>
				</DIV>
				<DIV id="outerLyrB1" class="outerLyr outerLyrG" style="LEFT: 70px"><!--IMG class="drag" id="knobImg1" src="knob.jpg" style="HEIGHT: 17px; LEFT: 2px; TOP: 100px; WIDTH: 20px; Z-INDEX: 3"--><!--
						--><div class="drag" id="knobImgb1">&nbsp;G&nbsp;</div>
					<DIV id="innerLyrB1" class="innerLyr innerLyrG">
						<DIV id="barLyrB1" class="barLyr barLyrG"></DIV>
					</DIV>
				</DIV>

				<DIV id="outerLyrB10" class="outerLyr outerLyrG" style="LEFT: 105px"><!--
					--><div class="drag" id="knobImgb10" 
					>&nbsp;G&nbsp;</div>
					<DIV id="innerLyrB10"  class="innerLyr innerLyrG">
						<DIV id="barLyrB10" class="barLyr barLyrG"></DIV>
					</DIV>
				</DIV>
				<DIV id="outerLyrB2"  class="outerLyr outerLyrB" style="LEFT: 140px"><!--
					--><div class="drag" id="knobImgb2"	
							>&nbsp;B&nbsp;</div>
					<DIV id="innerLyrB2" class="innerLyr innerLyrB">
						<DIV id="barLyrB2" class="barLyr barLyrB"></DIV>
					</DIV>
				</DIV>
				<DIV id="outerLyrB20" class="outerLyr outerLyrB" style="LEFT: 175px"><!--
					--><div class="drag" id="knobImgb20"
							>&nbsp;B&nbsp;</div>
					<DIV id="innerLyrB20" class="innerLyr innerLyrB">
						<DIV id="barLyrB21" class="barLyr barLyrB"></DIV>
					</DIV>
				</DIV>
		</DIV>

<!--INPUT 1 2 SUBMIT-->
		<DIV  style="LEFT:73px; WIDTH:195px; POSITION:absolute; TOP:418px; HEIGHT:32px">
			<INPUT id="SubmitFiltre" onclick="changeBody();" type="button" id="Button1" name="Button1" class="Submit" value="Appiquer le filtre" ></DIV>
		<DIV id="Div2" style="LEFT:647px; WIDTH:195px; POSITION:absolute; TOP:418px; HEIGHT:32px">
			<INPUT onclick="changeBody2();" class="Submit" type="button" id="Button2" name="Button1" value="Appiquer le filtre texte."></DIV>
<!--FIN INPUT-->

			<!--DIV id="" style="Z-INDEX: 1; LEFT: 0px; WIDTH: 23px; POSITION: absolute; TOP: 0px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG class="drag" id="" style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 0px; HEIGHT: 17px"
					src="knob.gif" width="18" height="15">
				<DIV id="innerLyr" style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #995555">
					<DIV id="barLyr" style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV>
				</DIV>
			</DIV-->

			<!--DIV id="outerLyr0" style="Z-INDEX: 1; LEFT: 35px; WIDTH: 23px; POSITION: absolute; TOP: 0px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG class="drag" id="knobImga0" style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 0px; HEIGHT: 17px"
					src="knob.gif" width="18" height="15">
				<DIV id="innerLyr0" style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #995555">
					<DIV id="barLyr0" style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV>
				</DIV>
			</DIV-->

			<!--DIV id="outerLyr1" style="Z-INDEX: 1; LEFT: 70px; WIDTH: 23px; POSITION: absolute; TOP: 0px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG class="drag" id="knobImga1" style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 0px; HEIGHT: 17px"
					src="knob.gif" width="18" height="15">
				<DIV id="innerLyr1" style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #559955">
					<DIV id="barLyr1" style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV>
				</DIV>
			</DIV>
			<DIV id="outerLyr10" style="Z-INDEX: 1; LEFT: 105px; WIDTH: 23px; POSITION: absolute; TOP: 0px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG class="drag" id="knobImga10" style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 0px; HEIGHT: 17px"
					src="knob.gif" width="18" height="15">
				<DIV id="innerLyr10" style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #559955">
					<DIV id="barLyr10" style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV>
				</DIV>
			</DIV-->

<!--			<DIV id="outerLyr2" style="Z-INDEX: 1; LEFT: 135px; WIDTH: 23px; POSITION: absolute; TOP: 0px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG class="drag" id="knobImga2" style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 0px; HEIGHT: 17px"
					src="knob.gif" width="18" height="15">
				<DIV id="innerLyr2" style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #555599">
					<DIV id="barLyr2" style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV>
				</DIV>
			</DIV>
			<DIV id="outerLyr20" style="Z-INDEX: 1; LEFT: 170px; WIDTH: 23px; POSITION: absolute; TOP: 0px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG class="drag" id="knobImga20" style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 0px; HEIGHT: 17px"
					src="knob.gif" width="18" height="15">
				<DIV id="innerLyr20" style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #555599">
					<DIV id="barLyr20" style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV>
				</DIV>
			</DIV>-->
<!--TEXTAREA-->
		<DIV id="saloprie" style="LEFT:647px; POSITION:absolute; TOP:141px">
			<table ID="Table1"><tr><td>
			<TEXTAREA rows="5" cols="70" id="resultat" name="resultat" ></TEXTAREA></td></tr><tr><td>
			<NOBR><FONT face="Arial"><FONT size="2">Rajouter "<STRONG>filter:</STRONG>" exemple:<br>
				filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#544690', 
						startColorstr='#000000', gradientType='1');<br>
						NB: Rajouter une select avec les types de filtre. + les option d'orientations 
						ou dans un autre formulaire.</FONT></FONT> </NOBR></td></tr></table>
		</DIV>
<!--FIN TEXTAREA-->
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
		<BR>
	</BODY>
</HTML>

 Conclusion

Copier le source sous HTML, l'afficher directement dans le navigateur et autoriser le composant propre à IE, et faite slider les carré sur les rails.

Page HTML à utiliser pour les développeur qui mettent en forme leurs CSS
Astuce pour FF:
- Augmenter la définition de l'écran
- afficher la page en plein écran, fair une impréssion écran
- séléctionner un pixel sur toute la longueur de l'image dans un éditeur d'image.
- et dans une section FireFox des CSS, définir cette image en arrière pland répétitif sur X ou Y en pivotant celle-ce dans un éditeur.


 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Source avec Zip Source avec une capture FAIRE DÉFILER EN BOUCLE UNE IMAGE DANS UN <TABLE> par Isole
Source avec Zip TABLEAU HTML DYNAMIQUE AVEC JAVASCRIPT DOM par LogansRun

Commentaires et avis

Commentaire de proftnj le 21/03/2011 16:03:57

Script compatible uniquement avec IE. Inutilisable en pratique mais intéressant pour un curieux. Je ne mets pas d'évaluation.

Commentaire de internetdev le 04/10/2011 00:32:33

En éffet, il n'est utilisable que sous IE (les boutons et résultats sont fixes sous FF), d'ailleur les fitres créés par les bouton glissant ne fonctionnent aussi que sous IE.
Cependant, je m'en sert pour construire une image d'un pixel de haut sur le max de large, pour l'afficher en fond de page sous firefox avec une répétition verticale(repeat-y).

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Erreur javascript avec Mozilla [ par raven44 ] Le probl&#232;me est tr&#232;s simple : j'ai deux boutons sur un formulaire, ces deux la : &lt;input type='button' value='Imprimer' onclick='parent.p BASE DE DONNEES ET JAVASCRIPT(DHTML) [ par dt_web ] ;-)Dt_WebSalut !Je cherche le moyen d'utiliser une base de donn&#233;e Access sous Javascript(DHTML) et la g&#233;rer(lecture/&#233;criture)...Merci d Javascript+DOM [ par naima2005 ] Bonjour, j'ai besoin de savoir comment récuperer la position du premier caractère et celle du dernier d'une chaine de caractère selectionnée d'une pag Jeux dhtml javascript [ par Cyreb ] Voila, je regarde depuis longtemps les sources proposé sur ce site et je m'interesse aux jeux en javascripts, pourquoi ne pas créer de veritable proje lire son midi avec javascript ??? IE bloque tout ! [ par philipPF ] Bonjour a tous ... J'ai essayé de faire jouer un fichier midi lors du click sur une image, voici le code :&lt;SCRIPT LANGUAGE="JavaScript1.1"&gt;funct problème de version !? [ par Lutinore ] 2 questions svp.. - Apparemment le mot clé const existe en javascript mais ça plante sous IE, est-ce normal, c'est pas encore implémenté  ? - A pa Lenteur javascript sous IE [ par Evangun ] Bonsoir à tous,dans ma page j'ai deux choses pour résumer : un système de drag and drop et un système où on peut générer autant d'éléments qu'on veut Socket en javascript sur ie [ par tedoldi ] Salut,J'aurais voulu savoir si quelqu'un aurait déjà réussi à créer une socket sur internet explorer.Je voudrais juste que le serveur puissent indique Besoin d'aide (Je suis un ignare en Javascript et DHTML) [ par anakyl ] Bonjour à tous,Je souhaite solliciter votre aide pour un travail que je dois effectuer, car avant aujourd'hui je ne savais pas ce que l'on pouvait fai


Nos sponsors


Sondage...

Comparez les prix


Mio - Moov V735 - GPS Europe - Ecran 7"
Entre 305€ et 375€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,479 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)