Excellent tutoriel ! J'arrivais pas à insérer de liens sans que ça bug --"

Es-ce qu'on peut faire une infobulle sur un mapping ?

Bonjour,

Ce n'est pas possible avec ce tutoriel, ni avec autant de liberté.
En effet, ce tuto se base sur une imbrication de balise, et la balise area se ferme toute seule à la fin (si elle est bien écrite), de cette façon (remarque le slash à la fin!) :

Code:

<area shape="rect" coords="...." href="URL" alt="" title="" />

Du coup, on ne peut pas mettre de contenu au milieu.

Solution 1 - Garder le Mapping et se contenter du CSS + HTML
Le mieux que tu puisses faire, c'est remplir les attributs alt et title qui sont parfois géré comme des infobulles par les navigateurs si on laisse la souris dessus (je ne me rappelle plus, trop, mais il me semble qu'ils ont du mal à être d'accord sur ça ^^ ils affichent pas tous le même attribut, rempli les deux pour être tranquille). Par contre, tu ne peux mettre que du texte.

Solution 2 - Virer le Mappin, se contenter du CSS + HTML, mais à un niveau assez avancé
Après, si ton mapping est constitué d'images rectangulaires comme on le voit souvent dans les tutoriels, sache que tu peux découper tes images à part et les placer ensuite sur ton forum, placées au pixel près. Pour ça, il faut généralement une bonne maîtrise des positionnements en CSS (relative, absolute, etc), et de préférence un forum (ou un pa) de largeur fixe (sinon, bonjour les % et la galère ^^). L'avantage de pratiquer ainsi, c'est que tu es également libre de faire des effets de hover facilement, etc. Si tu es motivée, tu peux tenter de t'y mettre.

