« Cartes cliquables » pour Joomla!1.5Version 1.2.2

Documentation utilisateur

Copyright © Christophe Demko 2009contact@chdemko.com

http://joomlacode.org/gf/project/htmlmap/

Table des matièresI.Introduction........................................................................................................................................1II.Installation........................................................................................................................................2III.Utilisation du composant.................................................................................................................3

III.1.Création d'une carte cliquable..................................................................................................3III.2.Ajoûts de liens à la carte cliquable..........................................................................................6III.3.Paramètre du composant..........................................................................................................9III.4.Création d'un élément de menu................................................................................................9III.5.Changement de l'image lors du survol...................................................................................11III.6.Masquer tous les modules......................................................................................................15III.7.Une carte cliquable en page d'accueil....................................................................................15

IV.Création d'un module avec une carte cliquable.............................................................................17V.Utilisation du greffon : ajouter des cartes cliquables dans un article.............................................19

© Christophe Demko Introduction

I. IntroductionLe composant « Cartes cliquables » (« HTMLMap ») permet aux administrateurs d'un site Joomla de créer des cartes cliquables. Une carte cliquable est composée d'une image et d'un ensemble de régions définies sur l'image, reliées chacune d'entre elles à un élément de menu. Ce composant permet par exemple d'avoir une page d'accueil du site composée uniquement d'une carte cliquable et donnant accès aux éléments principaux du site. Le module permet d'afficher une carte cliquable dans un module et le greffon permet d'inclure des cartes cliquables dans le contenu des articles.

- page 1 -

© Christophe Demko Installation

II. InstallationL'installation du composant s'effectue classiquement en utilisant l'interface d'administration de Joomla. Un répertoire est automatiquement créé : images/htmlmaps. Les images utilisées par ce composant doivent être stockées dans ce répertoire. Deux tables sont également créées : l'une #__htmlmap pour stocker les cartes cliquables, l'autre #__htmlmap_links pour stocker les liens des cartes cliquables. L'installation du module et du greffon s'effectue de la même manière.

- page 2 -

© Christophe Demko Utilisation du composant

III. Utilisation du composant

III.1.Création d'une carte cliquable

La première étape pour créer une carte cliquable consiste à déposer sur le site une image dans le répertoire images/htmlmaps en utilisant le « Gestionnaire des médias ».

Note : si vous souhaitez un effet de changement lors du survol, créez également un répertoire à l'intérieur du répertoire images/htmlmaps et ajoutez-y d'autres images qui seront utilisées pour le survol.

La seconde étape est d'utiliser l'interface d'administration pour accéder au composant « Cartes cliquables ». Une nouvelle carte cliquable est crée en appuyant sur le bouton « Nouveau » de l'interface d'administration.

- page 3 -

© Christophe Demko Création d'une carte cliquable

Les champs à renseigner sont :

