Problème sur Tutoriel vidéo jQuery : Créer une carte interactive

Alamake
Javascript

Bonjour,
J'ai passé mon après midi à codé en suivant le instruction du tuto Créer une carte interactive afin de créer une carte sympa pour mon forum de jeux de Rôle, mais voila lorsque je poste tout mon petit codage il ne s'affiche tout bonnement rien du tout ! -_-
Après recherche sur le forum je n'ai pas trouvé de solution à mon problème alors je me permet de me tourner vers vous pour que vous m'aidiez. :)

voici mes différentes pages en espèrent que j'ai fait une bonne grosse bêtise qui va vous taper dans l’œil dès qu'un pro regardera mes gribouillages de bidouilleuse en informatique ^^ (Oui une boulette facile à trouver, histoire de ne pas prendre trop de temps aux bonnes volontés qui voudrait bien m'aider Oo)

HTML :

<script type="text/javascript">
jQuery(function($){
  $('.map').append('<div class="overlay">').append('<div class="tooltip">salut</div>');
  $('.map .tooltip').hide();
  var domaines=
     {name:'La Cour',slug:'La Cour'},
     {name:'La Cour',slug:'La Cour'},
     {name:'La Cour',slug:'La Cour'},
     {name:'La Cour',slug:'La Cour'},
     {name:'La Torche',slug:'La Torche'},
     {name:'La Torche',slug:'La Torche'},
     {name:'Le Havre',slug:'Le Harvre'},
     {name:'Le Hautes Terres',slug:'Les Hautes Terres'},
     {name:'Le Carrefour',slug:'Le Carrefour'},
     {name:'Le Carrefour',slug:'Le Carrefour'},
     {name:'Le Carrefour',slug:'Le Carrefour'},
     {name:'Les Tours',slug:'Les Tours'},
     {name:'Les Tours',slug:'Les Tours'},
     {name:'Le Havre',slug:'Le Harvre'},
     {name:'Le Havre',slug:'Le Harvre'},
     {name:'Le Hautes Terres',slug:'Les Hautes Terres'},
     {name:'Le Hautes Terres',slug:'Les Hautes Terres'},
     {name:'Non Camarilla',slug:'Non Camarilla'},
     {name:'Non Camarilla',slug:'Non Camarilla'},
     {name:'Les Tours',slug:'Les Tours'}
  ];

  $(document).mousemouve(function(e){
    $('.map .tooltip').css({
      top:e.pageY-$('.map .tooltip').height()-20,
      left:e.pageX-$('.map .tooltip').width()/2-10
     }); 
  });

  $('.map area').mouseover(function(){
   var index = $(this).index();
   var left=-index*214-214;
   $('.map .tooltip').html(domaines[index].name).stop().fadeTo(500,0.6);
   $('.map .overlay').css({
   backgroundPosition:left+"px 0px"
   })
  });
   $('.map').mouseout(function(){
    $('.map .overlay').css({
   backgroundPosition:"214px 0px"
   })
   $('.map .tooltip').stop().fadeTo(500,0);
  });
});
</sript>
<div class="map">
<img src="http://vide.png" width="214" height="195" usemap="map">
<map name="map">
<area shape="poly" coords="94,100,100,90,126,100,121,115" href="http://vampiredeparis.jdrforum.com/f3-1-eme-2-eme-3-eme-et-4-eme-arrondissements-reverves-au-prince-de-la-ville-appele-la-cour">
</area>
<area shape="poly" coords="101,88,115,84,131,89,127,99" href="http://vampiredeparis.jdrforum.com/f3-1-eme-2-eme-3-eme-et-4-eme-arrondissements-reverves-au-prince-de-la-ville-appele-la-cour">
</area>
<area shape="poly" coords="133,89,143,93,150,115,129,101" href="http://vampiredeparis.jdrforum.com/f3-1-eme-2-eme-3-eme-et-4-eme-arrondissements-reverves-au-prince-de-la-ville-appele-la-cour">
</area>
<area shape="poly" coords="128,103,123,116,143,129,146,129,151,118" href="http://vampiredeparis.jdrforum.com/f3-1-eme-2-eme-3-eme-et-4-eme-arrondissements-reverves-au-prince-de-la-ville-appele-la-cour">
</area>
<area shape="poly" coords="121,118,111,143,130,148,146,134" href="http://vampiredeparis.jdrforum.com/f10-5-eme-et-6-eme-arrondissements-appele-la-torche">
</area>
<area shape="poly" coords="119,117,109,143,89,131,101,122,107,109" href="http://vampiredeparis.jdrforum.com/f10-5-eme-et-6-eme-arrondissements-appele-la-torche">
</area>
<area shape="poly" coords="87,131,76,130,55,111,61,102,87,98,105,109,99,121" href="http://vampiredeparis.jdrforum.com/f11-14-eme-15-eme-et-7-eme-arrondissements-appele-le-havre"></area>
<area shape="poly" coords="67,99,61,81,64,75,98,63,98,87,92,98,83,97" href="http://vampiredeparis.jdrforum.com/f12-8-eme-16-eme-et-17-eme-arrondissements-appele-les-hautes-terres">
</area>
<area shape="poly" coords="100,87,100,63,102,61,113,64,126,62,127,85,115,82" href="http://vampiredeparis.jdrforum.com/f13-9-eme-10-eme-et-11-eme-arrondissement-appele-le-carrefour"></area>
<area shape="poly" coords="128,61,149,60,152,73,161,84,143,91,128,86" href="http://vampiredeparis.jdrforum.com/f13-9-eme-10-eme-et-11-eme-arrondissement-appele-le-carrefour"></area>
<area shape="poly" coords="146,93,154,118,186,126,162,85" href="http://vampiredeparis.jdrforum.com/f13-9-eme-10-eme-et-11-eme-arrondissement-appele-le-carrefour">
</area>
<area shape="poly" coords="154,119,147,133,175,166,201,150,205,130,184,128" href="http://vampiredeparis.jdrforum.com/f14-12-eme-13-eme-et-20-eme-arrondissements-appele-les-tours"></area>
<area shape="poly" coords="119,147,116,156,121,187,174,169,147,137,141,145,129,151" href="http://vampiredeparis.jdrforum.com/f14-12-eme-13-eme-et-20-eme-arrondissements-appele-les-tours">
</area>
<area shape="poly" coords="95,137,69,172,109,187,119,188,114,158,116,147,108,146" href="http://vampiredeparis.jdrforum.com/f11-14-eme-15-eme-et-7-eme-arrondissements-appele-le-havre"></area>
<area shape="poly" coords="53,113,22,153,66,172,93,138,86,134,75,133" href="http://vampiredeparis.jdrforum.com/f11-14-eme-15-eme-et-7-eme-arrondissements-appele-le-havre"></area>
<area shape="poly" coords="21,152,4,137,45,75,58,82,64,99,61,101" href="http://vampiredeparis.jdrforum.com/f12-8-eme-16-eme-et-17-eme-arrondissements-appele-les-hautes-terres">
</area>
<area shape="poly" coords="40,72,51,53,99,29,97,61,63,73,59,77" href="http://vampiredeparis.jdrforum.com/f12-8-eme-16-eme-et-17-eme-arrondissements-appele-les-hautes-terres">
</area>
<area shape="poly" coords="101,29,150,26,151,41,144,58,123,60,101,59" href="http://vampiredeparis.jdrforum.com/f45-18eme-et-19eme-arrondissements-paris-non-camariste">
</area>
<area shape="poly" coords="152,27,179,29,199,72,163,81,154,73,152,59,147,57,155,42" href="http://vampiredeparis.jdrforum.com/f45-18eme-et-19eme-arrondissements-paris-non-camariste">
</area>
<area shape="poly" coords="164,84,201,75,207,128,188,127" href="http://vampiredeparis.jdrforum.com/f14-12-eme-13-eme-et-20-eme-arrondissements-appele-les-tours">
</area>
</map>