Solution 3 - Utiliser JavaScript pour faire les infobulles (marche pour tout, pas seulement pour le mapping)
Autrement, il y a la solution du JavaScript qui fera le hover en lieu et place du CSS...
Il faudrait que tu mettes des écouteurs d'évènement sur ton area. Les écouteurs écoutent ce qu'il se passe sur une balise HTML, pour voir si un évènement précis se produit, et agir en fonction de cet évènement.
Ici, on utilisera onmouseover (quand le curseur de la souris est sur l'image), pour appeler la fonction JavaScript affiche qui sert à afficher l'infobulle, et onmouseout (quand le curseur est en dehors de l'image), pour appeler la fonction cache qui cache l'infobulle.
Après, il faut mettre la div qui contient ton infobulle à côté de la map (pas dedans), et lui donner un id.
Au niveau des fonctions dans les onmouse, il faut que tu leur donne en paramètre l'id de ton infobulle, pour que le JS retrouve correctement la bonne div à manipuler.
Voici ce que ça donne :

Code:

<map>
      <area shape="rect" coords="..." href="URL" alt="" title="" onmouseover="affiche('moninfobulle1')" onmouseout="cache('moninfobulle1')" />
</map>
<div id="moninfobulle1">Blabla</div>

Il est tout à fait possible de faire la même chose en remplaçant area par des p, des div, ou des liens :

Code:

<div onmouseover="affiche('moninfobulle1')" onmouseout="cache('moninfobulle1')" > Passez la souris ici !</div>
<div id="moninfobulle1">Blabla</div>

/!\ ATTENTION aux simples quotes et doubles quotes! Il ne faut pas faire de conflit, cela ne marcherait pas, par exemple :

Code:

Mauvais :

onmouseover="affiche("moninfobulle1")"

ou

onmouseover='affiche('moninfobulle1')'

et encore moins un mélange du genre

onmouseover='affiche('moninfobulle1")"

Il n'y a que deux possibilités (en dehors de faire échapper le caractère)

Code:

Bon :

onmouseover='affiche("moninfobulle1")'

ou

onmouseover="affiche('moninfobulle1')"

Dans ton CSS, il faut mettre moninfobulle1 est en display:none; pour ne pas qu'elle soit affichée au chargement de la page.

Pour finir, il te faut un JavaScript du genre :

Code:

<script type="text/javascript">function affiche(infobulle){
document.getElementById(infobulle).style.display='block';
}
function cache(infobulle){
document.getElementById(infobulle).style.display='none';
}</script>

Le javascript n'est pas très compliqué à comprendre. Entre les accolades d'une fonction, il va chercher dans le document (la page HTML) l'élément qui possède l'id que tu as mis en paramètre lorsque tu as écrit les onmouse. Tout ceci pour modifier le style css, et plus précisément la propriété display, en lui donnant une nouvelle valeur, soit block, soit none selon la fonction.

Le JavaScript peut aussi servir d'alternative à ceux qui ont des soucis avec IE6 ou qui veulent absolument un lien pour créer leur infobulle.

Par contre, j'espère que ça va fonctionner, pas trop le temps de tester ^^

Voilà, bon courage ^^

Kiwi

Bonjour ^^ J'ai rencontré un petit problème avec les infobulles... A l'intérieur, je ne peux absolument pas toucher à mon texte ! J'ai voulu mettre un bout du texte en gras, et ajouter une classe, et ça a ouvert une autre infobulle dans l'infobulle... uu'

Pour ton bout de texte, tu l'as mis entre des div, non? Essaye de le mettre entre des span plutôt sinon ^^

EDIT : Et si ça t'embête, tu peux mettre une classe à la div que tu fais apparaître dans l'infobulle (par exemple bulle), et tu remplaces dans ton CSS ceci :

Code:

div.infobulle div{

par :

Code:

div.infobulle div.bulle{

et :

Code:

div.infobulle:hover div{

par :

Code:

div.infobulle:hover div.bulle{

Car en vérité, selon le tuto de base, c'est là le problème : le css prend en compte toutes les divs dans la div de classe infobulle comme étant des infobulles ^^

Super tuto! Il marche impécablement, merci!

Je n'y arrive pas ,pouvez-vous m'aider ? Merci voici ce que cela me donne sur la page d'accueille : http://aide-forum.ancienne-star.com/ .Merci .

Pourtant c'est simple , copie/colle les codes donnés et modifie les comme tu le souhaites .

Salut, j'ai éssayé de suivre ce tuto, mais j'ai du mal ^^'

deja, est-ce que le javascript fonctionne sur forumactif ?
donc il faut placer ce code dans le PA (en dessous du code pour le mapping) ?

Code:

<map>
      <area shape="rect" coords="..." href="URL" alt="" title="" onmouseover="affiche('moninfobulle1')" onmouseout="cache('moninfobulle1')" />
</map>
<div id="moninfobulle1">Blabla</div>

et on peut remplacer "affichage('moninfobulle1')" par une image par exemple ?
et "cache('moninfobulle1')" il faut le remplacer par quoi ?

ensuite je voulais savoir si il fallait modifier le code a placer dans le css ?

désolé de vous embêter, je suis pas encore au point avec le codage ^^'
Merci d'avance de votre aide

Salut!

Il faut savoir en premier lieu que le code proposé ici (en javascript), ne permet pas de placer des liens à l'intérieur de l'infobulle (en sortant de la map, normalement, l'infobulle disparaît), il faudrait l'améliorer pour que ce soit possible, et je n'en ai pas le temps pour le moment, personnellement. Il faudrait faire un vrai tuto à part là-dessus... En soi, ça ne me paraît pas très compliqué à faire, mais peut-être un peu long à expliquer...

Q1 : Le JavaScript fonctionne sur ForumActif, il faut mettre le code entre les balises script dans le Panneau d'accueil.

Q2 : Non, en fait, tu as déjà fait ton mapping, tu as déjà délimité des zones, normalement, et sur ces zones déjà existantes, tu ajoutes le onmouseover et le onmouseout en lui faisant passer en paramètre (entre les parenthèses quoi) l'id de l'infobulle que tu cherches à afficher. Par contre, tu dois en effet rajouter les infobulles (le div id="moninfobulle1" etc)

Q3-4 : Oui, tu peux afficher une image. En fait, tu peux afficher n'importe quoi, du moment que tu donnes le bon id :

Code:

<!-- Un bloc qui contient tout (sert pour la question relative au CSS) -->
<div id="mon-pa">

<!-- La map que tu as déjà créée normalement -->
<map>

      <!-- À chaque zone qui doit faire apparaître une infobulle, tu ajoutes le javascript (href étant facultatif, si tu ne veux pas mettre de lien) -->
      <area shape="rect" coords="..." href="URL" onmouseover="affiche('monimageinfobulle1')" onmouseout="cache('monimageinfobulle1')" />
      <area shape="rect" coords="..." href="URL" onmouseover="affiche('monimageinfobulle2')" onmouseout="cache('monimageinfobulle2')" />

<!-- Fin de la Map -->
</map>

<!-- Les images à faire apparaître en fonction de la zone et de l'id -->
<img src="..." id="monimageinfobulle1" />
<img src="..." id="monimageinfobulle2" />

<!-- Fin du bloc contenant le p-a -->
</div>

Q5 : Le code à placer dans le CSS est forcément à adapter par toi-même. En fait, je crois que le code CSS proposé n'est pas forcément compatible avec cette méthode. Le plus simple, dans un premier temps, crée tes infobulles et mets-leur ce CSS :

Code:

#mon-pa{
    position:relative;
}
#monimageinfobulle1{
    position:absolute;
    left:0px;
    top:0px;
}
#monimageinfobulle2{
    position:absolute;
    left:20px;
    top:20px;
}

... etc pour autant d'infobulle qu'il y a (si tu mets 0 à tous, elles seront les unes par dessus les autres)

Elles apparaîtront dans ton panneau d'accueil normalement. Il ne te restera plus qu'à leur donner le bon positionnement en left/top pour les placer où tu le souhaites. Quand ce sera fait, il faudra que tu les caches en CSS, via la propriété display (comme ça, elles n’apparaîtront qu'avec le JavaScript).

Code:

#mon-pa{
    position:relative;
}
#monimageinfobulle1{
    display:none;
    position:absolute;
    left:0px;
    top:0px;
}
#monimageinfobulle2{
    display:none;
    position:absolute;
    left:20px;
    top:20px;
}

...etc

Ne manquera plus, dès lors qu'à faire fonctionner le JavaScript.

Et pas de souci pour l'embêtement, c'est un forum d'entraide =) J'ai essayé d'expliquer du mieux possible en faisant aussi vite que possible, j'ai peu de temps aujourd'hui ^^

Bon courage et n'hésite pas à poser tes questions ^^ J'y répondrai probablement dans la semaine ou d'autres le feront à ma place.

Kiwi

Merci beaucoup de ton aide, c'est très sympa

a la lecture je pense avoir mieux compris
maintenant je vais le tester quand j'aurai le temps et je te donnerai des nouvelles ^^


EDIT :

Bon Help j'y arrive pas ^^

j'ai essayé uniquement avec une seule info bulle pour commencer :
mon css :

Code:

#mon-pa{
    position:relative;
}
.monimageinfobulle1{
    display:none;
    position:absolute;
    left:20px;
    top:20px;
}

sur le PA (j'ai allégé):

Code:

<div id="mon-pa"><img name="accueil0" src="http://security-domain.be/Upload/files/pa2-1293907239.png" usemap="#accueil" height="400" width="800" border="0">

<map name="accueil">

<area shape="rect" coords="241,169,436,354" href="http://www.graphtheworld.net/cotm-f71/" alt="COTM"> 
<area shape="rect" coords="384,195,531,391"
onmouseover="affiche('monimageinfobulle1')"
onmouseout="cache('monimageinfobulle1')" />
</map>

<img src="http://security-domain.be/Upload/thumbs/beck2237cbfc.png" id="monimageinfobulle1" /></div>

Arf, dans le CSS, je me suis embrouillée =)

J'ai mis .monimageinfobulle1, ce qui correspond à une classe, alors qu'il s'agit d'un identifiant, et donc #monimageinfobulle1 ^^'

Mea culpa x)

