Discussion :

[dev14]

Bonjour, je suis débutant en html5, je voudrais savoir comment vous faites pour changer la couleur d'un carré par exemple sans avoir de duplication de code dans le javascript.

Voici mon code :

Code html5

Code :

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

<a href="#"><canvas onmouseover="over()" onmouseout="draw()" id="rect" width="50" height="60"></canvas></a>

Mon code javascript

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
function over(){
 
	var canvas = document.getElementById('rect');  
	var ctx = canvas.getContext('2d');
 
	ctx.fillStyle = "rgba(240,0,0, 1)";  
	ctx.fillRect (0, 7, 24, 24); 
}
 
function draw() {
	var canvas = document.getElementById('rect');  
	var ctx = canvas.getContext('2d');
 
 
	ctx.fillStyle = "rgba(240,95,93, 1)";  
	ctx.fillRect (0, 7, 24, 24); 
 
}

[Invité]

Bonjour,
pourquoi pas simplement en CSS ?

Code css :

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

1
2
3
4
<style type="text/css">
#rect { width:50px; height:60px; background:rgba(240,0,0, 1); }
#rect:hover { background:rgba(240,95,93, 1); }
</style>

Code html :

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

<a href="#"><canvas id="rect"></canvas></a>

[dev14]

Bonjour,

en fait j'ai pris un cas simple d'utilisation. Mais j'aurais dans mon canvas plusieurs formes géométriques, et je voudrais qu'au survol, qu'il n'y en ait que certaines qui réagissent.