Image pc/mobile

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

Booster Bazooka

Rang

Inscrit le : 21/06/2009 à 18h32

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

Modérateur

Rang

Inscrit le : 16/05/2008 à 12h52

Messages: 2602

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

Site web

ZatchBell68

Booster Bazooka

Rang

Inscrit le : 21/06/2009 à 18h32

Messages: 120

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

Booster Bazooka

Rang

Inscrit le : 21/06/2009 à 18h32

Messages: 120

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