Discussion :

[dukky]

Bonjour,

Débutant en CCS, je suis actuellement en train de travailler sur le CMS Guppy.
Je vais essayer d'être le plus clair possible: je cherche à afficher des infobulles lorsque le curseur de la souris survole les icônes du menu ( représenté par des images en gif : home.gif, news.gif...)

J'ai trouver sur différentes forum les lignes de codes à insérer dans mon CCS, entre autre sur le très bon site qu'es devellopez.com. Malgré ça, pas moyen d'arriver à mes fins.

J'utilise la lignes suivant dans mon document html (ou xhtml ,j'ai encore du mal à faire la difference..) :

Code html :

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

1
2
3
4
5
6
7
<a  class="info" 
      href="index.php?lng=fr" 
      title="ACCUEIL">
             <img src="inc/img/icons/ico_tete/home.gif" 
      border="0" 
  <span>  Texte de l'infobulle  </span>
</a>

La classe "info" permet l'affichage de l'infobulle. Mon problème est le suivant, au lieu que l'infobulle apparaisse sur mon icone "ACCUEIL", un nouvel icone "ACCUEIL" apparait...

Ce qui me fait un icone bien placé sans infobulle et un icone mal placé avec infobulle...

Mes connaissance sont encore très limité et j'ai beau cherché, je ne trouve pas de réponse à mon problème.

Merci d'avance à mon eventuel futur sauveur!

[desert]

Bonjour,
Je suppose que tu veux parler de l'attribut title qui fait aussi apparaître une info-bulle, sans doute la source de ton problème. Il ne te reste plus qu'à le supprimer.
PS: N'oublie pas de fermer ta balise img.

[dukky]

Merci pour ta réponse mais ce n'est hélas pas ça, voici un exemple pour que mon problème soit plus parlant :


(admettons que cette série de smiley soit mon menu, je cherche alors à ce que lorsque ma souris survol ces icônes apparaisse une infobulle.)

dans mon cas cela donne ça :

:





Et c'est l'icone qui vient de se "dédoubler" qui possède une infobulle...
je bloque vraiment, j'essaie plein d'approche différente mais pour l'instant aucun résultat...

ps : pour info j'ai aussi poster sur le forum de freeguppy :http://www.freeguppy.org/thread.php?...&fid=1&cat=100

aucune solution de ce coté la non plus.

[Msieurduss]

A tout hasard, tu as essayé de fermer ta balise image ? Des fois des balises mal fermées ça fait tout casser ^^

Code :

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

1
2
<img src="inc/img/icons/ico_tete/home.gif" 
      border="0" />

Car une icône qui se dédouble, c'est étrange... on peut voir un exemple en ligne (histoire de faire un petit contrôle firebug et de tenter quelques trucs) ?

[dukky]

Pour l'instant je travail en local donc je ne peut pas montrer le site mais j'ai mis une petite image en pièce joint crée par mes soin qui j'espère illustrera ce problème

Sinon j'ai essayé de fermer la balise image comme indiqué par Msieurduss mais ça a pour seul effet de faire disparaitre l'infobulle...

Je commence à croire que c'est pas possible mais pourtant de nombreux site existe (exemple du résultat sur http://guppy-skins.nuxit.net/ ; son menu est en gros ce que je cherche à réaliser)

Mais je ne désespère pas !

[12monkeys]

Bonsoir

Tu peut commencer par lire ce tutoriel qui te donnera pas à pas la méthode pour faire une info bulle : http://r-hunel.developpez.com/tutoriels/css/info-bulle/

[dukky]

Merci mais je me suis déjà inspiré de ce tuto. Tu m'a quand même mis le doute du coup j'ai tout refait en suivant pas à pas le didacticiel. Malgré ça, mon icône se "dédouble" toujours.

Je me dit que c'est peut être pas clair ce qui m'arrive.

Dans le CMS guppy, le site est complètement fabriqué et il n'y a qu'à le modifié. De la une interface est intégrer dans la partie admin qui permet de changer les couleurs les boites et pas mal de truc.

Les soucis commence quand on veut faire des modifications un peu plus élaborer, comme ajouter des infobulles aux icônes du menus.... Un peu de recherche sur le net suffise la plupart du temps pour trouver les codes CCS ou Html à modifier.

Pourtant, je ne trouve nul part le truc pour lier l'infobulle aux icônes existant déjà. C'est à dire que l'emplacement, les liens des icônes sont pré formater dans guppy, je cherche juste à lier des infobulles sur ces icônes.

Tout les tutos permettent de lier une infobulle sur un lien texte, mais je ne trouve pas comment le faire sur un image (format gif)...ca m'agace d'autant plus que je suis persuader que c'est un tout petit truc qui me manque car au point ou j'en suis, j'arrive à lier ces fichu infobulles à des image. Mieux, à l'icone souhaité !

