Passer d'une carte intéractive html à une carte intéractive sur forumactif

3 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 Passer d'une carte intéractive html à une carte intéractive sur forumactif

Message par Sgnaru Dim 01 Sep 2013, 23:03

Bonjour à tous, comme annoncé dans le titre je travaille actuellement sur une carte interactive. Mon niveau est débutant et je n'ai réussi à la faire qu'en suivant des tutoriels. Malheureusement, après avoir fini cette carte, je n'ai aucune idée de la manière dont il faut l'installer sur le forum.

La carte est composée d'un code html, d'un css et de deux images. Voici donc mes codes :

partie html

Code:
<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Products</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
        jQuery(function($){
           $('.map').append('<div class="overlay">').append('<div class="tooltip">Ryoma</div>')
           $('.map .tooltip').hide();          
          var regions = [
            {name:'Pays du Feu', slug:'pays-du-feu'},
            {name:'Pays de la Foudre', slug:'pays-de-la-foudre'},
            {name:'Pays de l Eau', slug:'pays-de-l-eau'}
           ];
          
          //Tooltip qui suit la souris
           $(document).mousemove(function(e){
            $('.map .tooltip').css({
                top:e.pageY-$('.map .tooltip').height()-20,
                left:e.pageX-$('.map .tooltip').width()/2-10
            });
           });
          
          //On passe sur une région
           $('.map area').mouseover(function(){
            var index = $(this).index();a
            var left = -index*705-705;
            $('.map .tooltip').html(regions[index].name).stop().fadeTo(500,1);
            $('.map .overlay').css({
                backgroundPosition:left+"px 0px"
            });
            });
          
          // On sort de la map
           $('.map').mouseout(function(){
            $('.map .overlay').css({
                backgroundPosition : "705px 0px"
            });
            $('.map .tooltip').stop().fadeTo(500,0);
           });
        });
        </script>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div class="map">
        <img src="http://img15.hostingpics.net/pics/657009void.png" width="705" height="460" usemap="#Map"/>
        <map name="Map">
        <area shape="poly" coords="303,359,306,356,306,351,306,348,304,346,305,344,305,339,305,336,306,334,307,332,306,328,305,323,303,321,299,316,295,312,294,310,291,307,289,305,286,303,287,301,283,297,281,299,279,297,278,295,276,293,272,291,269,291,267,291,266,289,265,285,265,284,264,282,263,281,262,276,262,273,265,270,265,266,267,264,265,260,264,256,260,251,260,246,260,243,261,241,260,240,258,234,258,230,260,228,267,221,268,218,270,218,277,219,276,215,280,215,281,221,285,220,289,219,292,224,296,221,298,221,301,222,306,219,309,220,312,220,316,219,316,216,319,216,321,217,326,218,331,220,333,222,338,222,343,221,345,221,348,218,352,218,355,222,358,223,360,224,364,222,367,223,368,225,373,222,379,226,380,230,380,238,386,239,386,237,393,240,397,239,399,243,405,248,416,262,414,271,417,279,422,279,424,281,424,296,419,300,418,309,415,315,415,323,411,327,416,332,416,333,426,334,428,332,428,340,426,343,425,346,429,353,429,358,430,361,426,366,425,369,421,370,420,375,418,380,417,386,414,390,409,390,404,396,404,402,398,404,393,403,393,400,393,398,392,398,388,397,387,395,386,394,386,393,385,392,383,393,381,393,379,391,377,389,376,380,376,379,380,378,382,375,382,370,388,364,394,364,395,362,400,361,402,360,402,355,407,351,405,347,403,346,402,348,400,348,399,346,399,343,396,343,393,339,388,339,386,341,375,341,375,343,373,344,370,344,369,342,366,342,367,345,364,347,359,343,354,342,352,340,349,342,346,343,343,343,339,341,332,341,331,346,330,348,325,351,321,355,320,359,316,363,315,366,312,368,307,368,306,366,303,363,303,362" href="#" />
        <area shape="poly" coords="408,179,413,176,414,172,417,168,420,169,426,166,429,163,431,157,436,156,439,152,442,152,443,147,447,149,449,147,449,143,452,140,454,138,452,135,452,132,452,127,453,123,455,121,456,119,459,119,460,118,464,116,464,114,465,110,462,107,462,105,462,102,464,101,465,100,466,97,464,95,465,93,468,90,472,85,473,83,474,85,475,83,476,74,479,71,479,59,480,56,481,55,484,54,495,52,500,53,510,54,518,55,523,53,532,52,548,50,559,50,567,50,572,51,573,56,572,60,572,68,570,72,564,82,563,81,558,88,556,94,552,100,550,104,549,108,548,110,548,116,548,119,551,123,552,126,553,132,555,135,557,137,558,139,557,142,558,145,557,150,556,152,556,155,555,156,549,163,549,168,548,171,547,174,546,178,544,179,544,182,545,184,543,186,540,188,539,187,537,186,535,186,534,188,532,186,529,187,529,189,529,190,527,189,525,185,526,183,525,181,525,179,523,178,519,178,517,181,515,184,514,186,512,188,509,190,506,189,505,190,503,190,501,189,501,187,499,187,498,189,497,190,494,191,486,191,480,193,479,197,480,200,478,201,476,202,474,203,472,202,469,202,468,205,467,206,465,207,462,206,460,206,459,206,458,204,458,201,456,200,453,200,449,200,447,200,445,202,444,203,442,203,440,204,438,201,434,201,433,201,428,199,424,200,423,202,422,202,420,202,419,203,418,204,417,199,417,195,414,193,411,193,410,190,410,187,409,184,408,181"  href="#" />
        <area shape="poly" coords="516,264,543,271,557,278,567,278,575,284,583,292,584,300,584,305,582,309,579,319,575,327,568,331,557,333,551,333,549,328,545,325,534,320,525,317,517,322,502,320,499,314,504,299,505,289"  href="#" />
        </map>
        </div>
    </body>
