Div et l'evenement hover

Question

creusois

26 Jul 2006 à 11:39

Bonjour

Je cherche à faire l'evenement hover sur un div, mais j'ai l'impression que c'est impossible.

Ca ne marcherait donc qu'avec les lien (a) ?

Je voulais faire apparaitre une bordure autour de mon div si il est survollé. Est-ce possible ?

Merci

corven

26 Jul 2006 à 12:06

Oui c'est possible ... sous firefox y'a pas de soucis avec ça ... sous ie si par contre. Mais on peut y remédier.

Tu ouvres ton bloc note et tu copies ça en l'enregistrant au nom de csshover.htc

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *	Whatever:hover - V1.42.060206 - hover & active
 *	------------------------------------------------------------
 *	(c) 2005 - Peter Nederlof
 *	Peterned -  http://www.xs4all.nl/~peterned/
 
 *	License  -  http://creativecommons.org/licenses/LGPL/2.1/
 
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	Credits and thanks to:
 *	Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	------------------------------------------------------------
 */

var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)) [decu]hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
	if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
	window.attachEvent('onunload', unhookHoverEvents);
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!csshoverReg.test(select) || !style) return;

		var pseudo = select.replace(/[^:]+ [decu][a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
		var affected = select.replace(/ [decu]hover|active).*$/, '');
		var elements = getElementsBySelect(affected);
		if(elements.length == 0) return;

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
	hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
	function hookHoverEvent(node, type, handler) {
		node.attachEvent(type, handler);
		hoverEvents[hoverEvents.length] = { 
			node:node, type:type, handler:handler 
		};
	}

	function unhookHoverEvents() {
		for(var e,i=0; i<hoverEvents.length; i++) {
			e = hoverEvents[i]; 
			e.node.detachEvent(e.type, e.handler);
		}
	}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		if(identify) {
			var element = doc.getElementById(identify[1]);
			return element? [element]:nodes;
		}
		
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if(classReg && !classReg.test(node.className)) continue;
				nodes[nodes.length] = node;
			}
		}	
		
		return nodes;
	}
</script>

[/i][/i][/i][/i][/i][/i]
Remplace les smiles par ": (" (sans les guillements et sans l'espace entre les deux points et la parenthèse)

Puis dans ton css tu mets ça :


body {
behavior: url(csshover.htc);
}

Donc tu auras ton div#titre ... tu mets un div#titre:hover {border: 1px solid black } et le tour est joué ... ça marche sous firefox et ie.

Si tu as un problème avec le code du csshover.htc dis le je t'enverrais le code autrement.
Smiley cligne

[/i]

creusois

26 Jul 2006 à 12:11

corven a écrit :
Oui c'est possible ... sous firefox y'a pas de soucis avec ça ... sous ie si par contre. Mais on peut y remédier.

Tu ouvres ton bloc note et tu copies ça en l'enregistrant au nom de csshover.htc

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *	Whatever:hover - V1.42.060206 - hover & active
 *	------------------------------------------------------------
 *	(c) 2005 - Peter Nederlof
 *	Peterned -  http://www.xs4all.nl/~peterned/
 
 *	License  -  http://creativecommons.org/licenses/LGPL/2.1/
 
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	Credits and thanks to:
 *	Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	------------------------------------------------------------
 */

var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)) [decu]hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
	if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
	window.attachEvent('onunload', unhookHoverEvents);
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!csshoverReg.test(select) || !style) return;

		var pseudo = select.replace(/[^:]+ [decu][a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
		var affected = select.replace(/ [decu]hover|active).*$/, '');
		var elements = getElementsBySelect(affected);
		if(elements.length == 0) return;

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
	hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
	function hookHoverEvent(node, type, handler) {
		node.attachEvent(type, handler);
		hoverEvents[hoverEvents.length] = { 
			node:node, type:type, handler:handler 
		};
	}

	function unhookHoverEvents() {
		for(var e,i=0; i<hoverEvents.length; i++) {
			e = hoverEvents[i]; 
			e.node.detachEvent(e.type, e.handler);
		}
	}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		if(identify) {
			var element = doc.getElementById(identify[1]);
			return element? [element]:nodes;
		}
		
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if(classReg && !classReg.test(node.className)) continue;
				nodes[nodes.length] = node;
			}
		}	
		
		return nodes;
	}
