18041 sujets

Questions générales et questions de débutants

Responsive web design pour une map image

Bonsoir à tous,

Je me tourne vers votre forum pour tenter de résoudre un problème de responsive design sur une image avec différentes coordonnées. Je suis débutant et je je m'initie en autodidacte à la pratique du html et du css. J'ai créé un site avec Jimdo et jusqu'ici cette formule me convient car je ne suis pas un professionnel et je peux donc apprendre pas à pas.

Je lis depuis 2 jours déjà des sujets sur la façon de rendre une "map image" en un design fluide et responsive et j'ai lu certains de vos sujets qui me ramènent à mettre en place un plugin jQuery et celui de Matt Stow qui est hébergé sur Github.

J'ai donc repris vos explications, j'ai appliqué un style pour que mon image devienne fluide au changement de taille et cela fonctionne très bien, le style est le suivant que j'ai mis dans le head :

img[usemap] {
   height: auto;
   max-width: 100%;
   width: auto;
}


Jusqu'ici je comprend bien ce que représente mon style, mais comme je suis débutant je ne sais pas si j'ai bien incorporé mon plugin jQuery. Comme je ne peux que modifier mon head et mon html sur Jimdo, peut être ai-je commis une erreur. Bref voici comment j'ai procédé pour implanter le plugin, tout d'abord j'ai modifié le head en rajoutant un lien vers la bibliothèque jQuery et celle de "rwdImageMaps" :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript">
</script>

<script src="js/jquery.rwdImageMaps.min.js" type="text/javascript">
</script>

<script type="text/javascript">
//<![CDATA[

              $(document).ready(function(e) {
                    $('img[usemap]').rwdImageMaps();
              });

//]]>
</script>


Puis j'ai ajouté mon code html qui correspont à ma "map image" comme ceci :

