Carte responsive dans un module personnalisé

Réduire
Ce sujet est fermé.
X
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Carte responsive dans un module personnalisé

    Bonjour,

    J'ai récupéré une carte de France réalisée en SVG. Je dispose donc de trois fichiers .js, un fichier .css ainsi que du fichier .php faisant appel à ces fichiers.

    J'ai donc pensé qu'en copiant les fichiers .js et les .css sur mon hébergeur, et on copiant le code dans un module personnalisé joomla, tout fonctionnerai.

    J'ai bien sûr modifié l'appel aux différents fichiers js et css en renseignant le bon chemin dans les lignes "script src".

    Et pourtant, la carte ne s'affiche pas, mais la div oui....vide bien sûr.

    Voici ci-dessous le code correspondant au fichier php que j'ai copié dans mon module personnalisé:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>France Map for JQVMap / Gaël Jaffredo</title>

    <link href="css/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.vmap.js" type="text/javascript"></script>
    <script src="js/jquery.vmap.france.js" type="text/javascript"></script>
    <script src="js/jquery.vmap.colorsFrance.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(document).ready(function() {
    $('#francemap').vectorMap({
    map: 'france_fr',
    hoverOpacity: 0.5,
    hoverColor: false,
    backgroundColor: "#ffffff",
    colors: couleurs,
    borderColor: "#000000",
    selectedColor: "#EC0000",
    enableZoom: true,
    showTooltip: true,
    onRegionClick: function(element, code, region)
    {
    var message = 'Département : "'
    + region
    + '" || Code : "'
    + code
    + '"';

    alert(message);
    }
    });
    });
    </script>
    </head>
    <body>
    <div id="francemap" style="width: 700px; height: 600px;"></div>
    </body>
    </html>


    Je précise que je ne suis pas du tout développeur, mais plutôt bidouilleur
    Merci pour votre aide précieuse

Annonce

Réduire
Aucune annonce pour le moment.

Partenaire de l'association

Réduire

Hébergeur Web PlanetHoster
Travaille ...
X