Edit : Sinon, le reste m'a l'air bon =) Faudra juste pas oublier de mettre le JavaScript ^-^

ok merci de ta réponse rapide
et sinon faut le mettre ou sa :

Code:

<script type="text/javascript">function affiche(infobulle){
document.getElementById(infobulle).style.display='block';
}
function cache(infobulle){
document.getElementById(infobulle).style.display='none';
}</script>

quand je le met dans le css il me le corrige

et sinon le reste de mon code est bon ?

EDIT : j'ai compris, il faut en faite le placé dans le PA --'
donc maintenant, c'est bon mon image s'affiche quand je passe ma souris sur la zone, mais le probleme c'est qu'elle s'affiche en dessous du PA et pas dans la zone définit

Oui, le reste a l'air bon à première vue ^^

Et ça :

Code:

<script type="text/javascript">function affiche(infobulle){
document.getElementById(infobulle).style.display='block';
}
function cache(infobulle){
document.getElementById(infobulle).style.display='none';
}</script>

Il faut l'insérer dans ton message d'accueil, par exemple juste avant la div #mon-pa ^^

Merci j'ai compris après coup qu'il fallait le mettre dans le PA ^^

donc maintenant, c'est bon mon image s'affiche quand je passe ma souris sur la zone, mais le probleme c'est qu'elle s'affiche en dessous du PA et pas dans la zone définit, meme quand je change les px dans le CSS elle bouge pas