<img usemap="#Sidebar_Map" src="https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i495ffe1f160cf6bd/version/1487694585/image.jpg" width="1040" height="500"
align="center" alt="Image" name="Sidebar_Map" id="Sidebar_Map" /> <map name="Sidebar_Map" id="Sidebar_Map">
    <area shape="poly" coords="343,63, 374,35, 532,41, 532,86, 374,93" title="Articles Amis" href="https://selamat-blog-voyage.jimdo.com/articles-d-amis/" onmouseover=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/ie013a9b150925952/version/1487695282/image.jpg'" onmouseout=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i495ffe1f160cf6bd/version/1487694585/image.jpg'" />
    <area shape="poly" coords="625,130, 595,108, 509,108, 509,153, 595,153" title="Liens" href="https://selamat-blog-voyage.jimdo.com/liens/" onmouseover=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i0aa9ef0960d5b2f9/version/1487695564/image.jpg'" onmouseout=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i495ffe1f160cf6bd/version/1487694585/image.jpg'" />
    <area shape="poly" coords="351,192, 382,163, 532,169, 532,214, 382,221" title="Partenaires" href="https://selamat-blog-voyage.jimdo.com/partenaires/" onmouseover=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i18011c96bd2c8ab6/version/1487695805/image.jpg'" onmouseout=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i495ffe1f160cf6bd/version/1487694585/image.jpg'" />
    <area shape="rect" coords="64,421,106,460" title="Google+" href="https://plus.google.com/share?url=https%3A%2F%2Fselamat-blog-voyage.jimdo.com%2F" onmouseover=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i9e877135ec3ae614/version/1487698249/image.jpg'" onmouseout=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i495ffe1f160cf6bd/version/1487694585/image.jpg'" />
    <area shape="rect" coords="162,421,205,460" title="Twitter" href="http://twitter.com/share?text=Accueil&amp;url=https%3A%2F%2Fselamat-blog-voyage.jimdo.com%2F" onmouseover=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i7aa0cf0411c7c13e/version/1487698806/image.jpg'" onmouseout=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i495ffe1f160cf6bd/version/1487694585/image.jpg'" />
    <area shape="rect" coords="259,420,286,461" title="Facebook" href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fselamat-blog-voyage.jimdo.com%2F&amp;t=Accueil" onmouseover=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i336ceec93e29fbee/version/1487699273/image.jpg'" onmouseout=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i495ffe1f160cf6bd/version/1487694585/image.jpg'" />
    <area shape="rect" coords="334,411,383,471" title="Youtube" href="https://www.youtube.com/channel/UCfpR1eGml2Xxbjk6PVePMtw" onmouseover=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/idb8a886ad770eff1/version/1487699599/image.jpg'" onmouseout=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i495ffe1f160cf6bd/version/1487694585/image.jpg'" />
    <area shape="rect" coords="434,419,469,463" title="Pinterest" href="https://fr.pinterest.com/selamatjalan/" onmouseover=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i0be0c1c46a85d0b0/version/1487699955/image.jpg'" onmouseout=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i495ffe1f160cf6bd/version/1487694585/image.jpg'" />
    <area shape="rect" coords="571,427,624,463" title="Contact" href="mailto:contact@selamat-jalan.com" onmouseover=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/if58d300fa34f0b9d/version/1487700192/image.jpg'" onmouseout=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i495ffe1f160cf6bd/version/1487694585/image.jpg'" />
    <area shape="rect" coords="676,410,737,471" title="Carnet de Voyage" href="https://selamat-blog-voyage.jimdo.com/carnet-de-voyage/" onmouseover=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/iabe383c1868a4168/version/1487700618/image.jpg'" onmouseout=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i495ffe1f160cf6bd/version/1487694585/image.jpg'" />
    <area shape="rect" coords="795,410,849,473" title="Articles de Voyage" href="https://selamat-blog-voyage.jimdo.com/mes-articles/" onmouseover=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/id1bed6ee1e5e9b5e/version/1487701052/image.jpg'" onmouseout=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i495ffe1f160cf6bd/version/1487694585/image.jpg'" />
    <area shape="rect" coords="907,413,965,470" title="Conseils de Voyage" href="https://selamat-blog-voyage.jimdo.com/conseils/" onmouseover=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/ic295ae144461319c/version/1487701326/image.jpg'" onmouseout=
    "Sidebar_Map.src='https://image.jimcdn.com/app/cms/image/transf/none/path/s02767eebeb15a5f8/image/i495ffe1f160cf6bd/version/1487694585/image.jpg'" />
    <area shape="rect" coords="901,32,1023,172" title="A Propos" href="https://selamat-blog-voyage.jimdo.com/a-propos/" />
</map>


C'est donc à partir d'ici que je rencontre mon problème, quand je change la taille de mon site mon image devient fluide, elle se réduit ou s'agrandit mais les coordonnées cliquables ne sont plus respectées, elles sont comme décalées. J'ai l'impression que si mon image diminue et bien mes coordonnées se déplacent dans mon image.

Je vous laisse le lien de la page en question, mon image est en bas de page dans le sidebar : https://selamat-blog-voyage.jimdo.com/articles-d-amis/

Je vous remercie par avance d'une éventuelle aide explicative que vous pourriez m'apporter pour trouver la bonne méthode pour résoudre mon problème.

Bonne soirée.
Salut Cedric17,

As-tu vu qu'il y a une erreur 404 sur la ligne suivante

<script src="js/jquery.rwdImageMaps.min.js" type="text/javascript">

Cordialement
Bonjour GJboba,

Je n'ai pas vu cette erreur 404 qui si j'en comprends la signification veut dire que la page ou le lien demandée n'existe pas.

Pourriez-vous m'expliquer comment vous avez vu cette erreur ou avec quel outils vous avez pu voir cette erreur, merci.

Donc si je comprends bien, mon plugin ne se charge pas ?

Ai-je fais une erreur en recopiant mon code dans mon "head" ou ai-je oublié de rajouter des lignes de codes dans mon html ?

