Header

Partagez | 

Faire une image mappée

Message Sujet: Faire une image mappée   Mar 15 Oct - 9:22

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Comment vous expliquez le plus clairement possible ce qu'est une image mappée. Supposons que vous ayez une image avec plein de petites cases et que vous voulez que chacune de ces petites cases soient des boutons cliquables. Eh bien c'est possible avec une image mappée.

Arrow Une image mappée est donc une image qui contient des zones qui sont cliquables (vous comprendrez mieux avec notre exemple ^^).

Comment s'y prendre ?


Concrètement, ce n'est pas bien compliqué, mais, c'est une logique et une mécanique qu'il faut apprendre à faire correctement Smile

La préparation


Nous allons avoir besoin de plusieurs élements :
  • une image (logique),
  • les coordonnées des différentes zones (je vous explique juste après),
  • nos différents liens.


~~~~ L'image de fond
Ici, rien de bien compliqué, il nous faut juste l'image sur laquelle vous allez mettre vos différents liens. Pour mon exemple, ce sera celle-ci, réalisée en vitesse pour le tuto ^^
Spoiler:
 

~~~~ Les coordonnées des différentes zones
C'est, selon moi, la partie la plus compliquée. En effet, nous allons avoir besoin de 2 coordonnées pour chacune de nos zones cliquables : le point en haut à gauche et le point en bas à droite.
Un visuel aide toujours à comprendre :
Spoiler:
 

Idea Pour avoir les coordonées de vos différentes zones, eh bien il vous suffit d'utiliser vos logiciels de graphismes préférés, de placer votre curseur sur les points et de lire les infos aux endroits suivant :
Spoiler:
 

~~~~ Les liens
Ici, on met de coté les différents liens à indiquer sur nos zones. Dans notre exemple :
Spoiler:
 

Le code


Maintenant que nous avons nos différents élements, il ne nous reste plus qu'à tout retranscrire en code Smile

~~~~ L'image
On commence par le plus simple : l'image de fond. Ici facile, il suffit de la coder comme si on codait une image en html soit :
Code:
<img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/Tutos/imgMappee_zpsbbd7662d.png" alt="La Direction de SoP" />
Et à ce code, on va ajouter un élément pour signaler que cette image sera mappée et pour lui dire quel jeu de coordonnées va lui être associé. On va donc ajouter un attribut usemap="#map". Ce qui nous donne
Code:
<img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/Tutos/imgMappee_zpsbbd7662d.png" alt="La Direction de SoP" usemap="#mapDirection" />
~~~~ Le jeu de coordonnées
Pour commencer, on commence par dire au navigateur : "Zioup ! Voilà la carte de coordonnées qui s'appelle 'mapDirection'". Cela se traduit par
Code:
<map name="mapDirection">
<!-- les différentes coordonnées seront ici -->
</map>
Et ensuite, on va définir chaque zone. Pour chaque d'elle, 3 élements sont à donner :
  • la forme (rectangulaire, circulaire, polygonale)
    Idea ici, nous ne verrons que la forme rectangulaire dans notre exemple, pour les autres formes, je vous invite à jeter un oeil [ici],
  • les coordonnées,
  • le lien.

