<?php
echo "<h2>Carte Cmap - Tutorial</h2>";
?> 
<ol>
  <li><a href="#carte">Paramètres de la carte</a></li>
  <li><a href="#affich">Paramètres d'affichage</a></li>
  <li><a href="#shortc">Intégration dans vos pages ou articles</a> (shortcode)</li>
  <li><a href="#debug">Debug</a></li>
  <li><a href="#version">Versions futures</a></li>
</ol>

<p>&nbsp;</p>
  <hr size="1" width="600" align="left">
<a name="carte"></a>
<p>&nbsp;</p>
<p>Dans le fichier <a href='plugin-editor.php?file=fr_wpdpt_svg/js/paths.js'>paths.js</a>, 
  vous trouverez les paramètres modifiables de votre carte (en rouge):</p>
<h3>/* <br> 
&nbsp;*  CONFIGURATION GENERALE ( aspect générale de la carte )<br>
&nbsp;*/</h3>
		
	
<table width="600" border="0" cellspacing="0" cellpadding="3">
  <tr> 
    <td>var mapfill = '<font color="#FF0000"><strong>#4EAB92</strong></font>';</td>
    <td>couleur du fond de carte</td>
  </tr>
  <tr> 
    <td>var mapoff = '<font color="#FF0000"><strong>#CCCCCC</strong></font>';</td>
    <td>couleur des départements désactivés ( url vide)</td>
  </tr>
  <tr> 
    <td>var mapstroke = '<font color="#FF0000"><strong>#333333</strong></font>';</td>
    <td>couleur des traits de séparation des départements</td>
  </tr>
  <tr> 
    <td>var hover_fill = '<font color="#FF0000"><strong>#FFEA93</strong></font>';</td>
    <td>couleur au survol survol de la souris</td>
  </tr>
  <tr> 
    <td>var mapstroke_width = <font color="#FF0000"><strong>2.5</strong></font>;</td>
    <td>Epaisseur des traits de séparation de départements</td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td>var txtfill = '<strong><font color="#FF0000">#FFFFFF</font></strong>';</td>
    <td>couleur de fond de la bulle texte</td>
  </tr>
  <tr> 
    <td>var txtstroke = '<strong><font color="#FF0000">#000000</font></strong>';</td>
    <td>couleur du contour de la bulle texte</td>
  </tr>
  <tr> 
    <td>var txtfont = '<strong><font color="#FF0000">#000000</font></strong>';</td>
    <td>couleur des caracteres de la bulle texte</td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td>var mapWidth = <strong><font color="#FF0000">400</font></strong>;</td>
    <td>Largeur de la carte en pixels</td>
  </tr>
  <tr>
    <td>var mapHeight = <em>function</em>;</td>
    <td><em>Calcule le ratio par rapport à la largeur.</em></td>
  </tr>
</table>

<p>&nbsp; </p>
<h3>/* <br>
  &nbsp;* CONFIGURATION DES DEPARTEMENTS ( identique pour chaque dep. )<br>
&nbsp;*/</h3>
<table width="600" border="0" cellspacing="0" cellpadding="3">
  <tr> 
    <td valign="top">title: &quot;<font color="#FF0000"><strong>Ain</strong></font>&quot;,<br> 
    </td>
    <td valign="top">titre affiché dans l'infobulle.<br> </td>
  </tr>
  <tr>
    <td valign="top">coul: &quot;<strong><font color="#FF0000">#FFCC00</font></strong>&quot;;</td>
    <td valign="top">Couleur spécifique à ce département.</td>
  </tr>
  <tr> 
    <td valign="top">target: &quot;<strong><font color="#FF0000">_self</font></strong>&quot;,</td>
    <td valign="top">mode d'ouverture du lien ou du script 
      <li> _self = même fenêtre</li>
      <li>_blank = nouvelle fenêtre</li></td>
  </tr>
  <tr> 
    <td valign="top">url: &quot;<strong><font color="#FF0000">http://www.site.com/mapage.php?id=17</font></strong>&quot;,</td>
    <td valign="top">lien de la page ou du script au moment du clic</td>
  </tr>
  <tr> 
    <td valign="top"> path:&quot;<font color="#0066FF"><em><font color="#999999">M 
      118.4,172.8 C 107.1,188.8 97.1,193 </font></em></font><font color="#999999">...</font>&quot;</td>
    <td valign="top">coordonnées de la zone réactive<br>
      (de préférence ne pas modifier)</td>
  </tr>
</table>
<p><br>
</p>
<p><a href='plugin-editor.php?file=fr_wpdpt_svg/js/paths.js'><strong>Editer les paramètres 
  des départements</strong></a> </p>
  
  
  
 <p>&nbsp;</p>
  <hr size="1" width="600" align="left">
<a name="affich"></a>
<p>&nbsp;</p>
<h3>AFFICHAGE DE LA CARTE</h3>
<p>vous pouvez également éditer le fichier <a href='plugin-editor.php?file=fr_wpdpt_svg/cmap.php'>cmap.php</a> et modifier la petite feuille de style css pour l'adapter à vos besoins :</p>
<a href='plugin-editor.php?file=fr_wpdpt_svg/cmap.php'><strong>Editer les paramètres 
d'affichage</strong></a> 
<p>&nbsp;</p>
  <hr size="1" width="600" align="left">
<a name="shortc"></a>
<p>&nbsp;</p>
<h3>INTEGRATION DE LA CARTE</h3>

<p>Afin de simplifier l'intégration de cette carte dans vos pages et articles, 
  nous avons mis en place un <a href="http://codex.wordpress.org/Shortcode_API" target='_blank'>shortcode</a></p>
<p>pour intégrer la carte dans vos pages ou vos articles, tapez &quot;<font color="#0000FF"><strong>[francedpt]</strong></font>&quot; 
  à l'endroit du texte de votre page<br>
  ou de votre article où vous souhaitez voir apparaître la carte.</p>
<p><br>
</p>




 <p>&nbsp;</p>
  <hr size="1" width="600" align="left">
<a name="debug"></a>
<p>&nbsp;</p>
<h3>DEBUG</h3>
<p>Nous comptons beaucoup sur votre retour par mail ou via les commentaires dans 
  notre <a href="http://blog.comersis.com/articles/wordpress/" target="_blank">blog</a> 
  pour améliorer<br>
  ces cartes pour Wordpress.<br>
  Vos idées, vos déceptions, bref dites nous quelle genre de carte interactive 
  vous aimeriez !</p>





 <p>&nbsp;</p>
  <hr size="1" width="600" align="left">
<a name="version"></a>
<p>&nbsp;</p>
<h3>VERSIONS A VENIR</h3>
<p></p>

  
<li>Développement d'une administration par formulaire avec sélecteur de couleurs<br>
    (plus besoin de mettre les doigts dans le code source)</li>
  <li>Possibilités de colorer chaque région (ou département) indépendamment</li>
  <li>Développement d'un shortcode avec attributs additionels (paramètres dynamiques)</li>
  
<li>Script de redimensionnement de la carte pour l'adapter à la taille voulue.</li>
<p>NOTE : nous préparons actuellement une version Widget de cette carte pour intégrer 
  dans vos menus.<br>
  Les clients de Comersis.com recoivent automatiquement les mises à jour de leur 
  produits. </p>
<p>&nbsp;</p>
<p>Contact : info@comersis.com</p>
<p>Blog : <a href="http://blog.comersis.com/articles/wordpress/" target="_blank">http://blog.comersis.com/articles/wordpress/</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