Mais hélas cet icone apparait ce qui me fait un total de deux icones...

Je pense que la réel question est comment faire pour que l'icône de l'infobulle soit celui déjà présent dans le menu ?

[dukky]

Je me demande si ça pourrait pas être une histoire de positionnement du code dans le doc html ? Car quand je place les balise <a> dans le head ou le body, l'icône qui apparait change d'endroit ( dans le body ou head selon sa position dans le doc html) ... par conséquent, si j'arrivais à localiser la lignes correspondant au menu cela pourrait peut être marcher ?

Voila mes dernières réflexion mais bon, après plusieurs essai je pense pas que ce soit ça car quand je met mes balise <a> au niveau des lignes suposé correspondre au menu, j'obtiens des messages d'erreurs... La faute à mes connaissance plus que limiter en html...

[Msieurduss]

J'ai regardé rapidement le lien que tu as filé, et il semble qu'ils font ça de manière plutôt simple (mais efficace) :
Il fait en sorte que les infobulles ne soient pas affichées à la base, et les afficher lors du passage sur un des liens du menu... En gros, en code ça donne (je fais ça rapidos, je n'assure pas que tout soit nickel mais bon) :

Code :

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

1
2
3
4
 
.mesinfobulles {
      display:none;
}

Ensuite, en javascript tu crées une fonction qui permettra d'afficher les infobulles... Elle ne permet pas de les masquer, mais c'est juste pour te donner l'idée :

Code :

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

1
2
3
4
 
function afficher(i) {
     document.getElementById("infobulle"+i).style.display = 'block';
}

Dans le HTML, il va falloir appeler cette fonction au survol du lien :

Code :

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

1
2
 
<a href="#" onmouseover="afficher(1)">monlien</a>

Ton infobulle n°1 sera du genre :

Code :

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

1
2
 
<div id="infobulle1" class="mesinfobulles">blablabla</div>

Et en gros ça va faire apparaître l'infobulle lorsque la souris passera sur le lien <a>, si je n'ai rien oublié... les codes html sont à reproduire pour le deuxième lien, 3e, etc...

Attention, c'est une pratique limitée, comme le dénonce le tutoriel dont on a donné le lien plus haut :

Nous n'utilisons pas un simple display:none afin d'offrir une meilleure accessibilité. En effet, certains lecteurs d'écran savent l'interpréter et ne pourront pas lire son contenu.

Et aussi, je ne sais pas comment tu peux l'intégrer à ton CMS... mais ça ne doit pas être infaisable

[dukky]

Merci pour cette réponse, j'ai rapidement essayer sans résultat mais en même temps je ne sais pas trop quoi faire de la partie javascript ? Je n'y connait rien et je ne sais pas si je dois l'insérer dans un doc HTML, CCS ou bien existe des fichier pour le java ?

Je vais continuer à faire des essai et je trouverais peut être l'endroit ou il faut l'insérer !

Sinon, juste une petite précision : "mesinfobulles" est bien une classe à créer (ou trouver) dans mon ccs ?

Voila et encore merci pour vos aides !

[Msieurduss]

Oui, mesinfobulles c'est une classe dans le CSS.

Je pense qu'il faudrait que tu reprennes les bases de l'HTML, du CSS et éventuellement du Javascript pour bien comprendre tout ceci

Néanmoins, je te propose un petit code (qui fonctionne) ci-dessous :

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
<style type="text/css">
 
.mesinfobulles {
      display:none;
 
	  border: 1px solid black;
	  background: #eee;
	  width: 200px;
	  height: 200px;
}
 
</style>
<script type="text/javascript">
 
function afficher(i) {
     document.getElementById("infobulle"+i).style.display = 'block';
}
 
</script>
</head>
<body>
 
 
<a href="#" onmouseover="afficher(1)">monlien</a>
<div id="infobulle1" class="mesinfobulles">blablabla</div>
 
 
</body>
</html>

Fais le test : copie ça dans une page html, exécute, tu verras ça fonctionne (au survol du lien ça affiche une infobulle).
Bien entendu, tu peux appeler tout ça dans des fichiers externes. Ici j'ai tout mis dans le même fichier, mais dans l'idée tu mets :

Code :

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

1
2
 
<link href='css/styles.css' rel='stylesheet' type='text/css' />

A la place de :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<style type="text/css">
 
.mesinfobulles {
      display:none;
 
	  border: 1px solid black;
	  background: #eee;
	  width: 200px;
	  height: 200px;
}
 
</style>

Et tu colles la partie .mesinfobulles { .......... } dans le fichier css "styles.css" qui se trouve dans le dossier css/

Tu fais pareil pour le javascript avec ça :

Code :

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

1
2
 
<script src="js/infobulles.js" type="text/javascript"></script>

Bon courage