Problème un javascript avec onMouseOver

Résolu/Fermé
camille - 29 mars 2008 à 11:02
 Alex240 - 11 janv. 2011 à 17:40
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.
A voir également:

3 réponses

carbon3 Messages postés 470 Date d'inscription mercredi 20 février 2008 Statut Membre Dernière intervention 6 janvier 2013 73
29 mars 2008 à 13:31
salut,
tiens je t'ai réécris ton code pour que cela fonctionne. Tu vois c'est un peu plus léger comme ça, non ?
ah, tu feras gaffe aux src des img, j'ai changé les valeurs pour tester chez moi.

<html>
<HEAD> 

<SCRIPT language="JavaScript"> 
explication= new Array("Passez la souris sur une case de votre choix","texte qui décrit la case 1","texte qui décrit la case 2"); 

function Any_Case(flag) {
	document.getElementById('explik_td').innerHTML=explication[flag];
} 
function Blank_Case() {
	document.getElementById('explik_td').innerHTML=explication[0];
}
</SCRIPT>

</HEAD> 
<BODY>

<table>
<tr>
<td><IMG SRC="image1.ext" onMouseOver="Any_Case(1)" onMouseOut="Blank_Case()"></td>
<td><IMG SRC="image2.ext" OnMouseOver="Any_Case(2)" onMouseOut="Blank_Case()"></td>
</tr>
</table>

<table>
<tr><td id="explik_td">
<U> Explication: </U> 
<BR>
</td></tr> 
</TABLE> 
<script language="javascript">
document.getElementById('explik_td').innerHTML=explication[0];
</script>
</BODY>
</html>
2
Ok, merci beaucoup, ça a marché;
bon weekend
2
Pas mal du tout le script, merci !
Et auriez-vous une solution à apporter dans le cas où les "textes qui décrivent les cases" sont des paragraphes assez importants avec sauts de lignes et compagnie ? Y'a-t-il un moyen de ne pas insérer ces paragraphes dans le header mais plutôt dans le body, ou ailleurs, et de faire appel à eux dans le script du header ?
1