Hover et internet explorer

Bonsoir!
j'applique des hover sur des éléments. j'utilise du javascript pour cela pour que ça fonctionne sous internet explorer.
ça marche quand c'est un seul élément. le problème c'est que je veux appliquer cela à beaucoup d'element. chaque élément à un comportement bien précis différent des autres sous l'effet du hover
mon javascript:

if(!window.Event){ //IE mais pas Opéra

	document.onmouseover=function(){
		x=window.event.srcElement;
		if(x.tagName=="SPAN")x.id="hoverInput_IE";
	};

	document.onmouseout=function(){
		if(x.tagName=="SPAN")x.id="hover_IE";
	};

}

echo '<div >'."\n";
 echo "<span id='zoneAccueil'>";
	echo ancre("#","ACCUEIL");
  echo "</span>";
echo '</div>

<!-- je veux appliquer un autre hover sur ce element -->
echo '<div >'."\n";
 echo "<span id='zone2'>";
	echo ancre("#","TEST");
  echo "</span>";
echo '</div>

#zoneAccueil
	{
	position: relative;
	width: 81px;
	height:52px;
	float: left;
	margin-right:2px;
	/*padding-top:15px;*/
	text-align:center;	
	background: url(img.jpg) no-repeat;
	}

#zoneAccueil:hover {
	background: url(img_survole.jpg);
}
#hoverInput_IE
{position: relative;
	width: 81px;
	height:52px;
	float: left;
	margin-right:2px;
	background: url(img_survole.jpg)
}
#hover_IE
{
	position: relative;
	width: 81px;
	height:52px;
	float: left;
	margin-right:2px;
	/*padding-top:15px;*/
	text-align:center;	
	background: url(img.jpg) no-repeat;
}

merci
Modifié par brudao (19 Mar 2010 - 18:06)

Salut,

J'ai pas forcément compris ce que tu souhaitais faire, hormis appliquer des comportement hover à différents éléments.

Via jQuery (et sûrement via d'autres frameworks) tu pourrais faire ça simplement, sans avoir à te soucier d'IE (puisque jQuery est compatible IE6+) :

jQuery(function ($) {

	// Un élément avec un comportement bien distinct
	$("#zone_accueil").hover(
	function () {
		$(this).css({'background-image':'url(img_survole.jpg)'});
	},
	function () {
		$(this).css({'background-image':'url(img.jpg)'});
	});


	// et un autre élément avec un autre comportement
	$("#zone_2").hover(
	function () {
		$(this).css({'background-image':'url(img_survole_2.jpg)'});
	},
	function () {
		$(this).css({'background-image':'url(img_2.jpg)'});
	});
});

Ou si tu préfères gérer les comportement CSS hors du javascript :

jQuery(function ($) {

	// Un élément avec un comportement bien distinct
	$("#zone_accueil").hover(
	function () {
		$(this).addClass('zone_accueil_hover');
	},
	function () {
		$(this).removeClass('zone_accueil_hover');
	});


	// et un autre élément avec un autre comportement
	$("#zone_2").hover(
	function () {
		$(this).addClass('zone_2_hover');
	},
	function () {
		$(this).removeClass('zone_2_hover');
	});
});

Du coup, on pourrait simplifier grandement. On part du principe que chaque élément auquel tu souhaites apporter un comportement possède la classe ".lien" :

jQuery(function($){
	$(".lien").hover(
		function () {
			// On va récupérer l'id
			identifiant=$(this).attr('id');
			// Et on lui assigne une classe supplémentaire pour le comportement en survol 
			$(this).addClass(identifiant+'_hover'); 
		}, 
		function () {
			// On retire cette classe supplémentaire en mouseOut 
			$(this).removeClass(identifiant+'_hover'); 
		}
	);
});

Modifié par ZeB_panam (21 Mar 2010 - 11:06)