Forum

Créations de Thèmes [Réglé] Image pc/mobile

ZatchBell68 Membre non connecté

Booster Bazooka

Rang

Avatar

Inscrit le : 21/06/2009 à 18h32

Messages: 107

Le 18/02/2020 à 18h42
Bonjour,

Voilà j'ai une image avec une partie ou trois boutons sont cliquable.
J'ai un code html ajouté dans l'edito de HomeLanding.

Code HTML :
<body>
        <div>
<img alt="Tarifs.png" usemap="#Tarifs" src="/upload/tarifs.png">
<map id="Tarifs" name="Tarifs">
    <area alt="" href="pages/diag-reparation" shape="rect" coords="45,360,216,400">
    <area alt="" href="pages/intervention" shape="rect" coords="294,355,467,405">
    <area alt="" href="pages/forfait-annuel" shape="rect" coords="543,360,715,400">
</map>
        </div>
    </body>


Sur la version pc cela fonctionne correctement, mes boutons fonctionnent, mais en version mobile pas du tout et en plus cela modifie totalement le design de mon site, vous verrez le problème en image.

Je pense que le code n'est absolument pas adapté, mais je n'ai rien trouvé d'autre.
J’espère que vous pourrez m'apporter une solution.

bug_mobile


Bon j'ai cherché beaucoup et j'aurais dû le faire bien avant de poster le message ici, mais c'est vrai qu'avec mes connaissances j'ai un peu de mal, mais si jamais je donne ma réponse ici.
Juste penser à télécharger le plugin jquery imageMapResizer.min.js

Code HTML :
[html]<img src="upload/tarifs.png" id="map-image" style="width: 759px; max-width: 100%; height: auto;" alt="" usemap="#Sos-Info68" />
<map name="Sos-Info68">
    <area shape="rect" coords="544, 361, 715, 400" href="pages/forfait-annuel" alt="Details" title="Page de nos contrats" />
    <area shape="rect" coords="296, 354, 466, 405" href="pages/Intervention" alt="Details" title="Pages de l'ensemble des prestations" />
    <area shape="rect" coords="46, 361, 215, 400" href="pages/diag-reparation" alt="Détails" title="Page Diagnostique et Réparation" />
</map>
<script src="/kernel/lib/js/jquery/imageMapResizer.min.js"></script>
<script>$(document).ready(function(e){$("map").imageMapResize();});</script>[/html]


Merci Edité par ZatchBell68 Le 19/02/2020 à 12h38
Site web    
babsolune Membre non connecté

Modérateur

Rang

Avatar

Equipe Graphique

Inscrit le : 16/05/2008 à 12h52

Messages: 2478

Le 19/02/2020 à 09h28
Oui c'est le soucis avec le mapping html, en responsive il faut recalculer les coordonnées et pour l'instant il n'y a que javascript qui peut gérer ça.
Mais ce n'est pas le seul soucis, niveau référencement ça ne prend en compte que le title


ban_wind
Site web    
ZatchBell68 Membre non connecté

Booster Bazooka

Rang

Avatar

Inscrit le : 21/06/2009 à 18h32

Messages: 107

Le 19/02/2020 à 12h37
Bonjour,

Oui c'est un peux la galère, mais la j'avais besoin de quelque chose d'actif rapidement. Par la suite je verrais pour faire un découpage sur Photoshop et faire les choses un peux mieux.

Merci beaucoup
Site web    
ZatchBell68 Membre non connecté

Booster Bazooka

Rang

Avatar

Inscrit le : 21/06/2009 à 18h32

Messages: 107

Le 16/05/2020 à 17h06
Bonjour,

Je reviens sur ce post pour vous donner un site qui m'a bien aidé pour transformer mon code en responsive, il faut jute faire quelque ajustement dans le code et quelque fichier a téléchargé.

https://image-map.weebly.com/

Lorsque vous générez le fichier html il y a la ligne
Code :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="imageMapResizer.min.js"></script>
<script>$(document).ready(function(e){$("map").imageMapResize();});</script>


Qu'il faut remplacer par
Code :
<script src="https://lien_de_votre_site/kernel/lib/js/jquery/imageMapResizer.min.js"></script>
<script>$(document).ready(function(e){$("map").imageMapResize();});</script>


et mettre sur votre serveur à l'emplacement /kernel/lib/js/jquery/ le fichier que vous trouverez ici : https://github.com/davidjbradshaw/image-map-resizer
Site web    
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie