onmousemove dans une balise TD

Version imprimable

10/09/2009, 20h16
Jinx_

onmousemove dans une balise TD

Bonjour,

J'ai un tableau basic, par exemple 2x2 (2 lignes, 2 colonnes)

Je souhaiterais que pour chaque cellule qui est 'visité par la sourie" (évènement onmousemove) je colorie la cellule dans une certaine couleur. Et revenir a la couleur initiale lorsque la sourie a quitté l'espace de la cellule. Comment faire ?

D'une façons générale, comment appréhender les évènement onclick, onmousemove etc. ? J'utilise Visual Studio Web Develoment 2008 et l'InteliSense (qui est génial) m'offre ces fonctions onmousemouve, etc. ?

Merci de toute aide,

J.
11/09/2009, 08h10
Bovino

Salut,
dans le cas dont tu parles, il vaut mieux passer par onmouseover et onmouseout :?
11/09/2009, 15h22
Jinx_

Oui, d'accord. Mais comment ?

J.
11/09/2009, 15h35
E.Bzz

Bonjour,
un exemple de la FAQ, à adapter ...

A+
11/09/2009, 16h08
Causa Sui
Dans ton cas particulier de survol, je n'ai qu'un conseil : ne surtout pas utiliser du JS pour faire ça. Javascript c'est pour l'application ; pour la présentation, c'est CSS.
CSS fait ce genre de choses très bien, et de façon plus sûr (même si ça ne fonctionne pas sous IE6).
Code:

1 2 td { background-color:#xxxxxxx; } td:hover{ background-color:#yyyyyy; }
11/09/2009, 16h22
E.Bzz

Citation:

Envoyé par Causa Sui

(même si ça ne fonctionne pas sous IE6).

C'est, hélas (je dis bien "hélas" !) une raison suffisante dans certains cas, pour faire autrement ...

A+
12/09/2009, 15h20
Jinx_
Merci Causa Sui pour ta réponse.

Néanmoins si je ne veux pas utiliser des feuilles de style, comment faire ?

J'ai essayé ca:
Code:

1 2 3 <td style="background-color:#ff00ff;" style="hover: background-color:#00F000;"> </td>
La seule chose qui fonctionne c'est le premier "style" avec la background color. Le second avec le "hover" ne fonctionne pas. Une idée ?

J.
12/09/2009, 16h15
Causa Sui

Très bonne question... je ne suis pas sur que ce soit faisable sans feuille de style en fait.
Pour IE6, je suis d'accord, mais c'est pas une raison pour changer...
Le mieux est de faire ça en CSS et d'ajouter un bugfix pour IE6, comme ça le jour où on oublie IE (ce qui n'arrivera jamais assez vite), on a qu'a supprimer le fichier javascript et garder une feuille de style, ce qui est mieux.
12/09/2009, 19h08
Bovino

Citation:

Envoyé par Causa Sui

Très bonne question... je ne suis pas sur que ce soit faisable sans feuille de style en fait.

Non, je ne crois pas non plus que les styles inline acceptent les pseudos éléments et les pseudo classes...

Citation:

Pour IE6, je suis d'accord, mais c'est pas une raison pour changer...
Le mieux est de faire ça en CSS et d'ajouter un bugfix pour IE6, comme ça le jour où on oublie IE (ce qui n'arrivera jamais assez vite), on a qu'a supprimer le fichier javascript et garder une feuille de style, ce qui est mieux.

Oui, je suis bien d'accord ! Pourquoi vouloir s'embêter à faire avec JavaScript ce qui est prévu de faire en CSS :?

Citation:

Envoyé par Jinx_

Néanmoins si je ne veux pas utiliser des feuilles de style

Quelle drôle d'idée... Il y a une raison particulière ?

Bonsoir

Tiens une petite classe non intrusive qui doit réaliser ce que tu attends.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
var gestionTD=
	{
	colorOver	:	"red",//METTRE ICI LA COULEUR DESIREE AU PASSAGE DE LA SOURIS
	colorOld	:	"",
 
	recuperation: function(table)
		{
		if(table != undefined)
			{
			if(document.getElementById(table))
				{
				this.tab=document.getElementById(table).getElementsByTagName('TD');
				}
				else
				{
				alert('Le choix de la table n\'existe pas !');return;
				}
 
			}
			else
			{
			this.tab=document.body.getElementsByTagName('TD');
			}
 
		this.associerEvenements();
		},
 
	associerEvenements : function()
		{
		for(var i=0; i< this.tab.length; i++)
			{
			if(document.all)//POUR IE
				{
				this.tab[i].setAttribute('onmouseover',function(){gestionTD.colorer(this);} );
				this.tab[i].setAttribute('onmouseout',function(){gestionTD.decolorer(this);} );
				}
				else //FF ET LES AUTRES
				{
				this.tab[i].onmouseover	=function() {gestionTD.colorer(this);};
				this.tab[i].onmouseout	=function() {gestionTD.decolorer(this);};
				}
 
			}
		},
	colorer : function(td)
		{
		this.colorOld=td.style.backgroundColor;
		td.style.backgroundColor =gestionTD.colorOver ;
		},
 
	decolorer:function (td)
		{
		td.style.backgroundColor =gestionTD.colorOld;
		}
 
	};
 
gestionTD.recuperation(id);//Mettre le id de la table concernée par la gestion des td ou si on ne mets rien, tous les td du body seront concernés

Mettre ce script dans un fichier js qui s'appèlera : gestion_td.js

Il te faut mettre aussi l'instruction suivante dans la page:

Code:

1
2
 
<script type="text/javascript" src="gestion_td.js"></script>

13/09/2009, 18h02
Jinx_
OK merci, jnore. Je m'en suis sorti en utilisant le onmouseover et onmouseout en javascript. Très rapide.

UNe autre question (peut-être pas dans le bon forum, tant pis). J'ai a plusieurs reprise dans un page la syntaxe suivante:
Code:

1 2 <font color=blue> XXXXX </font>
Est-ce que on peut mêtre tous ca dans une feuille de style ? Et comment utiliser cette feuille de style dans le code html ?

Merci.

J.
13/09/2009, 20h41
PapyWeb
Citation:
Envoyé par Jinx_

Merci Causa Sui pour ta réponse.

Néanmoins si je ne veux pas utiliser des feuilles de style, comment faire ?

J'ai essayé ca:

Code:

1 2 3 <td style="background-color:#ff00ff;" style="hover: background-color:#00F000;"> </td>

La seule chose qui fonctionne c'est le premier "style" avec la background color. Le second avec le "hover" ne fonctionne pas. Une idée ?

J.
------------------------------------------------------
Je ferais çà plutôt :
<td style="background-color:#ff00ff; hover: background-color:#00F000;"> </td>