Merci encore de ton aide

Tu peux me donner un lien pour que je puisse voir? =o (à moins que tu n'arrives à t'en sortir ^^) Par MP si tu ne souhaites pas le divulguer ^^

Et de rien =)

http://foliforum.forumgratuit.org/

c'est un forum test ^^

j'ai aussi remarqué que l'infobulle s'affiche au chargement de la page :/

En fait, ce qu'il se passe, c'est qu'il n'y a aucun CSS associé à ton image, ni même à la div mon-pa.
Tu mets ton CSS où? =o Et tu peux également me le recopier s'il te plaît?

tout mon css ?

voici : (le truc pour l'infobulle est a la fin ^^)

Code:

.mainmenu{
    font-size : 10px;
    color : #5f4037;
        }

a.mainmenu{

filter:alpha(opacity=60);
-moz-opacity:0.6;opacity: 0.6;
}

a.mainmenu:hover{
   
filter:alpha(opacity=100);
-moz-opacity:0.6;opacity: 1;
  }

body.chatbox {
background-color: #7C8D8F;} /* La suite est le code de GTW

.forumline{margin-top:8px;}

body{margin-top: 0px;}

body{margin-bottom: 0px;}

div, table {
-moz-border-radius:8px;
border: none;
}

.statistiques{
background-color:   #1F1F1F;
background-repeat: no-repeat;
background-position: center;
height:0px;
border:1px solid #FFFFFF;}

.groupes{
background-color:   #1F1F1F;border: 0px #000000 ;
-moz-border-radius : 0px 0px 0px 0px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;
}


.listlastconnected td { background-color: transparent;}

.bodyline {
border:1px solid #FFFFFF;      /* épaisseur de bordure et couleur peut-être changé
}

#chatbox_members {
background-color:#FFFFFF;
}




#chatbox {
background-color:#FFFFF;  /* Couleur de fond le la Chatbox
}

.genie1
{
color: #CCCCCC;
padding: 3px;
}

#chatbox_header .cattitle strong
{
display: none;
}
#chatbox_header .cattitle:before   
{
content: "GTW Chatbox"; 
}

.name
{
border-bottom: 2px dashed #FFFFFF;
}

tr.post span.gensmall { display: none; }

.defilement {
overflow: auto;
width: 200px;
height: 50px;
}

a:hover{
letter-spacing : 2px; }

a {
text-shadow: 10px 10px 10px #000000;
}

#mon-pa{
    position:relative;
}
#monimageinfobulle1{
    display:none;
    position:absolute;
    left:65px;
    top:20px;
}

Je pense savoir d'où ça vient ^^ Par exemple quand tu as ça :

Code:

body.chatbox {
background-color: #7C8D8F;} /* La suite est le code de GTW

Il faut que tu fermes ton commentaire derrière comme ceci :

Code:

body.chatbox {
background-color: #7C8D8F;} /* La suite est le code de GTW */

oh oui merci sa marche ^^

je vais essayer d'ajuster la position maintenant

Super alors ^^

Bonne soirée et bon courage pour le reste de ton design ^-^

Merci
bonne soirée également

EDIT : ah si j'ai quand même encore une question ^^
comment sa se fait que l'infobulle soit affiché quand on ouvre la page ? :/

Il faut bien mettre le display:none dans le CSS pour qu'elle ne s'affiche pas au chargement de la page =)