</html>
Partie css

Code:
.map{
    width: 705px;
    height: 460px;
    background:url(http://img15.hostingpics.net/pics/212388map.png) left top no-repeat;
    position:relative;
}
.map .overlay{
    width: 705px;
    height: 460px;
    background:url(http://img15.hostingpics.net/pics/212388map.png) 705px 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;
    color:#cccccc;
    padding:0 10px;
    z-index:3;
    text-align:center;
}
Je reprécise que la carte fonctionne sur mon pc mais que mon problème est la manière de l'installer sur forumactif. Le css a l'air d'être pris en compte quand je l'installe dans le css du forum. Malheureusement si je colle la partie html dans PA>Affichage>Généralité afin de la faire apparaître en page d'accueil, seule la carte s'affiche. je garde l’interactivité des liens mais le changement de couleur et l'apparition des titres ne fonctionnent plus.

J'ai bien entendu vérifier si un sujet similaire existé mais il semble que le fonctionnement de la carte soit différent, enfin je crois.

Merci de votre aide.


Dernière édition par Sgnaru le Mar 03 Sep 2013, 18:10, édité 1 fois
avatar

Sgnaru
*

Messages : 39
Inscrit(e) le : 25/04/2013

http://ryoma-naruto.forumactif.com/
Sgnaru a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Passer d'une carte intéractive html à une carte intéractive sur forumactif

Message par Sgnaru Lun 02 Sep 2013, 16:36

En continuant de chercher, je peux précser un peu plus mon problème. A l'heure actuelle, j'obtiens une carte cliquable correcte. les fonctions map et area fonctionnent donc tout simplement en collant le code html dans la partie page d'accueil.

C'est bien la partie suivante qui pose problème.

Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
        jQuery(function($){
          $('.map').append('<div class="overlay">').append('<div class="tooltip">Ryoma</div>')
          $('.map .tooltip').hide();        
         var regions = [
            {name:'Pays du Feu', slug:'pays-du-feu'},
            {name:'Pays de la Foudre', slug:'pays-de-la-foudre'},
            {name:'Pays de l Eau', slug:'pays-de-l-eau'}
          ];
        
         //Tooltip qui suit la souris
          $(document).mousemove(function(e){
            $('.map .tooltip').css({
                top:e.pageY-$('.map .tooltip').height()-20,
                left:e.pageX-$('.map .tooltip').width()/2-10
            });
          });
        
         //On passe sur une région
          $('.map area').mouseover(function(){
            var index = $(this).index();a
            var left = -index*705-705;
            $('.map .tooltip').html(regions[index].name).stop().fadeTo(500,1);
            $('.map .overlay').css({
                backgroundPosition:left+"px 0px"
            });
            });
        
         // On sort de la map
          $('.map').mouseout(function(){
            $('.map .overlay').css({
                backgroundPosition : "705px 0px"
            });
            $('.map .tooltip').stop().fadeTo(500,0);
          });
        });
        </script>
Je précise du moins que j'ai bien fait attention à remplacer le $ par jQuery. Cette partie devrait normalement me permettre d'avoir l'effet changement de couleur en passant sur les area et la fonction tooltip permettrait d'afficher le nom de la région. Mais rien ne se passe.

J'ai tenté d'ajouter le script avec le module de forumactif dans une page javascript.

Code:
jQuery(function(jQuery){
           jQuery('.map').append('<div class="overlay">').append('<div class="tooltip">Ryoma</div>')
           jQuery('.map .tooltip').hide();          
          var regions = [
            {name:'Pays du Feu', slug:'pays-du-feu'},
            {name:'Pays de la Foudre', slug:'pays-de-la-foudre'},
            {name:'Pays de l Eau', slug:'pays-de-l-eau'}
           ];
          
          //Tooltip qui suit la souris
           jQuery(document).mousemove(function(e){
            jQuery('.map .tooltip').css({
                top:e.pageY-jQuery('.map .tooltip').height()-20,
                left:e.pageX-jQuery('.map .tooltip').width()/2-10
            });
           });
          
          //On passe sur une région
           jQuery('.map area').mouseover(function(){
            var index = jQuery(this).index();a
            var left = -index*705-705;
            jQuery('.map .tooltip').html(regions[index].name).stop().fadeTo(500,1);
            jQuery('.map .overlay').css({
                backgroundPosition:left+"px 0px"
            });
            });
          
          // On sort de la map
           jQuery('.map').mouseout(function(){
            jQuery('.map .overlay').css({
                backgroundPosition : "705px 0px"
            });
            jQuery('.map .tooltip').stop().fadeTo(500,0);
           });
        });
J'ai bien fait attention à cocher "Index". Mais ceci n'a pour seul résultat de faire disparaître ma chat box latérale, pas vraiment l'effet voulu donc. Je commence à être en panne d'idée je l'avoue.

EDIT : voici un lien qui permet de voir la carte que je souhaite afficher dans ma PA http://testryoma.forumactif.org/h4-carte
avatar

Sgnaru
*

Messages : 39
Inscrit(e) le : 25/04/2013

http://ryoma-naruto.forumactif.com/
Sgnaru a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Passer d'une carte intéractive html à une carte intéractive sur forumactif

Message par Scoubifitz Mar 03 Sep 2013, 02:50

bonsoir,

pourquoi ne pas simplement laisser cette carte dans la page html , et mettre une iframe dans la page d'accueil ?

Code:
<center><iframe name="world" src="http://testryoma.forumactif.org/h4-carte" frameborder="no" height="460" scrolling="no" width="705"></iframe></center>
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3732
Inscrit(e) le : 18/03/2008

https://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Passer d'une carte intéractive html à une carte intéractive sur forumactif

Message par Adam_sfp Mar 03 Sep 2013, 06:48

Bonjour

En mettant les 3 éléments séparément
html en page d'accueil
CSS dans le CSS
Javascrit->gestion des java

Il faut faire attention au javascript.
Parfois les annotations comme     //Tooltip qui suit la souris  ou autres peuvent entrainer une " cassure" dans le code et celui ci ne fonctionne pas.
En le compilant cela devrait fonctionner
Code:
jQuery(function($) { $(".map").append('<div class="overlay">').append('<div class="tooltip">Ryoma</div>'); $(".map .tooltip").hide(); var regions = [{name:"Pays du Feu", slug:"pays-du-feu"}, {name:"Pays de la Foudre", slug:"pays-de-la-foudre"}, {name:"Pays de l Eau", slug:"pays-de-l-eau"}]; $(document).mousemove(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 * 705 - 705; $(".map .tooltip").html(regions[index].name).stop().fadeTo(500, 1); $(".map .overlay").css({backgroundPosition:left + "px 0px"}) }); $(".map").mouseout(function() { $(".map .overlay").css({backgroundPosition:"705px 0px"}); $(".map .tooltip").stop().fadeTo(500, 0) }) });
cdt.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Passer d'une carte intéractive html à une carte intéractive sur forumactif

Message par Sgnaru Mar 03 Sep 2013, 12:48

Merci pour ton aide ^^ Voici donc comment j'ai procédé.

J'ai crée une nouvelle page javascript, en cochant index et en collant ce que tu m'as gentilment donné.

J'ai ensuite copié le css dans le css du forum. J'ai enfin copié le contenu suivant dans la partie page d'accueil.

Code:
<head>
        <title>Products</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div class="map">
        <img src="http://img15.hostingpics.net/pics/657009void.png" width="705" height="460" usemap="#Map"/>
        <map name="Map">
        <area shape="poly" coords="303,359,306,356,306,351,306,348,304,346,305,344,305,339,305,336,306,334,307,332,306,328,305,323,303,321,299,316,295,312,294,310,291,307,289,305,286,303,287,301,283,297,281,299,279,297,278,295,276,293,272,291,269,291,267,291,266,289,265,285,265,284,264,282,263,281,262,276,262,273,265,270,265,266,267,264,265,260,264,256,260,251,260,246,260,243,261,241,260,240,258,234,258,230,260,228,267,221,268,218,270,218,277,219,276,215,280,215,281,221,285,220,289,219,292,224,296,221,298,221,301,222,306,219,309,220,312,220,316,219,316,216,319,216,321,217,326,218,331,220,333,222,338,222,343,221,345,221,348,218,352,218,355,222,358,223,360,224,364,222,367,223,368,225,373,222,379,226,380,230,380,238,386,239,386,237,393,240,397,239,399,243,405,248,416,262,414,271,417,279,422,279,424,281,424,296,419,300,418,309,415,315,415,323,411,327,416,332,416,333,426,334,428,332,428,340,426,343,425,346,429,353,429,358,430,361,426,366,425,369,421,370,420,375,418,380,417,386,414,390,409,390,404,396,404,402,398,404,393,403,393,400,393,398,392,398,388,397,387,395,386,394,386,393,385,392,383,393,381,393,379,391,377,389,376,380,376,379,380,378,382,375,382,370,388,364,394,364,395,362,400,361,402,360,402,355,407,351,405,347,403,346,402,348,400,348,399,346,399,343,396,343,393,339,388,339,386,341,375,341,375,343,373,344,370,344,369,342,366,342,367,345,364,347,359,343,354,342,352,340,349,342,346,343,343,343,339,341,332,341,331,346,330,348,325,351,321,355,320,359,316,363,315,366,312,368,307,368,306,366,303,363,303,362" href="#" />
        <area shape="poly" coords="408,179,413,176,414,172,417,168,420,169,426,166,429,163,431,157,436,156,439,152,442,152,443,147,447,149,449,147,449,143,452,140,454,138,452,135,452,132,452,127,453,123,455,121,456,119,459,119,460,118,464,116,464,114,465,110,462,107,462,105,462,102,464,101,465,100,466,97,464,95,465,93,468,90,472,85,473,83,474,85,475,83,476,74,479,71,479,59,480,56,481,55,484,54,495,52,500,53,510,54,518,55,523,53,532,52,548,50,559,50,567,50,572,51,573,56,572,60,572,68,570,72,564,82,563,81,558,88,556,94,552,100,550,104,549,108,548,110,548,116,548,119,551,123,552,126,553,132,555,135,557,137,558,139,557,142,558,145,557,150,556,152,556,155,555,156,549,163,549,168,548,171,547,174,546,178,544,179,544,182,545,184,543,186,540,188,539,187,537,186,535,186,534,188,532,186,529,187,529,189,529,190,527,189,525,185,526,183,525,181,525,179,523,178,519,178,517,181,515,184,514,186,512,188,509,190,506,189,505,190,503,190,501,189,501,187,499,187,498,189,497,190,494,191,486,191,480,193,479,197,480,200,478,201,476,202,474,203,472,202,469,202,468,205,467,206,465,207,462,206,460,206,459,206,458,204,458,201,456,200,453,200,449,200,447,200,445,202,444,203,442,203,440,204,438,201,434,201,433,201,428,199,424,200,423,202,422,202,420,202,419,203,418,204,417,199,417,195,414,193,411,193,410,190,410,187,409,184,408,181"  href="#" />
        <area shape="poly" coords="516,264,543,271,557,278,567,278,575,284,583,292,584,300,584,305,582,309,579,319,575,327,568,331,557,333,551,333,549,328,545,325,534,320,525,317,517,322,502,320,499,314,504,299,505,289"  href="#" />
        </map>
        </div>
    </body>
</html>
Malheureusement le résultat est toujours le même, à savoir que la carte s'affiche, les areas fonctionnent mais pas l'animation.
avatar

Sgnaru
*

Messages : 39
Inscrit(e) le : 25/04/2013

http://ryoma-naruto.forumactif.com/
Sgnaru a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Passer d'une carte intéractive html à une carte intéractive sur forumactif

Message par Adam_sfp Mar 03 Sep 2013, 14:06

Bonjour

Si vous avez d'autres scripts essayez en les désactivant temporairement..
Peut être un conflit sinon suivez le conseil de Scoubifitz.

Cdt.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Passer d'une carte intéractive html à une carte intéractive sur forumactif

Message par Sgnaru Mar 03 Sep 2013, 18:09

Je n'avais pas vu le message de Scoubifitz. L'iframe fonctionne à merveille, je ne connaissais pas cette fonction. Je vous remercie beaucoup tous les deux !
avatar

Sgnaru
*

Messages : 39
Inscrit(e) le : 25/04/2013

http://ryoma-naruto.forumactif.com/
Sgnaru 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