Prérequis

Dans ce tutoriel, j'ai utilisé deux boutons. Un bouton "ouvrir" et un bouton "fermer". Par défaut, vous n'aurez besoin que de ces deux éléments graphiques, pensez à créer les vôtres.

Pour simplifier la notation, dans la suite le lien de l'image "ouvrir" sera noté URL_IMG_OUVRIR et celui de l'image "fermer" sera noté URL_IMG_FERMER. Pensez à remplacer ces deux valeurs par les liens de vos images !

Structure HTML

Pour commencer, rendez-vous dans votre panneau d'administration et allez dans l'onglet Affichage, puis dans Templates » Général. Editez le template index_body en cliquant sur son nom dans la liste.

Tout à la fin du code, trouvez cette ligne :

Code:

<!-- END switch_legend -->

Juste APRÈS cette ligne de code, ajoutez le tableau suivant :

Code:

<table class="ChatboxLaterale" cellspacing="0" cellpadding="0">
   <tr>
      <td>
         <iframe id="chatboxpop" src="#" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
      </td>
      <td class="BoutonChatbox">
         <img id="btn_cb" src="#" alt="Ouvrir/Fermer la ChatBox" />
      </td>
   </tr>
</table>

Note : Vous pouvez également mettre ce code dans votre message d'accueil, le fonctionnement sera identique.

Mise en forme CSS

Rendez-vous dans le menu Images et couleurs » Couleurs et dans l'onglet Feuille de style CSS. Ajoutez le code suivant :

Code:

/* conteneur de la chatbox et du bouton */
.ChatboxLaterale {
  position: fixed; /* position fixe dans la fenêtre */
  bottom: 10%; /* à 10% du bas (calculé en fonction de la taille de la fenêtre) */
  left: 0; /* et 0px du bord gauche */
  width : 100px; /* dimension 100px */
}
/* chatbox seule */
.ChatboxLaterale iframe {
  width: 800px; /* largeur */
  height: 300px; /* hauteur */
  display: none; /* caché par défaut */
}
/* bouton ouvrir/fermer */
.BoutonChatbox {
  vertical-align: bottom; /* alignement vertical du bouton */
}
.BoutonChatbox img {
  cursor: pointer; /* on ajoute un pointeur pour indiquer que notre image est cliquable */
}

Vous pouvez modifier certains éléments du CSS. Par exemple :

bottom: ?px; La distance entre le bas de la page et votre ChatBox (en pixels ou %).
left: ?px; La distance entre la gauche de votre page et votre ChatBox.
width: ?px; La largeur de votre ChatBox quand elle est ouverte.
height: ?px; La hauteur de votre ChatBox quand elle est ouverte.
vertical-align: bottom/middle/top; La position du bouton ouvrir/fermer par rapport à la hauteur de la ChatBox. Vous pouvez mettre une de ces trois valeurs : bottom (bas), middle (milieu), bottom (haut).

Fonction Javascript

Dans votre panneau d'administration, onglet Modules » HTML & Javascript : Gestion des codes javascript, créez un nouveau code javascript et collez le code suivant :

Code:

$(function(){
  var urlChatBox = '/chatbox/index.forum?page=front&';
  var imgOuvrir = 'URL_IMG_OUVRIR';
  var imgOuvrirSurvol = 'URL_IMG_OUVRIR';
  var imgFermer = 'URL_IMG_FERMER';
  var imgFermerSurvol = 'URL_IMG_FERMER';
  $('#chatboxpop').attr('src', urlChatBox);
  $('#btn_cb').attr('src', imgOuvrir);
  $('#btn_cb').on({
      click: function(){
        $('#chatboxpop').toggle();
      },
      mouseenter: function(){
        if($('#chatboxpop').css('display') == 'none'){
            $(this).attr('src', imgOuvrirSurvol);
        } else {
            $(this).attr('src', imgFermerSurvol);
        }
      },
      mouseleave: function(){
        if($('#chatboxpop').css('display') == 'none'){
            $(this).attr('src', imgOuvrir);
        } else {
            $(this).attr('src', imgFermer);
        }
      }
  });
});

Cochez toutes les pages dans les options du fichier javascript puis enregistrez.
N'oubliez pas de cocher oui pour l'option Activer la gestion des codes Javascript qui s'affiche sur la page récapitulative des scripts.

Mais comment ça marche ?

Dans notre tableau, nous avons placé d'une part une iframe qui appelle la ChatBox du forum, d'autre part l'image "Ouvrir". Cette image est dotée de l'identifiant #btn_cb, auquel se rattache une instruction javascript. Les URLs de la ChatBox et de l'image sont complétées directement par le Javascript. Par conséquent, vous n'avez rien à éditer dans le tableau.

Le code Javascript utilisé se décompose de la manière suivante :

• 5 variables qui déclarent les URLs utilisées : urlChatBox, imgOuvrir, imgOuvrirSurvol, imgFermer, imgFermerSurvol. Les URLs définies dans ces variables sont les seules choses à modifier en fonction de vos besoins.
  
  
• Deux instructions, qui déclarent les URLs de la ChatBox et du bouton Ouvrir.
  
  
• Une instruction plus élaborée, qui déclare trois événements liés à la souris : le clic (click), le survol (mouseenter)... et le "non-survol" (mouseleave).

Comme vous l'aurez deviné, ce code vous permet si vous le souhaitez de changer les boutons Ouvrir et Fermer au survol. Il suffit de modifier les URL des variables correspondantes, soit :
- imgOuvrirSurvol, qui correspond à la variable imgOuvrir
- imgFermerSurvol, qui correspond à la variable imgFermer

Si vous ne souhaitez pas utiliser l'option de survol, comme dans le code par défaut, renseignez la même URL pour imgOuvrir et imgOuvrirSurvol, et pour imgFermer et imgFermerSurvol.