11545 sujets

JavaScript, DOM et API Web HTML5

Pages :
(reprise du message précédent)

Que de complication.

Il suffit d'utiliser behavior pour executer une expression du type :

li {
	behavior :expression(addHover(this));
}


Ensuite on définit :

li:hover, li.hover {
	mes styles : mes propriétés
}


Et enfin :

function addHover (el) {
	el.behavior = " "; //Evite au script de tourner en boucle
	el.onmouseenter = function() {
		this.className += ' hover';
	};
	el.onmouseleave = function() {
		this.className.replace(/\bhover\b/,"");
	};
}

Modifié par Shinuza (12 Jul 2007 - 10:53)
Tu l'aimes ma fonction Smiley lol
Mais sans vouloir être méchant avec les autre. Toutes les solutions proposées plus haut son sans queue ni tête.
Certaines n'ont rien à voir avec le problème
Certaines sont super lourdes et pourrissent un peu la compréhension du code après.

Je peux vous assurez qu'il vaut mieux utiliser la méthode présentée ci-dessus par shinuza
Modifié par Gatsu35 (12 Jul 2007 - 10:14)
Gatsu35 a écrit :
Je peux vous assurez qu'il vaut mieux utiliser la méthode présentée ci-dessus par shinuza

Il faudra peut-être l'écrire un peu mieux alors. Smiley rolleyes
// this.className = 'pouet';
this.className += 'hover';
// -> this.className = 'pouethover';

// this.className = 'hover';
this.className.replace(/\hover\b/,"");
// -> this.className = 'hover';

Et en plus :
alert("hover-pouet".replace(/\hover\b/,""));
// -> "-pouet"
Julien Royer a écrit :

Il faudra peut-être l'écrire un peu mieux alors. Smiley rolleyes
// this.className = 'pouet';
this.className += 'hover';
// -> this.className = 'pouethover';

// this.className = 'hover';
this.className.replace(/\hover\b/,"");
// -> this.className = 'hover';

Et en plus :
alert("hover-pouet".replace(/\hover\b/,""));
// -> "-pouet"

Smiley biggol faudra pardonner le monsieur qui a du mal à ecrire une fonction à 9h du mat et qui n'estr pas foutu de la recopier d'ailleurs Smiley lol
Voila une version plus cool qui peut prendre en plus une classe en parametre (si aucune classe, c'est hover par defaut)

/*  addHover :
   Cette fonction ajoute le fonctionnement de la pseudo classe hover en CSS, et seulement pour IE
   Elle se base sur les evenement propres à IE qui sont les evenements qui ont le comportement le plus proche du :hover en CSS.
   Pour utiliser cette fonction il faut le faire en CSS, on peut en plus ajouter en parametre la classe CSS qui sera ajoutée en CSS
   ex :
       #menu ul li {behavior:expression(addHover(this))}
       #menu ul li {behavior:expression(addHover(this, "maclassehover"))}
       Afin de ne pas prendre en compte IE7 en mode strict il suffit de placer la classe .IS_IE avant, cette classe est ajoutée pendant le chargement de la page.
       .IS_IE #menu ul li {behavior:expression(addHover(this))}
*/
function addHover(elm, className) {
	className = className || "hover";
	elm.style.behavior = " ";
	elm.hoverClassName = className;
	elm.onmouseenter = function() {
	   this.className+= ' ' + this.hoverClassName;
	}
	elm.onmouseleave = function() {
	   this.className = this.className.replace(new RegExp("\\b" + this.hoverClassName + "\\b", "g"),"");
	}
} 

Modifié par Gatsu35 (12 Jul 2007 - 12:52)
Shinuza a écrit :
Oups désolé, j'ai tout ré écrit from scratch et j'étais pas bien reveillé Smiley biggrin

L'important c'est que tu sois réveillé pour aller au boulot. Smiley lol
Pages :