Dhtml ie filtre dégradé (outil html pour développeur)

Soyez le premier à donner votre avis sur cette source.

Snippet vu 4 518 fois - Téléchargée 15 fois

Contenu du snippet

- 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 / Exemple :


<!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.

A voir également

Ajouter un commentaire

Commentaires

proftnj
Messages postés
54
Date d'inscription
lundi 10 juillet 2006
Statut
Membre
Dernière intervention
11 septembre 2011
-
Script compatible uniquement avec IE. Inutilisable en pratique mais intéressant pour un curieux. Je ne mets pas d'évaluation.
internetdev
Messages postés
5
Date d'inscription
jeudi 11 juin 2009
Statut
Membre
Dernière intervention
20 janvier 2012
-
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).

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.