- 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"
> R </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"
> R </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"
> G </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"
> G </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" > B </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"> B </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"
> R </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"
> R </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"> G </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"
> G </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"
> B </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"
> B </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.
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.