Rollover javascript tableau

**sitschner** · 31/05/2008, 20h39

Bonjour
J'ai un petit soucis pour un effet de rollover sur un tableau

Code :

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

1
2
3
4
5
6
7
8
9
10
function mouseover(id){
document.getElementById('AA').style.backgroundImage='url(skin/_img/b1.gif)';
document.getElementById('BB').style.background='#f0f0f0';
document.getElementById('CC').style.backgroundImage='url(skin/_img/b2.gif)';
}
function mouseout(id){
document.getElementById('AA').style.backgroundImage='url(skin/_img/b3.gif)';
document.getElementById('BB').style.background='';
document.getElementById('CC').style.backgroundImage='url(skin/_img/b3.gif)';
}

Code :

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

1
2
3
4
5
6
7
8
 
<table width="100%" border="0" cellspacing="0" cellpadding="0"  onmouseout="javascript:mouseout(this);" onmouseover="javascript:mouseover(this);">
<tr>
<td id="AA" width="3">&nbsp;</td>
<td id="BB">&nbsp;</td>
<td id="CC" width="3"> &nbsp; </td>
</tr>
</table>

Le script fonctionne correctemment, par contre je n'arrive pas a utiliser ce systeme si j'ai plusieurs tableau sur la meme page avec ce systeme de rollover.

Quelqu'un aurait une idée?
Je vous remercie par avance

**htr999** · 31/05/2008, 21h26

A priori, un document ne peut avoir plusieurs élément avec le meme ID
peux-tu donner ton code en complet ?.?

**htr999** · 31/05/2008, 21h51

En attendant, essaie ceci

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
<head>
<style>
td { padding:10px; border: 1px solid; }
.elem1Over { background-color: red; color: yellow; cursor: pointer;}
.elem2Over { background-color: black; color: white; cursor: pointer; }
.elem3Over { background-color: green; color: yellow; cursor: pointer; }
.elem1Out { background-color: white; color: black; }
.elem2Out { background-color: white; color: black; }
.elem3Out { background-color: white; color: black; }
</style>
 
<script>
function mouseout(obj){
	var tabTds = obj.getElementsByTagName('td');
	tabTds[1].className="elem1Out";
	tabTds[2].className="elem2Out";
	tabTds[3].className="elem3Out";
}
 
function mouseover(obj){
	var tabTds = obj.getElementsByTagName('td');
	tabTds[1].className="elem1Over";
	tabTds[2].className="elem2Over";
	tabTds[3].className="elem3Over";
}
</script>
</head>
 
<body>
<table onmouseout="mouseout(this);" onmouseover="mouseover(this);">
	<tr center>
		<td colspan="3" align="center">Table 1</td>
	</tr>
	<tr>
		<td>1e element</td>
		<td>2e element</td>
		<td>3e element</td>
	</tr>
</table>
 
<table onmouseout="mouseout(this);" onmouseover="mouseover(this);">
	<tr center>
		<td colspan="3" align="center">Table 2</td>
	</tr>
	<tr>
		<td>1e element</td>
		<td>2e element</td>
		<td>3e element</td>
	</tr>
</table>
</body>

et si jamais cela t'intéresse ...

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
60
61
62
63
<head>
<style>
td{
padding:10px;
border: 1px solid;
}
.out{
background-color: white;
color: black;
}
.over{
background-color: green;
color: yellow;
cursor: pointer;
}
</style>
 
<script>
function mouseout(obj){
	obj.className = "out";
}
 
function mouseover(obj){
	tab = document.getElementsByTagName("td");
	for (i=0; i<tab.length; i++){
		if (tab[i] != obj)
			tab[i].className="out";
		else
			tab[i].className="over";
	}
}
</script>
</head>
 
<body>
<table>
	<tr center>
		<td colspan="2" align="center">Table 1</td>
	</tr>
	<tr>
		<td class="out" onmouseout="mouseout(this);" onmouseover="mouseover(this);">1e element</td>
		<td class="out" onmouseout="mouseout(this);" onmouseover="mouseover(this);">2e element</td>
	</tr>
	<tr>
		<td class="out" onmouseout="mouseout(this);" onmouseover="mouseover(this);">3e element</td>
		<td class="out" onmouseout="mouseout(this);" onmouseover="mouseover(this);">4e element</td>
	</tr>
</table>
 
<table>
	<tr center>
		<td colspan="2" align="center">Table 2</td>
	</tr>
	<tr>
		<td class="out" onmouseout="mouseout(this);" onmouseover="mouseover(this);">1e element</td>
		<td class="out" onmouseout="mouseout(this);" onmouseover="mouseover(this);">2e element</td>
	</tr>
	<tr>
		<td class="out" onmouseout="mouseout(this);" onmouseover="mouseover(this);">3e element</td>
		<td class="out" onmouseout="mouseout(this);" onmouseover="mouseover(this);">4e element</td>
	</tr>
</table>
</body>

**sitschner** · 31/05/2008, 22h26

Merci pour ton aide et ta réponse rapide
Ca marche parfaitement pour moi :-)
En tout cas c'est bien sympa

Merci au toi codeur javascript :-)

Rollover javascript tableau

JavaScript

Vue hybride

Discussions similaires

Partager

Partager