Comment intégrer un codage comtemant du JS, HTML et Css

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Comment intégrer un codage comtemant du JS, HTML et Css

Message par Alamake Lun 22 Juil 2013 - 17:49

Bonjour,
j'ai créé un code pour une carte interactive liant les lieux de la carte à des partie de mon forum (un truc comme ça : http://www.lion1906.com/Pages/francais/recherche/carte_interactive/carte_interactive.html)

le problème c'est que ce code contient du Js, HTML et css.
J'ai mis le css dans la partie dédié à cet effet (admin>affichage>Couleurs>css)
La partie en HTML et JS dans une page HTML (Admin>module>page HTML)

Comme ça ne fonctionné pas j'ai pris la partie en JS da la page HTML que j'ai posté dans une page de JS (Admin>module>page Java Script)j'ai fait appliquer à toutes les pages et ça ne fonctionne toujours pas. Pire ! ça fait buguer un autre code JS qui lui fonctionne très bien qui ser pour le fond de mon forum. Sad

Je ne sais pas quoi faire quelqu'un aurait il une idée par hasard ?::moitimide::


Dernière édition par Alamake le Mer 24 Juil 2013 - 13:08, édité 1 fois
Alamake

Alamake
*

Féminin
Messages : 36
Inscrit(e) le : 16/08/2011

http://vampiredeparis.forumgratuit.org/
Alamake a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment intégrer un codage comtemant du JS, HTML et Css

Message par Izumi375 Lun 22 Juil 2013 - 18:13

Coucou, ^^

Je ne vois pas le problème...
Pourquoi ne pas tout mettre dans une page html avec la structure suivante?

Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>

<style type="text/css">

CODE CSS

</style>

<script type="text/javascript">
<!--

SCRIPT JS

-->
</script>

</head>

<body>

CODE HTML

</body>
</html>

En espérant avoir bien cerné ta question. Very Happy 
Izumi375

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment intégrer un codage comtemant du JS, HTML et Css

Message par Alamake Lun 22 Juil 2013 - 19:36

Merci de ta réponse rapide, je viens de tester et malheureusement ça ne fonctionne pas je ne sais pas si j'ai une erreur dans mon codage...

Normalement en mettant du Js et du css dans la page HTML mise à disposition par ForumActif ça devrais fonctionner c'est bien ça ?
Alamake

Alamake
*

Féminin
Messages : 36
Inscrit(e) le : 16/08/2011

http://vampiredeparis.forumgratuit.org/
Alamake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment intégrer un codage comtemant du JS, HTML et Css

Message par Izumi375 Lun 22 Juil 2013 - 19:38

Oui j'ai pas mal de pages avec JS, html et css et elles fonctionnent bien. Quand tu cliques sur prévisualiser, tu ne vois pas ce que tu attends?

Sinon il va falloir que tu donnes ton code qu'on puisse le tester... =/
Izumi375

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment intégrer un codage comtemant du JS, HTML et Css

Message par Alamake Lun 22 Juil 2013 - 19:44

Je te MP mon code, merci bcp de ton aide. Smile
Alamake

Alamake
*

Féminin
Messages : 36
Inscrit(e) le : 16/08/2011

http://vampiredeparis.forumgratuit.org/
Alamake a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment intégrer un codage comtemant du JS, HTML et Css

Message par Izumi375 Lun 22 Juil 2013 - 20:05

Déjà le Js ne risque pas de marcher puisque tu as mis 2fois la balise script: ^^

Code:
<script type="text/javascript">
        <!--
         
<script type="text/javascript">
Izumi375

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment intégrer un codage comtemant du JS, HTML et Css

Message par Alamake Lun 22 Juil 2013 - 20:13

Oups!! :$

ok j'ai viré tou ce qui est en rouge mais pas de changement pour le moment

(pi en bas aussi la balise pour fermer)
Alamake

Alamake
*

Féminin
Messages : 36
Inscrit(e) le : 16/08/2011

http://vampiredeparis.forumgratuit.org/
Alamake a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment intégrer un codage comtemant du JS, HTML et Css

Message par Izumi375 Mar 23 Juil 2013 - 5:14

Désolée pour l'attente Wink

Bon déjà pour utiliser jQuery il faudrait déjà la librairie jQuery. Donc on link:

Code:
<script src="http://code.jquery.com/jquery.js"></script>

Par ailleurs le souci ne vient pas de forumactif ou de comment implanter le JS puisque ton code Javascript de base ne marche pas.

J'ai pas compris ce que tu voulais faire avec tooltip mais j'ai corrigé le reste.

Ma première remarque tient plus de la forme:
Pas la peine de donner l'image à map et à overlay. Oui ca marche mais tu charges 2 fois la même chose, ce qui augmente le temps de chargement et ça c'est mal! (toujours optimiser son code si on peut, surtout qu'une image c'est long à charger ^^)

Ensuite (et c'est là d'où vient vraiment le problème) tu as fait des erreurs d’écriture, qui "annulent" ton Javascript.
Par exemple :

Code:
$('.map .overlay').css({
  backgroundPosition:left+"px 0px"
  })  
(mauvaise structure et mauvaise propriété)

s'écrit en réalité:

Code:
$('.map .overlay').css({
  "background-position":left+"px 0px"
  })

et pour finir j'ai rajouté un attribut (number) à ton tableau car avec :

Code:
var left=-index*214-214;

le 2eme arrondissement et le 1er arrondissement par exemple se retrouvent avec deux images différentes alors qu'on souhaite la même!
(on aurait pu faire ça avec un if "le nom de domaine est le même" mais il est plus long de comparer deux chaînes de caractères que deux nombres)

Donc voilà j'ai mis entre commentaires ce qui correspondait à tooltip car je n'ai pas compris ce que cela devait faire, mais sinon le code donne ceci:

Ah et il faudra donner un vrai lien à vide.png =)
Comme tu ne souhaites pas montrer ton code je l'ai mis en hide.


Voilà pig (testé sur notepad++ puis sur forumactif )
Izumi375

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment intégrer un codage comtemant du JS, HTML et Css

Message par Alamake Mar 23 Juil 2013 - 21:59

Bon... J'ai posté ton codage tel quel en changeant juste l'adresse de l'image vide, mais ça ne fonctionnais pas. Après bidouillage de plusieurs heures ça ne fonctionne qu'à moitié. C'est a dire que les liens sont bien là, mais l'image ne change pas au survole... Sad

Que vois tu toi lorsque tu test ?

Sinon les tooltip sont fait pour qu'au survole le nom du quartier apparaisse au dessus de la souris.
J'ai suivie le tutoriel ici : http://www.grafikart.fr/tutoriels/jquery/carte-interactive-177
Tout y est parfaitement expliqué. Smile

J'ai l'impression que je n'y arriverais jamais... -_-
Alamake

Alamake
*

Féminin
Messages : 36
Inscrit(e) le : 16/08/2011

http://vampiredeparis.forumgratuit.org/
Alamake a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment intégrer un codage comtemant du JS, HTML et Css

Message par Izumi375 Mar 23 Juil 2013 - 22:09

Bah le code que je t'ai donné copié collé donne ceci:

http://keikoku.forumpro.fr/h23-test-fa

Ça marche parfaitement pour moi.
Izumi375

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment intégrer un codage comtemant du JS, HTML et Css

Message par Alamake Mar 23 Juil 2013 - 22:47

Okééééééééééé -_-

Ca ne fonctionne pas sur Firefox, mais sur Chrome oui.
Dans les commentaire du tutoriel ils disent :
Sur le tutoriel a écrit:Une toute petite erreur s'est glissé sur le code il faut mettre usemap="#Map" au lieu de simplement Map.

C'est corrigé la démo MARCHE sur firefox maintenant.

En changeant sur ton code ça ne fonctionne pas mieux de mon coté... J'ai aussi testé sur IE et rien non plus je n'ai que l'image de fond avec la carte sans aucun lien ni changement au survole.
Peut être que l'image transparente se trouve au dessus et du coup ça ne fonctionne pas ?
Alamake

Alamake
*

Féminin
Messages : 36
Inscrit(e) le : 16/08/2011

http://vampiredeparis.forumgratuit.org/
Alamake a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment intégrer un codage comtemant du JS, HTML et Css

