Comment faire lorsque le curseur parcoure une zone A, pour qu'une zone B change de couleur?

Version imprimable

02/04/2010, 09h32
Marc22

Comment faire lorsque le curseur parcoure une zone A, pour qu'une zone B change de couleur?

Bonjour,

Si on a deux div distincts A et B.

comment fait on lorsque le curseur est positionné sur le div A, pour que le div B change de couleur?

j'ai fait ça mais ça marche pas !

Code:

onmouseover=" var test=getElementsByID("B"); test.style.backgroundColor=\'#9932cc\' ";

Oui et je suis débutant.
02/04/2010, 09h35
Bovino

Attention à la syntaxe et à bien imbriquer les quotes :roll:

Code:

onmouseover="document.getElementById('B').style.backgroundColor='#9932cc'"
02/04/2010, 09h44
Marc22

ok merci Bovino ;) , en fait j'ai mis des antislash car je suis dans un echo ' '

L'idéal serait de savoir comment faire lorsqu'on utilise une class et non pas un id dans le div?

en mettant un name="test" dans le div en question,

j'ai tenté ça

Code:

1
2
3
4
5
6
onmouseover="this.style.backgroundColor=\'#9932cc\';
 
for (var i=0;i<document.getElementsByTagName(\'div\').length; i++) {
	if(document.getElementByTagName(\'div\').item(i).name == \'test\') {
		document.getElementByTagName(\'div\').item(i).name.style.backgroundColor=\'#9932cc\' ;}
}">

02/04/2010, 09h57
vermine
Bonjour,

Il y a un point virgule en trop ici:
Code:

1 2 if(document.getElementByTagName(\'div\').item(i).name == \'test\';)
02/04/2010, 09h59
Marc22

Oui merci j'ai rectifié :)

Cette syntaxe me semble plus pratique:

Code:

1
2
3
4
5
6
 
var tab_div = document.getElementsByTagName(\'div\');
for (var i=0;i<tab_div.length; i++) {
	if(tab_div[i].name == \'test\') {
		tab_div[i].style.backgroundColor=\'#9932cc\' ;}
}">

02/04/2010, 10h14
Marc22

Hélas, ça ne marche pas. dsl
02/04/2010, 10h19
vermine

Alors je vais vous demander le code HTML généré. ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
echo '
<div class="contentPublication" onmouseout="this.style.backgroundColor=\'#fafad2\';" 
 
onmouseover="this.style.backgroundColor=\'#9932cc\';
 
var i;
var tab_div = document.getElementsByTagName(\'div\');
for (i=0;i<=tab_div.length; i++) {
	if(tab_div[i].name == \'test\') {
		tab_div[i].style.backgroundColor=\'#000\' ;}
}">
 
 
<div class="basImage" name="test" ><a href="form.php?id=o&rubrique=livre&num_publi='.$result['numpublication'].'"/>Commander</a></div>
</div>
';
}
 
echo '<br/><div name="test">test</div><br/><br/><br/>';

J'ai fait un div name test en bas car j'avais peur que le CSS perturbe les styles de javascript, même si j'ai mis les hover en commentaire dans le CSS.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
div.basImage {
border-top:1px solid purple;
float:left;
font-size:0.9em;
margin-left:-152px;
margin-top:23.3%;
position:relative;
width:23.7%;}
 
div.basImage a {
background-image:url(images/bouton_command.jpg);
color:#fff;
text-decoration:none;
width:100%;
position:absolute;
left:0%;}
 
/*div.basImage a:hover {
color:#AC36FF;}
 
div.basImage:hover {
background-color:#FF00FF;}*/

Ce n'est pas le HTML généré mais on remarque déjà une erreur de syntaxe. Ceci n'est pas très catholique:

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<div class="contentPublication" onmouseout="this.style.backgroundColor=\'#fafad2\';" 
 
onmouseover="this.style.backgroundColor=\'#9932cc\';
 
var i;
var tab_div = document.getElementsByTagName(\'div\');
for (i=0;i<=tab_div.length; i++) {
	if(tab_div[i].name == \'test\') {
		tab_div[i].style.backgroundColor=\'#000\' ;}
}">

Je voyais plutôt qqch comme:

Code:

1
2
 
<div class="contentPublication" onmouseout="this.style.backgroundColor=\'#fafad2\';" onmouseover="this.style.backgroundColor=\'#9932cc\';">

Avec autre part dans des balises ou un fichier Javascript (mais là je n'ai pas saisi quand vous désiriez faire cette opération):

Code:

1
2
3
4
5
6
7
8
 
var i;
var tab_div = document.getElementsByTagName(\'div\');
for (i=0;i<=tab_div.length; i++) {
	if(tab_div[i].name == \'test\') {
		tab_div[i].style.backgroundColor=\'#000\' ;
             }
}

02/04/2010, 10h32
Marc22

Merci, en fait, je voudrais que cette opération se fasse à l'évènement du mouseover.

C'est vrai que ce n'est peut être pas très conventionnel ce que j'ai fait, mais pour tester, je suis allé au plus court. Je vais essayer de passer par une fonction javascript.
02/04/2010, 10h39
Marc22

Mais c'est possible de faire passer une fonction sous un évènement onmouseover?

en général je l'ai toujours fait sur des onclick et j'ai un doute du coup
02/04/2010, 11h10
vermine

Oui, oui, bien entendu. Vous pouvez appeler une fonction sur le onmouseover aussi. :)