• le type de titre à utiliser (votre propre titre ou le titre actuel de l'image)

• le titre version texte de la carte cliquable (si vous voulez utiliser votre propre titre)

• l'image de la carte cliquable (si vous avez déposé des images avec le « Gestionnaire de médias », les images apparaitront)

• (optionnel) le dossier des images pour les régions cliquables; ce dossier doit avoir été créé dans le répertoire images/htmlmaps en utilisant le « Gestionnaire des médias ». Il peut ne pas être renseigné si la carte cliquable n'a pas de comportement de changement d'images lors du survol de ses régions cliquables

• (optionnel) l'utilisation d'un CSS personnalisé pour les bulles d'aide afin de ne pas utiliser celui du template

- page 4 -

© Christophe Demko Création d'une carte cliquable

Les liens de la carte cliquable seront accessibles lorsque la carte aura été sauvegardée. Un clic sur le bouton « Appliquer » fait apparaître le bouton « Liens » permettant de renseigner les liens de la carte cliquable.

- page 5 -

© Christophe Demko Création d'une carte cliquable

III.2.Ajoûts de liens à la carte cliquable

L'ajout de liens sur une carte cliquable peut se faire de deux manières différentes.

• Un clic sur le boutons « Liens » lorsque une carte cliquable est éditée.

• Un clic sur l'icone des liens ou sur le bouton « Liens » dans la vue principale de gestions des cartes cliquables. L'édition des liens verrouille la carte en position d'édition.

- page 6 -

© Christophe Demko Ajoûts de liens à la carte cliquable

Lorsque l'accès aux liens a été sélectionné, il est possible de créer un nouveau lien en cliquant sur le bouton « Nouveau ».

Les champs à renseigner sont :

• L'élément de menu associé au lien ou lURL du lien

• Le type de titre utilisé

• Le titre version texte du lien

- page 7 -

© Christophe Demko Ajoûts de liens à la carte cliquable

• La description du lien

• La présence d'une bulle d'aide lors de l'affichage de la carte

• La largeur maximum de la bulle d'aide

• La forme du lien

• Les coordonnées du lien (1000 caractères maximum)

• Une image (optionnelle) utilisée pour le survol de la région

Les coordonnées sont du type :

• X,Y,R dans le cas d'une forme circulaire e.g. 20,20,10 (définit un cercle centré en coordonnées 20px,20px à partir du haut gauche de l'image et d'un rayon de 10 pixels)

• X0,Y0,X1,Y1 dans le cas d'une forme rectangulaire

• X0,Y0,X1,Y1,...,Xn,Yn dans le cas d'une forme polygonale

• (optionnel) l'utilisation d'un CSS personnalisé pour les bulles d'aide afin de ne pas utiliser celui du template

Le style des bulles d'aide doit être réglé dans le template utilisé (voir les styles « .tool-tip » « .tool-title » « .tool-text » du fichier templates/rhuk_milkyway/css/template.css de Joomla)

- page 8 -

© Christophe Demko Ajoûts de liens à la carte cliquable

III.3.Paramètre du composant

Les paramètres globaux du composant peuvent être réglés en sélectionnant le bouton « Paramètres » de la vue principale du composant.

Le paramètre à régler consiste à préciser si les cartes sont incluses dans une div ou non (et de type .left, right ou center)

III.4.Création d'un élément de menu

Un élément de menu utilisant une carte cliquable est créé en utilisant le « Gestionnaire d'élément de menu » de l'interface d'administration. La présentation « Présentation d'une carte cliquable » du composant « Cartes cliquables » permet de créer un tel élément de menu.

Les paramètres spécifiques à choisir sont :

• « Paramètres - Basique »La carte cliquable et l'option permettant de masquer/afficher les modules

- page 9 -

© Christophe Demko Création d'un élément de menu

• « Paramètres avancés »Option permettant de masquer/afficher le titre de la carte

• « Paramètres - Composant »Option permettant d'inclure la carte dans une div.

- page 10 -

© Christophe Demko Création d'un élément de menu

L'affichage de la carte cliquable dans la partie publique est réalisé lorsque le visiteur clique sur le lien créé. Le survol de la carte cliquable permet d'afficher des bulles d'aide si elles ont été activées lors de la création des liens. Un clic sur une zone cliquable simule un clic sur l'élément de menu qui lui a été rattaché.

III.5.Changement de l'image lors du survol

Le composant « HTMLMap » permet d'activer un changement de l'image lors d'une survol d'une carte cliquable.

- page 11 -

© Christophe Demko Changement de l'image lors du survol

La première étape consiste à créer un répertoire dans le répertoire images/htmlmaps en utilisant le « Gestionnaire des médias » et d'y déposer les fichiers images qui seront utilisés pour le survol.

La deuxième étape consiste à affecter à la carte cliquable un répertoire pour les images du survol.

- page 12 -

© Christophe Demko Changement de l'image lors du survol

La troisième étape consiste à affecter une image de survol au lien désiré.

- page 13 -

© Christophe Demko Changement de l'image lors du survol

Le survol de carte cliquable dans le site public active le changement d'image.

- page 14 -

© Christophe Demko Changement de l'image lors du survol

III.6.Masquer tous les modules

Le composant permet d'afficher une carte cliquable sans afficher les modules. Il suffit de choisir l'option « Cacher tous les modules » lors de l'édition d'un élément de menu.

Le clic sur l'élément de menu dans la partie publique masque tous les modules

III.7.Une carte cliquable en page d'accueil

Pour obtenir une carte cliquable en page d'accueil, il suffit d'utiliser l'option décrite dans le

- page 15 -

© Christophe Demko Masquer tous les modules

paragraphe précédent et de définir cet élément de menu comme étant celui par défaut sur le site.

La page d'accueil du site n'est dorénavant composée que d'une carte cliquable.

- page 16 -

© Christophe Demko Une carte cliquable en page d'accueil

IV.Création d'un module avec une carte cliquableLa création d'un module « HTMLMap » permet d'afficher une carte cliquable dans un module.

Les deux seuls paramètres à régler sont :

• La carte cliquable

• L'inclusion ou non dans une div

L'affichage de la carte cliquable sélectionnée s'effectue dans le module.

- page 17 -

© Christophe Demko Création d'un module avec une carte cliquable

- page 18 -

© Christophe Demko Création d'un module avec une carte cliquable

V. Utilisation du greffon : ajouter des cartes cliquables dans un article

Il faut bien sûr activer le greffon avec l'interface d'administration de Joomla

Ensuite dans le contenu d'un article, il suffit de placer ce code suivant

{htmlmap « numéro » « position »}

où :

• « numéro » est le numéro d'identifiant de la carte cliquable

• « position » est l'alignement d'image qui sera appliqué. Il doit être choisi parmi les valeurs suivantes : top, middle, bottom, left, right

- page 19 -

© Christophe Demko Utilisation du greffon : ajouter des cartescliquables dans un article

L'affichage de l'article dans la partie publique provoque l'affichage de la carte cliquable

- page 20 -