changement de texte dans une partie de la page onmouveover sur un image

**slim** · 26/10/2006, 19h04

Salut tout le monde !

je vous présente mon problème...
j'ai un menu en haut d'une page. En dessous, j'ai mis une bande (image) sur laquelle j'affiche un texte.
Le menu possède quatre images. au passage de la souris sur une image, je voudrais afficher un texte différent. Chaque texte affiché correspond à une image du menu.
Quand je passe le pointeur de la souris sur les images pour changer de rubrique, aucun texte ne s'affiche sur la barre en dessous. En gros, ca marche pas.

Alors voila mon code :

au debut du document :

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
<script language="javascript" type="text/javascript">
				function afficher(int etat){
					switch (etat){
  						case 0:
  						default:
    						message = "Présentation du Sommet Mondial de la Société de l'Information";
    						alert(message);
   							break;
  						case 1:
    						message = "SMSI - Genève 2003";
    						alert(message);
							break;
						case 2:
    						message = "SMSI - Tunisie 2005";
    						alert(message);
							break;
						case 3:
    						message = "SMSI - Suivi";
    						alert(message);
							break;
					}
				}
				function change_etat(int val){
					int etat;
					etat = val;
				}
		</script>

Code du menu :

Code :

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

1
2
3
4
5
6
7
8
9
10
<table width="100%"  height="40" border="0" align="center" cellpadding="0" cellspacing="0" background="...\image_background.gif"/>
      		<tr>
        		<td><p align="center"><a href=".../index.php">
					<img  src=".../image1.gif" 
					onmouseover="src='image_over1.gif' ;  change_etat(0)" 
					onmouseout="src='.../image1.gif'"	 border="0" />
					</a></p>
			</td> <!-- le bloc <td> est repete 4 fois avec 4 images diffrentes. La valeur de la fonction change_etat() est soit 0, soit 1, soit 2, soit 3 -->
                </tr>
</table>

Code de la barre en dessous :

Code :

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

1
2
3
4
5
6
7
8
<table  width="100%"  height="30" border="0" align="center" cellpadding="0" cellspacing="0" 
		background="...\image_background.gif"/>
			<tr>
        		<td colspan="4" align="center">
        			<script language="javascript" type="text/javascript"> afficher(etat));</script>
        		</td>
         		</tr> 
</table>

Merci de m'aider

**karibouk** · 27/10/2006, 11h04

Pas de typages en javascript d'aprés ce que je crois, int val ça marche pas. Enfin pas chez moi. De plus tu avais déclaré etat dans une fonction, c'est pas trés pratique surtout si afficher est appelé avant.

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
 
<script language="javascript" type="text/javascript">
				var etat = 0;
				function afficher(etat){
					switch (etat){
  						case 0:
  						default:
    						message = "Présentation du Sommet Mondial de la Société de l'Information";
    						alert(message);
   							break;
  						case 1:
    						message = "SMSI - Genève 2003";
    						alert(message);
							break;
						case 2:
    						message = "SMSI - Tunisie 2005";
    						alert(message);
							break;
						case 3:
    						message = "SMSI - Suivi";
    						alert(message);
							break;
					}
				}
				function change_etat(val){
					etat = val;
				}
		</script>
 
</head>
 
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
</body></html>
<table width="100%"  height="40" border="0" align="center" cellpadding="0" cellspacing="0" background="...\image_background.gif"/>
      		<tr>
        		<td><p align="center"><a href="../index.php">
					<img  src=".../image1.gif" 
					onmouseover="src='image_over1.gif' ;  change_etat(0)" 
					onmouseout="src='.../image1.gif'"	 border="0" />
					</a></p>
			</td> <!-- le bloc <td> est repete 4 fois avec 4 images diffrentes. La valeur de la fonction change_etat() est soit 0, soit 1, soit 2, soit 3 -->
                </tr>
</table>
 
<table  width="100%"  height="30" border="0" align="center" cellpadding="0" cellspacing="0" 
		background="...\image_background.gif"/>
			<tr>
        		<td colspan="4" align="center">
        			<script type="text/javascript"> 
					afficher(etat);
				</script>
        		</td>
         		</tr> 
</table>

**slim** · 28/10/2006, 18h15

Merci pour la réponse.

Ok pour la declaration. Tu as raison mais ca ne marche toujours pas.
Il ne me renvoie rien.

**slim** · 29/10/2006, 13h13

en fait, ce qui ne marche pas, je crois, c'est les deux instructions de 'onmouseover'. Je crois que la premiere (affichage de l'image) est executée mais non la deuxieme.

Code :

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

onmouseover="src='image_over1.gif' ;  change_etat(0)"

merci.

**slim** · 30/10/2006, 00h53

La solution :

dans le <head> :

Code :

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

1
2
3
4
5
6
7
8
<script language="javascript" type="text/javascript">
				descr=new Array;
					descr[0]="";
					descr[1]="Texte1";
					descr[2]="Texte2";
					descr[3]="Texte3";
					descr[4]="Texte4"; 
</script>

Sur l'image cliquable :

Code :

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

1
2
onmouseover="document.getElementById('expl').innerHTML =descr[3]"
onmouseout="document.getElementById('expl').innerHTML =descr[0]"

Et dans l'endroit ou on veut afficher le texte :

Code :

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

<div id="expl">Texte à afficher</div>

A+

changement de texte dans une partie de la page onmouveover sur un image

JavaScript

Discussions similaires

Partager

Partager