Pour chaque zone, on aura donc un code qui ressemble à ça
Code:
<area shape="rect" coords="xHG, yHG, xBD, yBD" href="http://" alt="Nom de la zone" title="Nom de la zone">
Concernant les coordonnées, il y a donc 4 informations à fournir (je vous mets entre parenthèse l'exemple de la zone 1 de mon schéma)
  • xHG = la position "x" du point haut gauche (18),
  • yHG = la position "y" du point haut gauche (9),
  • xBD = la position "x" du point bas droit (273),
  • yBD = la position "y" du point bas droit (137).


On assemble le tout et, pour la zone 1, j'aurai par exemple le code suivant :
Code:
<area shape="rect" coords="18, 9, 273, 137" href="http://www.school-of-pub.net" alt="School Of Pub, Forum d'entraide et de formations" title="School Of Pub, Forum d'entraide et de formations">
Notre jeu de coordonnées va donc ressembler à ça :
Code:
<map name="mapDirection">
   <area shape="rect" coords="18, 9, 273, 137" href="http://www.school-of-pub.net" alt="School Of Pub, Forum d'entraide et de formations" title="School Of Pub, Forum d'entraide et de formations">
   <area shape="rect" coords="xHG, yHG, xBD, yBD" href="http://" alt="Nom de la zone" title="Nom de la zone">
   <area shape="rect" coords="xHG, yHG, xBD, yBD" href="http://" alt="Nom de la zone" title="Nom de la zone">
   <area shape="rect" coords="xHG, yHG, xBD, yBD" href="http://" alt="Nom de la zone" title="Nom de la zone">
</map>

Au final


Eh bien, au final, une fois qu'on a assemblé tous nos préparatifs, voilà ce qu'on obtient Smile

La Direction de SoP

School Of Pub, Forum d'entraide et de formations
La Direction de l'école
Agnies
Clo
Tite-May
TicTac
Miettes

Code:
<img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/Tutos/imgMappee_zpsbbd7662d.png" alt="La Direction de SoP" usemap="#mapDirection" style="border:1px solid #fff;" />
<map name="mapDirection">
   <area shape="rect" coords="18, 9, 273, 137" href="http://www.school-of-pub.net" alt="School Of Pub, Forum d'entraide et de formations" title="School Of Pub, Forum d'entraide et de formations">
   <area shape="rect" coords="273, 40, 485, 106" href="http://www.school-of-pub.net/g1-la-direction" alt="La Direction de l'école" title="La Direction de l'école">
   <area shape="rect" coords="28, 150, 113, 309" href="http://www.school-of-pub.net/u2217" alt="Agnies" title="Agnies">
   <area shape="rect" coords="123, 150, 195, 309" href="http://www.school-of-pub.net/u400" alt="Clo" title="Clo">
   <area shape="rect" coords="207, 150, 291, 309" href="http://www.school-of-pub.net/u201" alt="Tite-May" title="Tite-May">
   <area shape="rect" coords="298, 150, 382, 309" href="http://www.school-of-pub.net/u303" alt="TicTac" title="TicTac">
   <area shape="rect" coords="389, 150, 471, 309" href="http://www.school-of-pub.net/u1" alt="Miettes" title="Miettes">
</map>



Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussignée, Miettes, accepte qu'un directeur reposte le tutoriel "Faire une image mappée" tel que je l'ai rédigé.
Revenir en haut Aller en bas

Message Sujet: Re: Faire une image mappée   Mar 15 Oct - 9:23

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Astuce supplémentaire


Utilisateurs de Gimp ?


Pentacle a écrit:
J'ai pas de question, juste vous dire que Gimp propose de réaliser des liens sur des images, et sa permet d'aller beaucoup plus vite que sa méthode.

Filtre > Web > Image cliquable Web

C'est simple à utiliser et on dispose d'outil pour faire des sélections.
Revenir en haut Aller en bas

Message Sujet: Re: Faire une image mappée   Mar 19 Jan - 22:40

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Mewyn

Directrice
Bons Points (BP) : 1586
Voir le profil de l'utilisateur

Mettre une image mappée en header


Arrow Nécessite d'avoir accès aux templates

Un header mappé peut vous servir à mettre en valeur diverses informations, remplacer une barre de navigation,... Voyons rapidement comment le mettre en place !

Une fois votre image mappée correctement :

Spoiler:
 

On commence par supprimer l'image du logo dans le panneau d'administration (Affichage > Gestion des images > Logo du forum).

Allez ensuite dans la template overall_header et chercher la ligne de tableau :

Code:
  <tr>
    <!-- BEGIN switch_logo_left -->
    <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
    <!-- END switch_logo_left -->
    <td align="center" width="100%" valign="middle">
      <!-- BEGIN switch_logo_center -->
      <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
      <br />
      <!-- END switch_logo_center -->
      <div class="maintitle">{MAIN_SITENAME}</div>
      <br />
      <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
    </td>
    <!-- BEGIN switch_logo_right -->
    <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
    <!-- END switch_logo_right -->
    </tr>

entre les lignes 254 et 270 sur un template non modifié. Il vous suffit de remplacer le contenu de la ligne par votre image mappée.

Le tableau ressemblera donc à ceci :
Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td align="center">
      <img src="http://img15.hostingpics.net/pics/777231Sanstitre1.png" alt="header" usemap="#mapHeader"/>
        <map name="mapHeader">
          <area shape="rect" coords="69, 165, 139, 216" href="/index" title="Forum"/>
          <area shape="rect" coords="185, 58, 254, 111" href="/faq" title="FAQ"/>
          <area shape="rect" coords="289, 18, 391, 63" href="/search" title="Recherche"/>
          <area shape="rect" coords="472, 20, 552, 70" href="/t1-" title="Contexte"/>
          <area shape="rect" coords="605, 116, 702, 168" href="/t2-" title="Règlement"/>
          <area shape="rect" coords="651, 262, 745, 318" href="/t3-" title="Groupes"/>
        </map>
    </td>
  </tr>
</table>
Enregistrez, validez le template et voilà !


Quelques idées:
 

Avec un header aléatoire


Si vous utilisez un header aléatoire, l'attribut usemap devra être mis dans votre Javascript.

A cet endroit :
Code:
document.getElementById("bann").innerHTML = "<a href=\"http://test-miettes.exprimetoi.net/\"><img src=\""+bann[i]+"\" alt=\"mon forum\" border=\"0\"></a>";
On ajoute donc usemap="#mapDirection"
Code:
document.getElementById("bann").innerHTML = "<a href=\"http://test-miettes.exprimetoi.net/\"><img usemap="#mapDirection" src=\""+bann[i]+"\" alt=\"mon forum\" border=\"0\"></a>";
Revenir en haut Aller en bas



Message Sujet: Re: Faire une image mappée   

Mes clubs

Contenu sponsorisé

Revenir en haut Aller en bas
Faire une image mappée
Page 1 sur 1
 Sujets similaires
-
» Comment faire une image cliquable ?
» Image de catégorie dans les sous forums
» Comment mettre l'image de description d'une catégorie/forum à gauche ?
» comment faire une chaine de midi file avec sonar
» comme faire une image survolée
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens