Infobulle, HTML et JavaScript

**varilux56** · 04/09/2014, 15h35

Bonjour.

J'ai un problème avec un code assez simple pour afficher une ligne de texte quand je passe la souris sur un élément d'un menu. chaque élément de menu est une image ou un texte. Mais cela fonctionne sur deux ou trois éléments seulement.
Voici déjà le code.

Code javascript :

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
  // Fichier js
 
 function changetext(id,choix)
      {
        if(choix==1){
         area = document.getElementById(id);
         area.innerHTML="Historique du roman au gothique flamboyant, St Nizier, galerie de photos...";
*        }
        if(choix==2){
         area = document.getElementById(id);
         area.innerHTML="Les personnages qui ont marqués l'histoire de l'église St-Nizier...";
        *}
        if(choix==3){
         area = document.getElementById(id);
         area.innerHTML="La structure de l'association, son fonctionnement, ses adérents...";
         }
        if(choix==4){
         area = document.getElementById(id);
         area.innerHTML="Les activités de l'association, visites, conférences, concerts...";
*        }
        if(choix==5){
         area = document.getElementById(id);
         area.innerHTML="Les projets de restauration de l'église, des statues, des tableaux...";
        *}
        if(choix==6){
         area = document.getElementById(id);
         area.innerHTML="Appel de dons et de partenariat particuliers, entreprises, universités...";
         }
        if(choix==7){
         area = document.getElementById(id);
         area.innerHTML="";
         }
       }

Code html :

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
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
 
  <script src="js/Infos_Bulle.js" type="text/javascript"></script>
 <title></title>
  </head>
  <body>
    <p><br>
 
      <a href="Index.html"><img this src="Accueil01.jpg"></a>
      <a href="Eglise.html"onmouseover="changetext('txt',1)"onmouseout="changetext('txt',7)"><img this src="Eglise00.jpg"></a>
      <a href="Personnages_Importants.html"onmouseover="changetext('txt',2)"onmouseout="changetext('txt',7)"><img this src="Personnages00.jpg"></a>
      <a href="Association.html"onmouseover="changetext('txt',3)"onmouseout="changetext('txt',7)"><img this src="Association00.jpg"></a>
      <a href="Activites.html"onmouseover="changetext('txt',4)"onmouseout="changetext('txt',7)"><img this src="Activites00.jpg"></a>
      <a href="Projets.html"onmouseover="changetext('txt',5)"onmouseout="changetext('txt',7)"><img this src="Projets00.jpg"></a>
      <a href="Activites.html"onmouseover="changetext('txt',6)"onmouseout="changetext('txt',7)"><img this src="Aidez_nous00.jpg"></a>
    </p>
    <span id="txt" style="position:absolute; left:263px; top:0px; width:600px; height:186px; z-index:5; visibility: visible">
 
    </span>
  </body>
</html>

Etrangement, si chaque ligne (<a.....>......</a>) est séparée par des balises <p></p>, tout fonctionne. Mais ce n'est pas ce que je veux bien sur.
J'en conclus que le nombre d'instructions par bloc à gérer pour le navigateur est trop important.

Quelqu'un aurait il une idées.
Merci.

**crozet.magenta** · 04/09/2014, 17h15

Bonjour. Pourquoi ne pas utiliser l'attribut title pour une infobulle sur un lien?

**varilux56** · 04/09/2014, 18h38

Bonjour.

Title ne convient pas : Trop petit et trop lent.

Le code que j'ai montré convient parfaitement à mon application, mis à part le problème rencontré bien sur.

**crozet.magenta** · 04/09/2014, 21h07

j'avais regardé ton code en diagonale, je n'avais pas vu qu'il y a des trucs qui vont pas dedans....

dans ton js tu as des étoiles qui se baladent ligne 8, 12, 20, 24 déjà, vire les ça ira mieux.
pour tes images tu as un attribut "this" ? ça n'existe pas... et tu devrais mettre des espaces entre tes attributs pour faciliter la lecture

une fois ces erreurs corrigées ça fonctionne, je l'ai testé

**varilux56** · 05/09/2014, 02h36

Bon soir.

Les étoiles dans le js, je ne sais pas d'où elle viennent.

Les (this) sont le résulta d'un ultime essai. Je les ai viré, mais il n'y a rien de mieux.
Cela marche chez toi ... Mystère. quand aux espaces, je ne vois pas !

**Vil'Coyote** · 05/09/2014, 15h30

quand aux espaces, je ne vois pas !

Code :

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

<a href="Eglise.html"onmouseover="changetext('txt',1)"onmouseout="changetext('txt',7)"><img this src="Eglise00.jpg"></a>

Code :

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

<a href="Eglise.html" onmouseover="changetext('txt',1);" onmouseout="changetext('txt',7);"><img this src="Eglise00.jpg"></a>

pour ma part le code en question marche sur FF et ie10, donc tu test avec quoi de ton côté?

Infobulle, HTML et JavaScript

HTML

Vue hybride

Discussions similaires

Partager

Partager