Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.
Avez-vous perdu votre courriel d'activation?
Identifiez-vous Inscrivez-vous Accueil du forum Aide sur le forum

Lancement de pagexl.com pour la création gratuite et facile de sites "one page" (page unique)

IMPORTANT: Avant de poster un message sur le forum n'oubliez pas :
1. d'effectuer une recherche sur le forum ainsi que dans l'aide en ligne TOWeb
2. de consulter les tutoriels vidéo sur YouTube et les dernières informations du blog de TOWeb
3. de consulter les tutoriels de Frangin62
Forum TOWeb|-TOWeb| |-Discussions générales sur TOWeb| | |-Image cliquable responsive « sujet précédent | | sujet suivant »
Pages: [1] Bas de page Imprimer
Auteur Fil de discussion: Image cliquable responsive  (Lu 587 fois)
Boarding-Pass
Newbie
*

Nombre de "j'aime" : 0
Messages: 14



WWW
« le: 30 Juin 2019 à 14h30 »

Bonjour,
J'ai mis en place une image cliquable mais malheureusement je n'arrive pas à rendre l'ensemble responsive.
En effet, les coordonnées de mes zones cliquables sont fixes et malgré le site https://www.leshirondellesdunet.com/lien-sur-image qui explique la marche à suivre, je n'y arrive toujours pas…. Je bute au point III du site.
Quelqu'un pourrait-il me donner un coup de main svp?

Mon code est le suivant :
 <head>
 <style type="text/css">
   img[usemap] {
       height: auto;
       max-width: 100%;
       width: auto;
   }
  </style>
 </head>

 <body>
  <div>
   <img src="_fields/carte.png" width="1376" height="747" alt="Carte de voyage" usemap="#map" />
   <map name="map">
   <!-- #$-:Image map file created by GIMP Image Map plug-in -->
   <!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
   <!-- #$-:Please do not edit lines starting with "#$" -->
   <!-- #$VERSION:2.3 -->
   <!-- #$AUTHOR:PC -->
   <area shape="circle" coords="105,266,12" title="Etats-Unis - Parcs de l'Ouest" alt="Etats-Unis - Parcs de l&apos;Ouest" href="http://boarding-pass.fr/etats-unis-parcs-de-l-ouest.html" />
   <area shape="circle" coords="271,317,11" title="Etats-Unis - Floride" alt="Etats-Unis - Floride" href="http://boarding-pass.fr/etats-unis-floride.html" />
   <area shape="circle" coords="312,185,12" title="Canada - Est" alt="Canada - Est" href="http://boarding-pass.fr/canada.html" />
   <area shape="circle" coords="490,114,12" title="Islande" alt="Islande" href="http://boarding-pass.fr/islande.html" />
   <area shape="circle" coords="610,283,11" title="Sicile" alt="Sicile" href="http://boarding-pass.fr/sicile.html" />
   <area shape="circle" coords="649,273,11" title="Crête" alt="Crête" href="http://boarding-pass.fr/crete.html" />
   <area shape="circle" coords="679,262,12" title="Turquie" alt="Turquie" href="http://boarding-pass.fr/turquie.html" />
   <area shape="circle" coords="671,306,11" title="Egypte" alt="Egypte" href="http://boarding-pass.fr/egypte.html" />
   <area shape="circle" coords="661,571,12" title="Afrique du Sud - Swaziland" alt="Afrique du Sud - Swaziland" href="http://boarding-pass.fr/afriquedusud.html" />
   <area shape="circle" coords="774,511,11" title="La Réunion" alt="La Réunion" href="http://boarding-pass.fr/reunion.html" />
   <area shape="circle" coords="1160,501,12" title="Indonésie - Java, Bali, Gili et Lombok" alt="Indonésie - Java, Bali, Gili et Lombok" href="http://boarding-pass.fr/indonesie-java-bali-gili-lombok.html" />
   <area shape="circle" coords="1356,635,13" title="Nouvelle-Zélande" alt="Nouvelle-Zélande" href="http://boarding-pass.fr/nouvelle-zelande.html" />
   <area shape="circle" coords="1150,294,12" title="Japon" alt="Japon" href="http://boarding-pass.fr/japon.html" />
</map>
  </div>
 

  <script src="_fields/jquery.rwdImageMaps.js"></script>
  <script>
        $(document).ready(function(e) {
       $('img[usemap]').rwdImageMaps();
        });
  </script>
 </body>
Journalisée
frangin62
Hero Member
*****

Nombre de "j'aime" : 114
Messages: 2273



WWW
« Répondre #1 le: 30 Juin 2019 à 15h20 »

Bonjour,

Il y a déjà des discussion avec en lien les hirondelles du net. Le soucis qui fait que cela ne fonctionne pas se situe au paragraphe   III / 4  . Dans TOWeb on ne sait pas positionner des scripts juste avant </body>, et le" rwdImageMaps " doit absolument s'y trouver. J'avais fait plusieurs essais tous infructueux dans TW, La seule façon que j'avais réussi à sortir quelque chose est d'aller l'écrire sur la page en ligne avec Fillezilla. Mais à chaque modif tu y as droit.
L'idéal est de créer une page hors TOWeb contenant ton script puis de l'appeler par un lien.

Cdlt
frangin62
Journalisée

Pages: [1] Haut de page Imprimer 
« sujet précédent | | sujet suivant »
Aller à:  


Cliquez ici pour vous abonner au flux RSS du forum  -  
Powered by SMF 1.1.18 | SMF © 2006-2009, Simple Machines