Après je me suis servis d'une réponse sur le forum qui est celle de 6l20 un modérateur sur le sujet suivant : https://forum.alsacreations.com/topic-1-71829-1-RESOLU-Map-image-et-responsive-web-design.html

Puis je suis allé sur GitHub récupérer le plugin : https://github.com/stowball/jQuery-rwdImageMaps

De là j'ai modifié mon "Head" en insérant les codes que j'ai décris plus haut dans mon post.

Étant débutant j'ai surement commis une erreur ou oublié quelque chose Smiley hum ...

Auriez-vous l'amabilité de pouvoir éclairer un peu plus ma lanterne en me proposant une solution pour ce qui est de cette erreur 404 s'il vous plait ?

Et je tiens à vous remercier de votre remarque et votre intervention GJboba.

Cordialement.
Modifié par cedric17 (21 Mar 2017 - 14:55)
Avec Chrome tu fais Inspecter dans le menu contextuel, mais tous les navigateurs ont leurs outils.
Dans la fenêtre ouverte tu choisis Console et tu verras les anomalies qu'il a détecté au chargement de ta page...

Si tu fait raffraîchir (F5) il t'affichera aussi l'anomalie dans l'onglet Network qui permet de suivre les flux

Et en effet l'erreur 404 signifie qu'il ne trouve pas ton fichier!

Tu as mis à chemin local, c'est sans doute pas le bon chemin!
Si ta page courante n'est pas sur la racine de ton site il faut peut-être que tu rajoutes des redirections du style "../" devant ton chemin en fonction de l'emplacement de ta page à l'écran...

A plus
Merci pour ton éclaircissement et tes réponses à mes questions GJboba. Effectivement je viens de me rendre compte que le chemin n'était pas le bon car celui indiqué et celui qui devrait être hébergé sur un site ou mon site mais je n'héberge pas et ne peux pas héberger ce fameux plugin sur mon site Jimdo.

Jusqu'ici je comprends bien le problème et encore une fois merci de ton aide. Smiley confused

En sachant que celui qui propose ce plugin est ici : https://github.com/stowball/jQuery-rwdImageMaps

Est-il possible de trouver par exemple le plugin "prêt à l'emploi" sur une page dédiée ou un serveur et avec un lien qui chargerait ce plugin sur mon site sans que j'ai besoin de l'installer ?

Et qu'ici : <script src="js/jquery.rwdImageMaps.min.js" type="text/javascript">
je puisse remplacer mon <script src= par une adresse d'hébergement de ce plugin par exemple.

Ce qui résoudrait le problème de l'erreur 404.

J'ai lu sur cette même page que je pouvais télécharger le plugin mais comme je l'ai dis plus haut cela mais impossible de le mettre dans la structure de mon site jimdo. Je n'ai accès qu'au "head" en fait.

Bref je vais chercher de nouveau sur le web si il n'existe pas un hébergeur avec ce plugin et surtout un bon lien sans que je puisse l'installer sur mon site car sur le site Git je ne trouve pas de lien direct hébergeant ce plugin. Smiley eyecrazy

Merci pour ton aide.
Me revoilà pour Up ce sujet, j'ai trouvé un serveur qui héberge ce fameux plugin et ça marche super bien !!! Smiley murf

Je laisse la réponse ci-dessous, cela servira surement à d'autres personnes :

Le Css pour le Responsive Design :

img[usemap] {
   height: auto;
   max-width: 100%;
   width: auto;
}



Le Javascript et Jquery :


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript">
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="text/javascript">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.js" type="text/javascript">
</script>

<script type="text/javascript">
//<![CDATA[

              $(document).ready(function(e) {
                    $('img[usemap]').rwdImageMaps();
              });

//]]>
</script>


Voilà, merci encore à toi GJboba pour tes précieux conseils et ton aide.

A bientôt Smiley biggrin
Modifié par cedric17 (21 Mar 2017 - 20:23)
Sujet clos
Aller à