css : 

.map{
width:214px;
height:195px; 
background:url(http://i33.servimg.com/u/f33/17/32/56/09/carte_10.png) left top no-repeat;
position:relative;
}
.map .overlay{
width:214px;
height:195px; 
background:url(http://i33.servimg.com/u/f33/17/32/56/09/carte_10.png) 214px top no-repeat;
position:absolute;
top:0;
left:0;
z-index:1;
}
.map img{
position:absolute;
top:0;
left:0;
z-index:2;
}
.map .tooltip{
 position:fixed;
 border-radius:5px;
 color:#FFF;
 background:#000;
 padding:0 10px
 display:inline-block;
 top:0;
 left:0;
 z-index:3;
 text-align:center;
}

J’utilise un forum 'ForumActif' j'ai donc posté le Css dans la feuille prévue à cette effet et pour le code HTML j'ai tenté deux choses : de poster directement dans un message et dans un page vierge HTML prévue à cette effet (http://vampiredeparis.jdrforum.com/h2-carte-paris) Mais comme vous pouvez le voir sur ce lien rien n'est visible... :( Comme si je n'avais rien mis dans la page et ça fait pareil si je poste mon code directement sur le forum...

Voyez vous d'où provient le problème ?

ps : Lorsque je poste juste le code ci dessous, j'ai bien ma carte qui s'affiche avec la possibilité de cliqué, mais sans possibilité de changer l'image au survole. Enfin à ma connaissance... :( 

<img src="http://i33.servimg.com/u/f33/17/32/56/09/carte10.png" alt="Carte de Paris" title="Carte de Paris" usemap="#maparr"></img>
<map id="maparr" name="maparr">
<area shape="poly" coords="94,100,100,90,126,100,121,115" href="http://vampiredeparis.jdrforum.com/f3-1-eme-2-eme-3-eme-et-4-eme-arrondissements-reverves-au-prince-de-la-ville-appele-la-cour"></area>
<area shape="poly" coords="101,88,115,84,131,89,127,99" href="http://vampiredeparis.jdrforum.com/f3-1-eme-2-eme-3-eme-et-4-eme-arrondissements-reverves-au-prince-de-la-ville-appele-la-cour"></area>
<area shape="poly" coords="133,89,143,93,150,115,129,101" href="http://vampiredeparis.jdrforum.com/f3-1-eme-2-eme-3-eme-et-4-eme-arrondissements-reverves-au-prince-de-la-ville-appele-la-cour"></area>
<area shape="poly" coords="128,103,123,116,143,129,146,129,151,118" href="http://vampiredeparis.jdrforum.com/f3-1-eme-2-eme-3-eme-et-4-eme-arrondissements-reverves-au-prince-de-la-ville-appele-la-cour"></area>
<area shape="poly" coords="121,118,111,143,130,148,146,134" href="http://vampiredeparis.jdrforum.com/f10-5-eme-et-6-eme-arrondissements-appele-la-torche"></area>
<area shape="poly" coords="119,117,109,143,89,131,101,122,107,109" href="http://vampiredeparis.jdrforum.com/f10-5-eme-et-6-eme-arrondissements-appele-la-torche"></area>
<area shape="poly" coords="87,131,76,130,55,111,61,102,87,98,105,109,99,121" href="http://vampiredeparis.jdrforum.com/f11-14-eme-15-eme-et-7-eme-arrondissements-appele-le-havre"></area>
<area shape="poly" coords="67,99,61,81,64,75,98,63,98,87,92,98,83,97" href="http://vampiredeparis.jdrforum.com/f12-8-eme-16-eme-et-17-eme-arrondissements-appele-les-hautes-terres"></area>
<area shape="poly" coords="100,87,100,63,102,61,113,64,126,62,127,85,115,82" href="http://vampiredeparis.jdrforum.com/f13-9-eme-10-eme-et-11-eme-arrondissement-appele-le-carrefour"></area>
<area shape="poly" coords="128,61,149,60,152,73,161,84,143,91,128,86" href="http://vampiredeparis.jdrforum.com/f13-9-eme-10-eme-et-11-eme-arrondissement-appele-le-carrefour"</area>
<area shape="poly" coords="146,93,154,118,186,126,162,85" href="http://vampiredeparis.jdrforum.com/f13-9-eme-10-eme-et-11-eme-arrondissement-appele-le-carrefour"></area>
<area shape="poly" coords="154,119,147,133,175,166,201,150,205,130,184,128" href="http://vampiredeparis.jdrforum.com/f14-12-eme-13-eme-et-20-eme-arrondissements-appele-les-tours"</area>
<area shape="poly" coords="119,147,116,156,121,187,174,169,147,137,141,145,129,151" href="http://vampiredeparis.jdrforum.com/f14-12-eme-13-eme-et-20-eme-arrondissements-appele-les-tours"></area>
<area shape="poly" coords="95,137,69,172,109,187,119,188,114,158,116,147,108,146" href="http://vampiredeparis.jdrforum.com/f11-14-eme-15-eme-et-7-eme-arrondissements-appele-le-havre"</area>
<area shape="poly" coords="53,113,22,153,66,172,93,138,86,134,75,133" href="http://vampiredeparis.jdrforum.com/f11-14-eme-15-eme-et-7-eme-arrondissements-appele-le-havre"</area>
<area shape="poly" coords="21,152,4,137,45,75,58,82,64,99,61,101" href="http://vampiredeparis.jdrforum.com/f12-8-eme-16-eme-et-17-eme-arrondissements-appele-les-hautes-terres"></area>
<area shape="poly" coords="40,72,51,53,99,29,97,61,63,73,59,77" href="http://vampiredeparis.jdrforum.com/f12-8-eme-16-eme-et-17-eme-arrondissements-appele-les-hautes-terres"></area>
<area shape="poly" coords="101,29,150,26,151,41,144,58,123,60,101,59" href="http://vampiredeparis.jdrforum.com/f45-18eme-et-19eme-arrondissements-paris-non-camariste"></area>
<area shape="poly" coords="152,27,179,29,199,72,163,81,154,73,152,59,147,57,155,42" href="http://vampiredeparis.jdrforum.com/f45-18eme-et-19eme-arrondissements-paris-non-camariste"></area>
<area shape="poly" coords="164,84,201,75,207,128,188,127" href="http://vampiredeparis.jdrforum.com/f14-12-eme-13-eme-et-20-eme-arrondissements-appele-les-tours">
</area></map>

7 réponses

Alamake
Auteur
Réponse acceptée

Comment puis je faire ça ? J'utilise juste NotePad++ pour écrire mes codes et le teste directement en ligne.

Ne puis je pas laisser les code Js dans la page HTML ? Il faut que je poste le JS dans une autre page expret pour gérer le JS ?!
Ah oui c'est peut être ça je vais de ce pas tester ^^

antho07

Bonjour, j'ai pas tout suivit mais si tu essayes de mettre du javascript en message sur un forum, fort probable que ça soit filtré et rejeté .

Concernant la page vierge? t'as un accès total sur le contenu de la page?

coloo

Comme pour la gestion du html, il y a des pages pour le js (c'est juste dans le même onglet). Vérifies déjà que ton fichier fonctionne en local, sur une simple fichier html =)

coloo

As-tu trouver la solution ? Le message que tu as marqué comme résolu ne te donne pas la réponse ;)

Les utilisateurs de forumactifs pourrait apprécier de voir ce topic résolu avec une solution

Bonne journée ;)

Alamake
Auteur

En effet j'ai marqué un message sans le vouloir, je n'ai pas encore trouvé de solution... :(

Lorsque je vais sur la page où j'ai mis le codage il y a une amélioration puisqu'une image déchiré apparait (ici = http://vampiredeparis.jdrforum.com/h2-carte-paris) la seul chose que j'ai fait c'est virer la partie en JS, mais bon du coup je sais pas où la mettre... :S
Je JS ne peut pas être hébergé dans une page HTML ?
J'ai bien un endroit ou je peu poster mes code JS, mais lorsque rajoute le code JS du tuto ça fait buguer un autre JS qui lui fonctionne très bien sur mon forum puisque c'est lui qui fait mon image de fond qui s'adapte à la taille des écrans des visiteurs.

Il y a peu être une erreur dans mon JS ? C'est un code que je ne maitrise pas du tout c'est la première fois que je l'utilise autant...

Une question bete est ce que mon code fonctionne si il est posté à un endroit "classique" comme sur un site ? (je n'ai rien pour pouvoir tester ça...)

Alamake
Auteur

J'ai contacter ForumActif via le forum d'entre aide il me conseil de mettre l'ensemble de mes codages dans une seule et même page HTML.

Voici donc le code finale.

<!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8" />
                <title>Carte interactive de Paris</title>

        <style type="text/css">

.map{
width:214px;
height:195px; 
background:url(http://i33.servimg.com/u/f33/17/32/56/09/carte_10.png) left top no-repeat;
position:relative;
}
.map .overlay{
width:214px;
height:195px; 
background:url(http://i33.servimg.com/u/f33/17/32/56/09/carte_10.png) 214px top no-repeat;
position:absolute;
top:0;
left:0;
z-index:1;
}
.map img{
position:absolute;
top:0;
left:0;
z-index:2;
}
.map .tooltip{
 position:fixed;
 border-radius:5px;
 color:#FFF;
 background:#000;
 padding:0 10px
 display:inline-block;
 top:0;
 left:0;
 z-index:3;
 text-align:center;

        </style>

<script type="text/javascript">
jQuery(function($){
  $('.map').append('<div class="overlay">').append('<div class="tooltip">salut</div>');
  $('.map .tooltip').hide();
  var domaines=
     {name:'La Cour',slug:'La Cour'},
     {name:'La Cour',slug:'La Cour'},
     {name:'La Cour',slug:'La Cour'},
     {name:'La Cour',slug:'La Cour'},
     {name:'La Torche',slug:'La Torche'},
     {name:'La Torche',slug:'La Torche'},
     {name:'Le Havre',slug:'Le Harvre'},
     {name:'Le Hautes Terres',slug:'Les Hautes Terres'},
     {name:'Le Carrefour',slug:'Le Carrefour'},
     {name:'Le Carrefour',slug:'Le Carrefour'},
     {name:'Le Carrefour',slug:'Le Carrefour'},
     {name:'Les Tours',slug:'Les Tours'},
     {name:'Les Tours',slug:'Les Tours'},
     {name:'Le Havre',slug:'Le Harvre'},
     {name:'Le Havre',slug:'Le Harvre'},
     {name:'Le Hautes Terres',slug:'Les Hautes Terres'},
     {name:'Le Hautes Terres',slug:'Les Hautes Terres'},
     {name:'Non Camarilla',slug:'Non Camarilla'},
     {name:'Non Camarilla',slug:'Non Camarilla'},
     {name:'Les Tours',slug:'Les Tours'}
  ];

  $(document).mousemouve(function(e){
    $('.map .tooltip').css({
      top:e.pageY-$('.map .tooltip').height()-20,
      left:e.pageX-$('.map .tooltip').width()/2-10
     }); 
  });

  $('.map area').mouseover(function(){
   var index = $(this).index();
   var left=-index*214-214;
   $('.map .tooltip').html(domaines[index].name).stop().fadeTo(500,0.6);
   $('.map .overlay').css({
   backgroundPosition:left+"px 0px"
   })
  });
   $('.map').mouseout(function(){
    $('.map .overlay').css({
   backgroundPosition:"214px 0px"
   })
   $('.map .tooltip').stop().fadeTo(500,0);
  });
});
</sript>

        </head>

        <body><div class="map">
<img src="http://vide.png" width="214" height="195" usemap="map">
<map name="map">
<area shape="poly" coords="94,100,100,90,126,100,121,115" href="http://vampiredeparis.jdrforum.com/f3-1-eme-2-eme-3-eme-et-4-eme-arrondissements-reverves-au-prince-de-la-ville-appele-la-cour">
</area>
<area shape="poly" coords="101,88,115,84,131,89,127,99" href="http://vampiredeparis.jdrforum.com/f3-1-eme-2-eme-3-eme-et-4-eme-arrondissements-reverves-au-prince-de-la-ville-appele-la-cour">
</area>
<area shape="poly" coords="133,89,143,93,150,115,129,101" href="http://vampiredeparis.jdrforum.com/f3-1-eme-2-eme-3-eme-et-4-eme-arrondissements-reverves-au-prince-de-la-ville-appele-la-cour">
</area>
<area shape="poly" coords="128,103,123,116,143,129,146,129,151,118" href="http://vampiredeparis.jdrforum.com/f3-1-eme-2-eme-3-eme-et-4-eme-arrondissements-reverves-au-prince-de-la-ville-appele-la-cour">
</area>
<area shape="poly" coords="121,118,111,143,130,148,146,134" href="http://vampiredeparis.jdrforum.com/f10-5-eme-et-6-eme-arrondissements-appele-la-torche">
</area>
<area shape="poly" coords="119,117,109,143,89,131,101,122,107,109" href="http://vampiredeparis.jdrforum.com/f10-5-eme-et-6-eme-arrondissements-appele-la-torche">
</area>
<area shape="poly" coords="87,131,76,130,55,111,61,102,87,98,105,109,99,121" href="http://vampiredeparis.jdrforum.com/f11-14-eme-15-eme-et-7-eme-arrondissements-appele-le-havre"></area>
<area shape="poly" coords="67,99,61,81,64,75,98,63,98,87,92,98,83,97" href="http://vampiredeparis.jdrforum.com/f12-8-eme-16-eme-et-17-eme-arrondissements-appele-les-hautes-terres">
</area>
<area shape="poly" coords="100,87,100,63,102,61,113,64,126,62,127,85,115,82" href="http://vampiredeparis.jdrforum.com/f13-9-eme-10-eme-et-11-eme-arrondissement-appele-le-carrefour"></area>
<area shape="poly" coords="128,61,149,60,152,73,161,84,143,91,128,86" href="http://vampiredeparis.jdrforum.com/f13-9-eme-10-eme-et-11-eme-arrondissement-appele-le-carrefour"></area>
<area shape="poly" coords="146,93,154,118,186,126,162,85" href="http://vampiredeparis.jdrforum.com/f13-9-eme-10-eme-et-11-eme-arrondissement-appele-le-carrefour">
</area>
<area shape="poly" coords="154,119,147,133,175,166,201,150,205,130,184,128" href="http://vampiredeparis.jdrforum.com/f14-12-eme-13-eme-et-20-eme-arrondissements-appele-les-tours"></area>
<area shape="poly" coords="119,147,116,156,121,187,174,169,147,137,141,145,129,151" href="http://vampiredeparis.jdrforum.com/f14-12-eme-13-eme-et-20-eme-arrondissements-appele-les-tours">
</area>
<area shape="poly" coords="95,137,69,172,109,187,119,188,114,158,116,147,108,146" href="http://vampiredeparis.jdrforum.com/f11-14-eme-15-eme-et-7-eme-arrondissements-appele-le-havre"></area>
<area shape="poly" coords="53,113,22,153,66,172,93,138,86,134,75,133" href="http://vampiredeparis.jdrforum.com/f11-14-eme-15-eme-et-7-eme-arrondissements-appele-le-havre"></area>
<area shape="poly" coords="21,152,4,137,45,75,58,82,64,99,61,101" href="http://vampiredeparis.jdrforum.com/f12-8-eme-16-eme-et-17-eme-arrondissements-appele-les-hautes-terres">
</area>
<area shape="poly" coords="40,72,51,53,99,29,97,61,63,73,59,77" href="http://vampiredeparis.jdrforum.com/f12-8-eme-16-eme-et-17-eme-arrondissements-appele-les-hautes-terres">
</area>
<area shape="poly" coords="101,29,150,26,151,41,144,58,123,60,101,59" href="http://vampiredeparis.jdrforum.com/f45-18eme-et-19eme-arrondissements-paris-non-camariste">
</area>
<area shape="poly" coords="152,27,179,29,199,72,163,81,154,73,152,59,147,57,155,42" href="http://vampiredeparis.jdrforum.com/f45-18eme-et-19eme-arrondissements-paris-non-camariste">
</area>
<area shape="poly" coords="164,84,201,75,207,128,188,127" href="http://vampiredeparis.jdrforum.com/f14-12-eme-13-eme-et-20-eme-arrondissements-appele-les-tours">
</area>
</map>

        </body>
        </html>

Voici le lien vers la page : http://vampiredeparis.jdrforum.com/h3-carte-interactive-de-paris

L'image apparait cette fois, mais pas du tout les lien ni les image de survole... J'en déduit qu'il doit y avoir une erreur dans mon code... :(
Une idée ?

Alamake
Auteur

Problème résolu via ForumActif merci.