Afficher un message au survol d'un élément
Bonjour à tous
Voici le problème que je rencontre
j'ai un tableau avec plusieurs choix, je souhaite qu'au survole, un message explicatif apparaisse.
Voici le tableau
Code:
1
2
3
4
5
6
7
8
| <td class="show" width="117">choix 1
<div class="bulle" style="display: none;">explication 1</div>
</td><td class="show" width="117">choix 2
<div class="bulle" style="display: none;">explication 2</div>
</td><td class="show" width="117">choix 3
<div class="bulle" style="display: none;">explication 3</div>
</td>
.... |
et pour le code javascript, voilà ce que j'ai fait mais ca ne me plait pas
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
| function detail(j, x) {
var detail = document.getElementsByClassName("bulle");
for(i = 0; i < detail.length; i++) {
//console.log(i+"=="+j);
if(i == j) {
detail[i].style.display = x;
}
}
}
function event_detail(){
var view = document.getElementsByClassName("show");
//alert(view.length)
for(i = 0; i < view.length; i++) {
let z = i;
view[i].onmouseover = function() {
//detail[z].style.display = "block";
detail(z, 'block');
this.style.backgroundColor='yellow';
}
view[i].onmouseout = function() {
//detail[z].style.display = "none";
detail(z, 'none');
this.style.backgroundColor='';
}
}
}
window.addEventListener("load",event_detail,true); |
Auriez-vous une autre idée