Message par Izumi375 Mar 23 Juil 2013 - 23:17

Panique pas =P
J'avais pas fait gaffe au navigateur, voilà comme ça ^^

Code:

<!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8" />
                <title>Carte interactive de Paris</title>
         
        <style type="text/css">
         
.map{
width:214px;
height:195px;
position:relative;
}
.map .overlay{
width:214px;
height:195px;
background:url(http://i33.servimg.com/u/f33/17/32/56/09/carte_10.png);
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 src="http://code.jquery.com/jquery.js"></script>
        <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', number: 1},
    {name:'La Cour',slug:'La Cour', number: 1},
    {name:'La Cour',slug:'La Cour', number: 1},
    {name:'La Cour',slug:'La Cour', number: 1},
    {name:'La Torche',slug:'La Torche', number: 2},
    {name:'La Torche',slug:'La Torche', number: 2},
    {name:'Le Havre',slug:'Le Harvre', number: 3},
    {name:'Le Hautes Terres',slug:'Les Hautes Terres', number: 4},
    {name:'Le Carrefour',slug:'Le Carrefour', number: 5},
    {name:'Le Carrefour',slug:'Le Carrefour', number: 5},
    {name:'Le Carrefour',slug:'Le Carrefour', number: 5},
    {name:'Les Tours',slug:'Les Tours', number: 6},
    {name:'Les Tours',slug:'Les Tours', number: 6},
    {name:'Le Havre',slug:'Le Harvre', number: 3},
    {name:'Le Havre',slug:'Le Harvre', number: 3},
    {name:'Le Hautes Terres',slug:'Les Hautes Terres', number: 4},
    {name:'Le Hautes Terres',slug:'Les Hautes Terres', number: 4},
    {name:'Non Camarilla',slug:'Non Camarilla', number: 7},
    {name:'Non Camarilla',slug:'Non Camarilla', number: 7},
    {name:'Les Tours',slug:'Les Tours', number: 6}
  ];
 
/*
  $(document).mousemouve(function(e){
    $('.map .tooltip').css({
      "top":e.pageY-$('.map .tooltip').height()-20+"px",
      "left":e.pageX-$('.map .tooltip').width()/2-10+"px"
    });
  }); */
  $('.map area').mouseover(function(){
  var index = $(this).index();
  var left=-domaines[index].number*214;
  $('.map .tooltip').html(domaines[index].name).stop().fadeTo(500,0.6);
  $('.map .overlay').css({
  "background-position":left+"px 0px"
  })
  });
 
 
  $('.map').mouseout(function(){
    $('.map .overlay').css({
  "background-position":"0px 0px"
  })
  $('.map .tooltip').stop().fadeTo(500,0);
  });
});
        </script>
         
        </head>
         
        <body><div class="map">
<img src="http://img32.imageshack.us/img32/3889/kdf.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>
          </div>
        </body>
        </html>
Izumi375

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment intégrer un codage comtemant du JS, HTML et Css

Message par Alamake Mer 24 Juil 2013 - 11:57

Peur Comment ça j'ai paniqué ?!? J'ai eu l'air de paniquer ?! shakng2 

lol!


En tout cas ! ::fete::  CA FONCTIONNE ! Reste plus qu'a trouver comment insérer cette jolie carte dans ma page d’accueil Mouais 


:thanks: :thanks: :thanks: :thanks: :thanks: :thanks: :thanks: 

Alamake

Alamake
*

Féminin
Messages : 36
Inscrit(e) le : 16/08/2011

http://vampiredeparis.forumgratuit.org/
Alamake a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment intégrer un codage comtemant du JS, HTML et Css

Message par Izumi375 Mer 24 Juil 2013 - 13:04

xD
Bon bah d'abord tu héberges ta page dans "gestion des pages html"

et du mets dans la page d'accueil:

Code:
<iframe src="URL DE LA PAGE" frameborder="no" scrolling="no" width="250px" height="200px"></iframe>

Et voilà. En tout cas ça m'a bien amusée de bosser sur ton code, surtout qu'avant je connaissais presque rien sur le JS et jQuery. Du coup j'ai appris plein de choses! Mr. Green 
Izumi375

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum