créer un infobulle en BBcode

[Valendium]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : toujours
Lien du forum : pas encore en ligne

Description du problème

Bonjour, Bonsoir à tous,

J'ai lu à peu près tous les messages sur forumactif concernant le BBcode mais rien ne répond à ma question... ou rien ne fonctionne... je me tourne donc vers vous!

Je souhaite installer un système de compétences sur mon forum sous forme d'images qui au passage de la souris mettrait sous une infobulle le titre de cette petite image ;
comme ça :

J'ai lu qu'il fallait passé par le javascript ou par le templates viewtopic_body ;
J'ai donc ajouté ceci aux deux :

Code:

<!--
   var divs = document.getElementsByTagName("div");
   for (i=0; i<divs.length; i++){
   if(divs[i] != null && divs[i].className == "postbody")
   {
      var chaine1 = new String("[\[]infobulle=([a-zA-Z]+)[^[]");
      var reg = new RegExp(chaine1, "g");
      var reg2 = new RegExp("[\[]/infobulle[^[]", "g");
      var contenu = divs[i].innerHTML;
      var nouveaucontenu = contenu.replace(reg,"<span title="$1">").replace(reg2,"</span>");
      divs[i].innerHTML = nouveaucontenu;
   }
  }
  // -->

...mais rien ne se passe...

J'ai d'abord essayé sous forme de balise HTML dans le profil :
<img src="https://www.zupimages.net/up/18/10/1pux.png"title="chasseur">

Code:

<img src="https://www.zupimages.net/up/18/10/1pux.png"title="chasseur">

...aucun effet... (le code HTML ne s'applique pas dans le profil?)
pourtant je suis bien en zone de texte!

J'ai aussi essayé toutes les balises possibles et inimaginables (je ne vais pas toutes vous les montrez... je les ai éffacé...); la dernière en date est celle-ci : [infobulle=test][/infobulle]
→ voir ici : https://forum.forumactif.com/t282132-balise-title-sur-image-en-bbcode

...encore une fois sans succès...

J'ai aussi été voir sur internet pour comprendre, j'ai passé en revue une trentaine de sujet...

Une des méthode dit ceci :

Pour cela, rendez vous dans votre ACP (Administration Control Panel)
Allez dans l'onglet "Messages"
Puis, dans le menu de gauche, cliquez sur le menu "Bbcodes"
Cliquez sur le bouton ajouter un nouveau Bbcode. Vous pourrez voir trois zones de texte, et une case à cocher.
La zone "Utilisation du BBCode" permet la saisie du BBCode (c'est-à-dire ce que les utilisateurs devront taper).
La zone "Code HTML de remplacement" est l'endroit où vous devrez écrire le code HTML qui sera généré.
Dans "Ligne d'aide" vous pourrez entrer un conseil pour les utilisateurs sur la façon d'utiliser votre BBCode. Normalement, il devrait apparaitre en infobulle quand les utilisateurs passeront la souris dessus.
Enfin, la case à cocher Afficher sur la page de rédaction d’un message vous permet d'afficher, ou non, le bouton à l'écran. Notez que ne pas cocher la case ne désactiver pas le bbcode, les utilisateurs pourront toujours le taper à la main ! (Personnellement j'utilise ça pour les bbcode de modération, seulement connus des modérateurs").

et je suis sencée arriver sur ce genre de page : http://www.cpamania.com/bbcode.jpg

Cependant, ce n'est pas trouvable sur forumactif...

J'ai aussi été voir ici : https://forum.forumactif.com/t171298-les-balises-bbcode-de-forumactif mais là encore, je n'ai pas trouvé ce que je cherchais...

Pourriez-vous m'aider svp?
Merci d'avance.

[Invité]

Hello Valendium,

le bbcode Infobulle , n'est pas disponible sur le support Forumactif ,
avec mes maigres connaissances, tu peux ajouter un bouton sur l'éditeur qui au clic ajoutera un contenu html modifiable , puis un script viendra modifier ce code pour l'afficher en infobulle.


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mets un titre explicite.
Coches sur toutes les pages.


Déposes ceci:

Code:


$(function(){$(function(){
$('<a class="sceditor-button sceditor-button-infobulle" unselectable="on" title="Texte infobulle"><div unselectable="on" style="background-image:url(https://i62.servimg.com/u/f62/11/26/21/37/08-cha10.png)">Texte infobulle</div></a>').insertBefore('.sceditor-button.sceditor-button-bold').click(function(){
$('#text_editor_textarea').sceditor("instance").insert('<span id="M14_Infobulle">\n<span class="M14_Infobulle">\nLE TEXTE INVISIBLE\n </span>\nLE TEXTE VISIBLE\n</span>');
});
})});

$(function(){
$('span[id="M14_Infobulle"]').each(function(){
var M14_infobulle=$(this).find('span').hide().text();
if(M14_infobulle)
{
$(this).attr('title',M14_infobulle);
}
});});



Penses à cliquer sur le bouton VALIDER


Un peu de style:

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:


#M14_Infobulle
{
color:orange;
cursor:pointer;
}


Penses à cliquer sur le bouton

C'est un peu barbare , mais cela fonctionne .

a++

[Valendium]

Bonjour!
Merci pour ta réponse rapide Milouze14

J'ai mis ce que tu as dit (j'ai bien validé etc.) mais le HTML ne fonctionne quand même pas dans le profil :/
du coup malgré le

Code:

<span id="M14_Infobulle">\n<span class="M14_Infobulle">\nLE TEXTE INVISIBLE\n </span>\nLE TEXTE VISIBLE\n</span>

ça ne s'affiche pas

N'y-a-t-il aucune autre solution?

Merci d'avance

[Invité]

Re,
ah, le code est fonctionnel que sur l'éditeur mon ami.

Tu peux donner la procédure effectuée sur le profil stp:
Lien de l'image etc ...


Edit:

sinon , tu peux utiliser un champ liste d'images et utiliser le texte alternatif qui affichera l'infobulle.





a++

[Valendium]

En fait, j'ai énormément d'images à mettre ainsi sur le profil des gens (vu que ce sont des compétences spécifiques aux personnages)...

Panneau d'aministration > Utilisateurs et groupes > profils >champs du profil
N°3 - Compétences - Zone de texte {Type de champ} - oui {profil} - oui {message} - non {Modifiable par le membre}.

Dans le profil du membre, il y a donc les "compétences" et c'est là que je souhaiterais ajouter les images de compétences.

Au niveau des liens, il y a un total de 110 images possibles... ;O;

Désolé de poser soucis :/

Edit : je vais donc essayer cela (je n'y avais pas pensé) merci (j'éditerai ce message après avoir testé).

[Invité]

Re,
j'ai édité mon message précédent:

https://forum.forumactif.com/t395965-creer-un-infobulle-en-bbcode#3311539

Cette méthode répondra à ta demande mon ami .

Edit : je vais donc essayer cela (je n'y avais pas pensé) merci Smile (j'éditerai ce message après avoir testé).

Pas de soucis .

a++

[Valendium]

Voilà, alors je viens de tester mais on ne peut cocher qu'une seule compétence dans la liste, alors que j'aimerais en cocher une dizaine par personne :/
Ce n'est donc pas ce que je souhaite obtenir

Je suis vraiment désolée...

[Invité]

Re,

il faut en créer autant que tu en as besoin.
Ne soit pas désolée .

Je reviens dans la soirée .

a++

[Valendium]

Mais du coup, elles se mettent une au-dessus de l'autre plutôt qu'une à côté de l'autre :/
Ce n'est pas l'effet recherché (ce n'est pas très joli) :/

Spoiler:

Pas de soucis ^^
Merci de t'occuper de mon cas
Bonne journée!

[Invité]

Re,
hum, tu n'auras pas trop de choix, ce que tu souhaites,
c' est d'avoir beaucoup de champs et des icônes qui les représentent.
On peut avec ce que tu as mis en œuvre donner une autre apparence , mettre les images et son input à l’horizontal .
Pour cela il me faudrait un compte test sur ton fofo (en mp si besoin) avec que je puisse accéder au profil  
a++

[Scoubifitz]

Bonsoir,

Désolé de m'incruster , peut-être que le problème se résout en modifiant le champ "séparateur" ?

[Valendium]

Bonsoir,

Merci beaucoup de vous être penché sur mon problème
Au final, une amie m'a donné un javascript pour régler cette situation (je dois placer mes 110 images dans un code java... youpie) c'est la seule façon d'arriver à ce que je veux.

Scoubifitz : J'avais mis "aucun" mais ça le mettait quand même à la ligne :/

Enfin voilà, problème résolu!
Un énorme merci pour votre aide
Bonne soirée!