Discussion :

[Jinx_]

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.

[Bovino]

Salut,
dans le cas dont tu parles, il vaut mieux passer par onmouseover et onmouseout

[Jinx_]

Oui, d'accord. Mais comment ?

J.

[E.Bzz]

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

A+

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
td { background-color:#xxxxxxx; }
td:hover{ background-color:#yyyyyy;  }

[E.Bzz]

(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+

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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.

[Bovino]

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...

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

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 ?

[jnore]

Bonsoir

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[PapyWeb]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;">&nbsp;</td>