</script>

[/i][/i][/i][/i][/i][/i]
Remplace les smiles par ": (" (sans les guillements et sans l'espace entre les deux points et la parenthèse)

Puis dans ton css tu mets ça :


body {
behavior: url(csshover.htc);
}

Donc tu auras ton div#titre ... tu mets un div#titre:hover {border: 1px solid black } et le tour est joué ... ça marche sous firefox et ie.

Si tu as un problème avec le code du csshover.htc dis le je t'enverrais le code autrement.
Smiley cligne

[/i]

Merci beaucoup pour cette reponse tres rapide. Mais effectivement j'ai un petit soucis avec les "fausses" images.

Aurais-tu un url ou il y a la source ?

Encore merci pour ton aide si rapide.

corven

26 Jul 2006 à 12:21

Voici : csshover.htc

Et de rien Smiley cligne

Si tu as d'autres soucis n'hésite pas à demander ...

Si tu veux plus d'info : http://www.xs4all.nl/~peterned/csshover.html

Sebastien D.

26 Jul 2006 à 12:21

Il y a également un problème avec les "[ i ]" qui sont interprétés et mettent le code en italique.

creusois

26 Jul 2006 à 12:47

corven a écrit :
Voici : csshover.htc

Et de rien
Si tu as d'autres soucis n'hésite pas à demander ...

Si tu veux plus d'info : http://www.xs4all.nl/~peterned/csshover.html

Sublime, je ne devrais pas avoir de probleme, je tente de le faire de suite.

Merci

creusois

26 Jul 2006 à 13:02

corven a écrit :
Voici : csshover.htc

Et de rien
Si tu as d'autres soucis n'hésite pas à demander ...

Si tu veux plus d'info : http://www.xs4all.nl/~peterned/csshover.html

Arff, desole mais j'ai tjrs un petit soucis. Pas de probleme sous FireFox mais sous IE ca ne marche pas.

J'ai bien fait ceci dans mon css


body
{
	/*
	 C'est le petit script pour faire un hover sur les div
	*/
	behavior: url(./../csshover.htc);
}

.blogmsg
{
	background-color: #660044;
	border-bottom: 1px dashed #996600;
}

div.blogmsg:hover 
{
	border-bottom: 1px solid #996600;
}

Mais rien à faire.
Ne faudrait-il pas mettre qq chose pour bien stypuler d'utiliser le csshover ? Dans la page html ne faut-il pas faire appel au script dans le header du genre


<script type="text/javascript" src="./csshover.htc"></script>

Merci

corven

26 Jul 2006 à 13:34

Es-tu sûr d'avoir mis le fichier .htc dans le bon répertoire ?

Sinon quand tu lances IE en haut tu dois avoir une barre d'info qui s'affiche ... clic droit puis autoriser ...

Si c'est pas ça je regarderais un peu plus ...

creusois

26 Jul 2006 à 15:23

corven a écrit :
Es-tu sûr d'avoir mis le fichier .htc dans le bon répertoire ?

Sinon quand tu lances IE en haut tu dois avoir une barre d'info qui s'affiche ... clic droit puis autoriser ...

Si c'est pas ça je regarderais un peu plus ...

Effectivement le chemin etait pas bon. C'est bizarre il prend en compte l'url a partir du repertoire du fichier html et non celui du CSS. Alors que pour afficher une image par exempel en background c'est le contraire.

Merci encore

romz

26 Jul 2006 à 15:37

Mais c'est correct point de vue sémantique de faire cette manip' louche ? enfin il me semble qu'en CSS en passant des liens en block je crois on peut faire tout aussi bien que ce que tu veux faire... et ça évite le recours à des solutions aussi étranges... Smiley ohwell

Modifié par romz (26 Jul 2006 - 15:37)

Sujet clos

CSS et mise en forme, CSS3

Div et l'evenement hover