Problème d'opacité sous Internet Explorer

je vais péter un cable !

10 mai 2010 à 0:58:10

Salut la foule,

Après avoir utilisé la fonction "filter" pour que l'opacité prenne effet sur mes éléments dans ma page web, je n'aperçois aucun changement sous IE8 (alors que sous FF ou Chrome, pas de soucis), une erreur doit se trouver dans le code, si quelqu'un pouvait m'aider, merci d'avance

<div id="menu">

<ul>
		<li id="1"><a href="news.php" onmouseover="li.show_m('1')" onmouseout="li.hide_m('1')"><img src="media/newx.jpg"></a></li>
		<li id="2"><a href="live.html" onmouseover="li.show_m('2')" onmouseout="li.hide_m('2')"><img src="media/livex.jpg"></a></li>
		<li id="3"><a href="bio.html" onmouseover="li.show_m('3')" onmouseout="li.hide_m('3')"><img src="media/biox.jpg"></a></li>
		<li id="4"><a href="press.html" onmouseover="li.show_m('4')" onmouseout="li.hide_m('4')"><img src="media/pressx.jpg"></a></li>
		<li id="5"><a href="gallery.html" onmouseover="li.show_m('5')" onmouseout="li.hide_m('5')"><img src="media/galleryx.jpg"></a></li>
		<li id="6"><a href="contact.html" onmouseover="li.show_m('6')" onmouseout="li.hide_m('6')"><img src="media/contactx.jpg"></a></li>
		<li id="7"><a href="store.html" onmouseover="li.show_m('7')" onmouseout="li.hide_m('7')"><img src="media/storex.jpg"></a></li>
</ul>
</div>

#menu { width: 630px; margin: -74px 0px 0px 279px; }

#menu ul { width: 710px; margin: 0px 0px 0px -1px; padding: 0px; }

#menu li { display: inline; margin: 0px -3px 0px 0px; opacity: 0; }

#menu img { filter:alpha(opacity=0); }

li = {
	show_m: function(elt) {
		document.getElementById(elt).style.opacity = '1';
		document.getElementById(elt).style.filter = 'alpha(opacity=100)';
		document.getElementById(elt).style.webkitTransition = 'opacity 0.5s linear';
	},
	hide_m: function(elt) {
		document.getElementById(elt).style.opacity = '0';
		document.getElementById(elt).style.filter = 'alpha(opacity=0)';
	}
}

Anonyme

10 mai 2010 à 12:47:42

pourquoi tu n'utilise pas plutot la propriété display ?

S4nGoKu

10 mai 2010 à 15:47:56

Webkit doit pas être supporté par IE

Ptt-homme

10 mai 2010 à 21:49:29

Citation : S4nGoKu

Webkit doit pas être supporté par IE

En meme temps, il n'y a pas grand chose qui est supporté par ce navigateur, il est gateux de partout et le pire c'est que tout le monde l'utilise :-°

Voilà pour la partie post pour rien! Sinon je me demandais si tu avais jeté un oeil du coté des plugins genres lightbox ou assimilé en full JS pour savoir comment eux géraient le cas IE?

Ma Poule

12 mai 2010 à 23:08:26

Seebz (EDIT) : J'ai essayé, sans succès

S4nGoKu : C'est sûr, mais ça c'est appart, c'est pour la transition qui ne marchement pour l'instant sous Chrome, Safari, et Opera.

Ptt-homme : j'ai checké du côté lightbox car j'utilise parmi ce que l'on peut trouvé sur le net, et je n'ai eu aucun soucis sous IE avec ce genre de script.

EDIT :

Ne trouvant pas du tout de ce côté là, et ayant trouvé quelque chose sur internet, une autre difficulté s'impose : lorsque je mets plusieurs images différentes (j'ai essayé plusieurs combinaisons dans le code, mais sans succès) il y a une seul qui est affecté au code, tandis que les autres restent afficher comme-ci de rien n'était, et je voudrais que chaque image soit affecté au code, par exemple, lorsque je survole une image, cette image s'affiche, sachant que les autres restent invisibles, vis-versa, voici le code :

<!DOCTYPE HTML>

<html>

<head>
	<link rel="shortcut icon" type="image/ico" href="../media/favicon.ico" />
	<title>Kaka</title>
</head>

<body>

<li id="1">	<img src="kaka.jpg" id="picture" />	</li>


<li id="2">	<img src="kaka.jpg" id="picture" />	</li>

</body>
</html>

Le code JS à mettre dans la balise "<head>"

<script type="text/javascript">

<!--// [CDATA[ 
var IE=!!document.all;

function fade(elt, debut, fin){
	if(debut==fin){return false}
	IE?elt.filters[0].opacity=debut:elt.style.opacity=debut/100;
	debut>fin?debut-=4:debut+=4;
	setTimeout(function(){fade(elt,debut,fin);},0);
}

window.onload=function(){
	var elt = document.getElementById('picture');
	if(IE){
		elt.style.filter='alpha(opacity=0)';
		elt.filters[0].opacity=0;
	}
	else{elt.style.opacity='0';}
	elt.onmouseover = function(){fade(elt, 0, 100)}
	elt.onmouseout = function(){fade(elt, 100, 0)}
}

// ]] -->

</script>

Merci d'avance !!!