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 , 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é?

**crozet.magenta** · 05/09/2014, 16h30

moi je l'ai testé avec chrome 37 et opera 12

**varilux56** · 05/09/2014, 17h57

J'ai le même résultat sous IE11 et Firefox 29.0.1

Je précise que le code présente 6 éléments de menu. Le pointeur souris apparait avec la main seulement sur les trois premiers éléments, ainsi que le message -infobulle-

Si chaque ligne est suivie d'un retour chariot 6 éléments fonctionnent. également si chaque élément est entre la balise ..

C'est un peu comme si la ligne de code

Code :

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

1
2
3
4
5
6
7
<a href="Index.html"><img src="Accueil01.jpg"></a>
      <a href="Eglise.html"onmouseover="changetext('txt',1)"onmouseout="changetext('txt',7)"><img src="Eglise00.jpg"></a>
      <a href="Personnages_Importants.html"onmouseover="changetext('txt',2)"onmouseout="changetext('txt',7)"><img src="Personnages00.jpg"></a>
      <a href="Association.html"onmouseover="changetext('txt',3)"onmouseout="changetext('txt',7)"><img src="Association00.jpg"></a>
      <a href="Activites.html"onmouseover="changetext('txt',4)"onmouseout="changetext('txt',7)"><img src="Activites00.jpg"></a>
      <a href="Projets.html"onmouseover="changetext('txt',5)"onmouseout="changetext('txt',7)"><img src="Projets00.jpg"></a>
      <a href="Activites.html"onmouseover="changetext('txt',6)"onmouseout="changetext('txt',7)"><img src="Aidez_nous00.jpg"></a>

était trop longue pour l'interpréteur du navigateur.

Etrange non ? et dommage car cela permettrait un model de menu plutôt simple à réaliser, avec des commentaires facile à changer pour plusieur pages présentant le même menu.

**cedsun** · 05/09/2014, 19h39

C'est résolu ou pas ?

Chez moi, ça marche parfaitement...

**crozet.magenta** · 06/09/2014, 11h40

dans la console javascript du navigateur tu as des erreurs ?
pour ie : menu Outils > Outils de développement
pour firefox : menu Firefox > Développement web > Console Web et Console d'erreurs

**varilux56** · 06/09/2014, 14h32

Non ! Aucune erreur signalée.

**NoSmoking** · 06/09/2014, 14h51

Bonjour,
le code que tu as mis marche même si ce n'est pas un exemple du genre

Ce genre de manipulation ce fait de nos jours en CSS pur.

Pour en revenir à ton soucis
- Testes tu avec le même code que celui que tu as fourni ?
- Es tu sûr qu'il n'y a pas un élément au dessus de tes images non accessibles par le mouseover ?

**varilux56** · 06/09/2014, 16h19

Bonjour

Je voudrais bien le faire en CSS mais cela m'échappe totalement. J'ai choisi ce code après de longues recherches, je le trouve simple à appliquer et, je peux changer les textes de commentaires (infobulle) de toutes les pages en une fois.

J'ai fait un test avec Goooglechrome, j'ai le même résultat.

Oui le code que j'ai communiqué est celui que je teste.
Il n'y a pas d'élément au dessus des images de menu.

Si chaque ligne est suivie d'un retour chariot tout fonctionne parfaitement mais cela donne un menu vertical. C'est pas ce que je veux hélas.

J'ai un essai avec des images plus grande 400x400 (les éléments de menu font 120x25) cela fonctionne presque bien. C'est comme si le navigateur avait du mal à repérer le pointeur de la souris. Précision : Si je remplace les images représentant le menu par du texte, cela ne fonctionne pas mieux, le navigateur repère les deux ou trois premier éléments.

**NoSmoking** · 06/09/2014, 17h00

Ajoutes dans le CSS de ta page

Code :

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

1
2
3
4
5
6
span{
  background:#FEE;
}
p{
  background:#EEF;
}

et observe ce qui se passe, n'oublie pas que ton SPAN de départ possède une height:186px.

**varilux56** · 06/09/2014, 17h49

Mille merci NoSmoking.

Effectivement en réduisant la hauteur de l'affichage qui devait empiéter sur la zone de menu, cela fonctionne.
height:186px ---> height:30px

Tu me diras : Il suffisait d'y penser....

Mon problème est résolu.

**NoSmoking** · 06/09/2014, 19h34

Effectivement en réduisant la hauteur de l'affichage qui devait empiéter sur la zone de menu, cela fonctionne.
height:186px ---> height:30px

tu n'as pas obligation de déclarer une hauteur.

Pour ce qui est d'un code plus "propre"

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

et pour une version en pur CSS

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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Hover</title>
<style>
html, body{
  margin:0;
  padding:0;
  font: 1em/1.5 Verdana, sans-serif;
}
#nav{
  margin: 2em;
}
a, a img{
  border:0;
  text-decoration:none;
}
a span{
  position:absolute;
  top:0;
  left:12em;
  display:none;
  padding:0.5em;
  color:#000;
}
a:hover span{
  display:block;
}
</style>
</head>
<body>
  <div id="nav">
    <a href="Index.html">
      <img src="Accueil01.jpg" alt="Accueil">
    </a>
    <a href="Eglise.html">
      <img src="Eglise00.jpg" alt="Eglise">
      <span>Historique du roman au gothique flamboyant, St Nizier, galerie de photos...</span>
    </a>
    <a href="Personnages_Importants.html">
      <img src="Personnages00.jpg" alt="Personnage">
      <span>Les personnages qui ont marqués l'histoire de l'église St-Nizier...</span>
    </a>
    <a href="Association.html">
      <img src="Association00.jpg" alt="Association">
      <span>La structure de l'association, son fonctionnement, ses adérents...</span>
    </a>
    <a href="Activites.html">
      <img src="Activites00.jpg" alt="Activité">
      <span>Les activités de l'association, visites, conférences, concerts...</span>
    </a>
    <a href="Projets.html">
      <img src="Projets00.jpg" alt="Projets">
      <span>Les projets de restauration de l'église, des statues, des tableaux...</span>
    </a>
    <a href="Activites.html">
      <img src="Aidez_nous00.jpg" alt="Aidez nous">
      <span>Appel de dons et de partenariat particuliers, entreprises, universités...</span>
    </a>
  </div>
</body>
</html>

Je te laisse analyser.

Infobulle, HTML et JavaScript

HTML

Discussions similaires

Partager

Partager