Problème en JavaScript: modification de texte par OnMouseOve

Mella · le 29 Mar 2008 12:31

Bonjour,
je débute en JavaScript et je n'arrive pas à faire fonctionner mon script.
Voici ce que je veux faire: j'ai un tableau dont les cases sont des images, et je vouidrai que lorsqu'on passe la souris sur une des cases du tableau (une image donc), une petite explication apparaisse sur un petit encadré à côté du tableau.

donc je crée une variable "explication", chaine de caractères, qui a au début pour valeur "Passez la souris sur une case du tableau"

Après je fais une fonction (déclarée dans l'entête) pour chaque case du tableau, qui vise à transformer le texte de la variable "explication", pour y mettre à la place l'un texte décrivant la case concernée.

Je fais appel à ces fonction dans les cases du tableau correspondantes, avec l'évènement OnMouseOver.

Et enfin, j'affiche dans le petit encadré, le contenu de la variable "explication".

Pouvez vous me dire quel est le problème avec mon script:, le voilà:
<HEAD>
(...)
<SCRIPT language="JavaScript">
explication= new String("Passez la souris sur une case de votre choix");
function Case1(explication) {explication="texte qui décrit la case 1"}
function Case2(explication) {explication="texte qui décrit la case 2"}
/*(etc... autant de fonctions que de cases*/
</SCRIPT>
(...)
</HEAD>

<BODY>
(...)

<table>
<tr>
<td> <IMG SRC="case1.GIF" onMouseOver="Case1(explication)"> </td>
<td> <IMG SRC="case2.GIF" OnMouseOver="Case2(explication)"> </td>
//(etc...)
</table>

/*Encadré (tableau à une ligne et une colonne) qui suit le tableau:*/
<tABLE >
<tr> <td>
<U> Explication: </U>
<BR>
<script language=JavaScript> document.write(expli) </script>
</td> </tr>
</TABLE>

(...)
</BODY>

Problème: au début il y a bien dans l'encadré la valeur de départ de "explication" ("Passez la souris sur une case de votre choix"), mais après si je passe la souris sur une case du tableau, ça n'a aucun effet.

Merci d'avance à tous ceux qui pourraient m'aider à résoudre ce problème.

gael49 · le 29 Mar 2008 15:30

Salut !

Je pense que tu devrais plutôt n'utiliser qu'une fonction pour toutes les cases avec un switch pour choisir le texte. Pour l'instant le paramètre "explication" de ta fonction ne sert à rien, il faut déclarer ta variable à l'intérieur. De plus tes fonctions "caseX" changent la valeur de la variable mais pas le texte affiché...

Voici un exemple qui pourrait fonctionner (à tester, j'ai peut-être oublié quelque chose) :

Code: Tout sélectionner: /*** fonction javascript ***/ function explications(num_case) { switch(num_case) { case 1 : document.getElementById('cadre_explication').innerHTML = "texte qui décrit la case 1."; break; case 2 : document.getElementById('cadre_explication').innerHTML = "texte qui décrit la case 2."; break; case 3 : document.getElementById('cadre_explication').innerHTML = "texte qui décrit la case 3."; break; default : document.getElementById('cadre_explication') = "Passez la souris sur une case de votre choix."; } }

Code: Tout sélectionner:  <IMG SRC="case1.GIF" onMouseOver="javascript:explications(1)">

Code: Tout sélectionner:  <TABLE > <tr> <td> <U> Explication: </U> <BR /> <div id='cadre_explication'>Passez la souris sur une case de votre choix.</div> </td> </tr> </TABLE>

document.getElementById('cadre_explication').innerHTML correspond au contenu de la div "cadre_explication". On lui donne différentes valeurs selon le paramètre "num_case" (numéro de la case).

Bon courage, n'hésite pas à demander des précisions si tu ne comprends pas tout.

Problème en JavaScript: modification de texte par OnMouseOve

Problème en JavaScript: modification de texte par OnMouseOve

Sujets similaires

Qui est en ligne