Tout d'abord, bonjour a tous.

Cela fait un moment que je viens piocher quelque information sur le site pour faire mon propre site. mais là suis confronté a deux problème un peut étrange.

le premier viens d'une gestion d'opacité d'une <div> via une scrollbar sous IE (lenteur flagrande inexplicable au vue de la simplicité du javascripte a executé)

le deuxieme vien de l'affiche de la frise de couleur que j'ai effectué pour modifier la même <div> que mon probleme d'opacité.

pour le premier je suppose que IE a de gros probleme de gestion de l'option filtre alpha, pour le deuxieme aucune idée.

plutot qu'un long discour je vous fait parvenir mon code

PS : je n'est pas fait de feuille de style parce qu'il sera imbriqué dans une partie bien plus gosse qui contiens sa propre feuille de style et ces propre entete. mais pour évité trop de complication j'ai extrait et testé en dehors de la cette partie pour mieux visualisé le probleme.

Merci de votre aide.


<html>
<head>
<script language="javascript">
bloqueur=0;
function BGstop()
{
	if (bloqueur==0){bloqueur=1;}
	else {bloqueur=0}
}
function BGcol(R,G,B)
{
	for (var i=0; i<1;i++) {
		if (document.getElementsByName('couleur')[0].checked)
		{
			if (bloqueur==0) {document.getElementById('BG').style.background="rgb("+R+","+G+","+B+")";}
		}
		else
		{
			if (bloqueur==0) {document.getElementById('TXT').style.color="rgb("+R+","+G+","+B+")";}
		}
	}
}
function opacity()
{
	valopacity =document.getElementById('opacity').scrollLeft;
	document.getElementById('BG').style.opacity = valopacity/100;
	document.getElementById('BG').style.filter = 'alpha(opacity=' + Math.floor(valopacity,2) + ')';
}
</script>
</head>
<body>
<div id="BG" style="z-index:2; width:0px; height:0px; position:absolute;"></div>
<div id="TXT" style="z-index:3; width:0px; height:0px; position:absolute;">test</div>
<table border="0" style="Table-Layout: Fixed;">
<tr>
<td ID="ZONE"><div ID="contimg" style="overflow : auto;"><div ID="image"> <img src="/Images/image.jpg"></div> </div></td>
</tr>
<tr>
<td width=100px>opacité<div ID="opacity" onscroll="opacity();" style="width:100px; height:20px; overflow: auto;"><div style="width:200px; height:1px;"></div></div></td>
</tr>
<tr><td><table border="1" cellpadding="0" cellspacing="0" rules="none" onclick="BGstop();">
<?php
$couleur = array("B","R","G","B","R","G");
$compteur=0;
for ($max=-255;$max<255;$max+=20)
{
	echo "<tr>";
	$R=256+$max;$G=0+$max;$B=0+$max;
	for($compteur=0;$compteur<6;$compteur+=2)
	{
		for ($i=0;$i<255;$i+=5)
		{
			$$couleur[$compteur]=$i+$max;
			for($tc=0;$tc<6;$tc++)
			{
				if ($$couleur[$tc]>255) {$$couleur[$tc]=255;}
				else if ($$couleur[$tc]<0) {$$couleur[$tc]=0;}
			}
			echo "<td width='2px' height='2px' bgcolor=rgb(".$R.",".$G.",".$B.") onmousemove='BGcol(".$R.",".$G.",".$B.");'></td>";
		}
		for ($j=255;$j>0;$j-=5)
		{
			$$couleur[$compteur+1]=$j+$max;
			for($tc=0;$tc<6;$tc++)
			{
				if ($$couleur[$tc]>255) {$$couleur[$tc]=255;}
				else if ($$couleur[$tc]<0) {$$couleur[$tc]=0;}
			}
			echo "<td width='2px' height='2px' bgcolor=rgb(".$R.",".$G.",".$B.") onmousemove='BGcol(".$R.",".$G.",".$B.");'></td>";
		}
	}
	echo "</tr>";
}
?>
</table>
</td>
</tr>
<tr>
<td>
	BackGround : <INPUT onClick="bloqueur=0;" type=radio checked name="couleur" value="BG">
	<br>Texte : <INPUT onClick="bloqueur=0;" type=radio name="couleur" value="TXT">
</td>
</tr>
</table>
<script language="javascript">
if (document.getElementById('image').offsetWidth*3/5 < document.getElementById('image').offsetHeight*5/3)
{
	document.getElementById('ZONE').style.width=document.getElementById('image').offsetWidth;
	document.getElementById('ZONE').style.height=20+(3/5)*document.getElementById('ZONE').offsetWidth;
	document.getElementById('contimg').style.width=document.getElementById('image').offsetWidth;
	document.getElementById('contimg').style.height=20+(3/5)*document.getElementById('contimg').offsetWidth;
}
else
{
	document.getElementById('ZONE').style.height=20+document.getElementById('image').offsetHeight;
	document.getElementById('ZONE').style.width=(5/3)*document.getElementById('ZONE').offsetHeight;
	document.getElementById('contimg').style.height=20+document.getElementById('image').offsetHeight;
	document.getElementById('contimg').style.width=(5/3)*document.getElementById('contimg').offsetHeight;
}
document.getElementById('BG').style.height=document.getElementById('image').offsetHeight;
document.getElementById('BG').style.width=document.getElementById('ZONE').offsetWidth/2;
document.getElementById('BG').style.top=document.getElementById('ZONE').style.top;
document.getElementById('BG').style.left=document.getElementById('ZONE').style.left;
document.getElementById('TXT').style.height=document.getElementById('image').offsetHeight;
document.getElementById('TXT').style.width=document.getElementById('ZONE').offsetWidth/2;
document.getElementById('TXT').style.top=document.getElementById('ZONE').style.top;
document.getElementById('TXT').style.left=document.getElementById('ZONE').style.left;
</script>
</body>
</html>